I have an SVG that I am trying to center in a div. The div has a width or 900px. The SVG has a width of 400px. The SVG has its margin-left and margin-right set to auto. Doesn&#39;t work, it just acts as if the left margin is 0 (default).

Anyone know my error?



How do I center an SVG in a div?

It&#39;s been a mess to show a DialogBox at the center of its parent form. Here is a method to show a dialog. 

I am positioning its parent to center but not able to center the DialogBox

   

    private void OpenForm(Object point, Object height, Object width)
    {
        FormLoading frm = new FormLoading();
        Point temp = (Point)point;
        Point location = new Point(temp.X + (int)((int)width) / 2, 
                                   temp.Y + (int)((int)height) / 2);
        frm.Location = location;
        frm.ShowDialog();
    }

    private void btnView_Click(object sender, EventArgs e)
    {
        try
        {                    
            ThreadStart starter= delegate { OpenForm(currentScreenLocation, 
                                                     this.Height, this.Width); };
            Thread t = new Thread(starter);
            t.Start();
            ////// Some functionality here...
            t.Abort();
        }
        catch (Exception)
        {
        }
    }

Show Dialog box at center of its parent

I&#39;m trying to find an answer to the following question:

*Is an element&#39;s z-index style its absolute stack order, or its stack order relative to its parent?*

For instance, suppose I have the following code:

    &lt;div style=&quot;z-index:-100&quot;&gt;
        &lt;div id=&quot;dHello&quot; style=&quot;z-index:200&quot;&gt;Hello World&lt;/div&gt;
    &lt;/div&gt;

    &lt;div id=&quot;dDomination&quot; style=&quot;z-index:100&quot;&gt;I Dominate!&lt;/div&gt;

Which one will be in front - #dHello, or #dDomination?

That&#39;s just for examples.  I&#39;ve tried this in multiple places and results seem to vary.  I&#39;m seeing if anyone knows of an authoritative source for settling:

1) What are the actual standards regarding z-index (on this topic specifically)?
2) How do individual browsers vary in their actual implementation of this?

Thanks!

Z-Index Relative or Absolute?

https://stackoverflow.com/questions/2140763/css-push-div-to-bottom-of-page

Please look at that link, I want the opposite: When the content overflows to the scrollbars, I want my footer to be always at the **complete** bottom of the page, like Stack Overflow.

I have a div with `id=&quot;footer&quot;` and this CSS:

    #footer {
        position: absolute;
        bottom: 30px;
        width: 100%;
    }

But all it does is go to the bottom of the viewport, and stays there even if you scroll down, so it is no longer at the bottom.

Image: ![Examlple][1]


  [1]: http://i.stack.imgur.com/ahmtx.png

Sorry if not clarified, I don&#39;t want it to be fixed, only for it to be at the actual bottom of all the content.

Make div stay at bottom of page&#39;s content all the time even when there are scrollbars

How can I make an element automatically be positioned on a new line in the page? In HTML I could use `&lt;br&gt;`, but how do I add something like a **line-break** in CSS?

Say I have the following code for example:

    &lt;p&gt;Lorem ipsum dolor sit amet,
       &lt;span id=&quot;elementId&quot;&gt;consectetur adipisicing elit.&lt;/span&gt;
       Magni totam velit ex delectus fuga fugit&lt;/p&gt;

The span is still positioned on the same line as the rest of the text. How can I move the span text on a new line purely through CSS?

Another example is when using `display: inline-block` or `float`:

    &lt;div class=&quot;smalldiv&quot;&gt;Lorem ipsum dolor sit amet&lt;/div&gt;
    &lt;div class=&quot;smalldiv&quot;&gt;Lorem ipsum dolor sit amet&lt;/div&gt;
    &lt;div class=&quot;smalldiv&quot; id=&quot;elementId&quot;&gt;Lorem ipsum dolor sit amet&lt;/div&gt;
    &lt;div class=&quot;smalldiv&quot;&gt;Lorem ipsum dolor sit amet&lt;/div&gt;

    .smalldiv {
        display: inline-block; // OR
        float: left;
    }

How can I move one of the `&lt;div&gt;`s on a new line to create a new row?

Whats the CSS to make something go to the next line in the page?

How can I relatively position an element, and have it not take up space in the document flow?

Relatively position an element without it taking up space in document flow

I&#39;m trying to create a horizontal 100% stacked bar graph using HTML and CSS. I&#39;d like to create the bars using `DIVs` with background colors and percentage widths depending on the values I want to graph. I also want to have a grid lines to mark an arbitrary position along the graph.

In my experimentation, I&#39;ve already gotten the bars to stack horizontally by assigning the CSS property `float: left`. However, I&#39;d like to avoid that, as it really seems to mess with the layout in confusing ways. Also, the grid lines don&#39;t seem to work very well when the bars are floated.

I think that CSS positioning should be able to handle this, but I don&#39;t yet know how to do it. I want to be able to specify the position of several elements relative to the top-left corner of their container. I run into this sort of issue regularly (even outside of this particular graph project), so I&#39;d like a method that&#39;s:

 1. Cross-browser (ideally without too many browser hacks)
 1. Runs in Quirks mode
 1. As clear/clean as possible, to facilitate customizations
 1. Done without JavaScript if possible.


Position an element relative to its container

What is the difference between `position()` and `offset()`? I tried to do the following in a click event:

	console.info($(this).position(), $(this).offset());

And they seem to return exactly the same... (The clicked element is within a table cell in a table)

jQuery: Difference between position() and offset()

I found this thread — https://stackoverflow.com/questions/1891857/how-do-you-stretch-an-image-to-fill-a-div-while-keeping-the-images-aspect-rat — that is not entirely the thing that I want.

I have a div with a certain size and an image inside of it. I want to **always** fill-out the div with the image regardless if the image is landscape or portrait. And it doesn&#39;t matter if the image is cut-off (the div itself has overflow hidden).

So if the image is portrait I want the `width` to be `100%` and the `height:auto` so it stays in proportion. If the image is landscape I want the `height` to be `100%` and the `width to be `auto`. Sounds complicated right?

    &lt;div class=&quot;container&quot;&gt;
       &lt;img src=&quot;some-image.jpg&quot; alt=&quot;Could be portrait or landscape&quot;/&gt;
    &lt;/div&gt;

Since I don&#39;t know how to do it I simply created a quick image of what I mean. I can&#39;t even properly describe it.

![enter image description here][1]

So, I guess I&#39;m not the first one asking this. However I couldn&#39;t really find a solution to this. Maybe there is some new CSS3 way of doing this - I&#39;m thinking of flex-box. Any idea? Maybe it&#39;s even easier than I expect it to be?

  [1]: http://i.stack.imgur.com/pIDgy.jpg

How can I fill a div with an image while keeping it proportional?

I am using -webkit-transform (and -moz-transform / -o-transform) to rotate a div. Also have position fixed added so the div scrols down with the user.

In Firefox it works fine, but in webkit based browsers it&#39;s broken. After using the -webkit-transform, the position fixed doesn&#39;t work anymore! How is that possible?

Positions fixed doesn&#39;t work when using -webkit-transform

I have some CSS that on hover, a CSS transition effect will moves a div.

The problem, as you can see in the example, is that the `translate` transition has the horrible side effect of making the image in the div move by 1px down/right (and possibly resize ever so slightly?) so that it appears out of place and out of focus...

The glitch seems to apply the whole time the hover effect is applied, and from a process of trial and error I can safely say only seems to occur when the translate transition moves the div (box shadow and opacity are also applied but make no difference to the error when removed).


The problem only seems to happen when the page has scrollbars. So the example with just one instance of the div is fine, but once more identical divs are added and the page therefore requires a scrollbar the problem strikes again...


&lt;!-- 

wayback link does not seem to produce MCVE

https://web.archive.org/web/20140801000000*/https://www.tesstyler.com/StackOverflow/index.html

--&gt;

CSS transition effect makes image blurry / moves image 1px, in Chrome?

`.offset([coordinates])` method set the coordinates of an element but only relative to the document. Then how can I set coordinates of an element but relative to the parent?

I found that `.position()` method get only &quot;top,left&quot; values relative to the parent, but it doesn&#39;t set any values.

I tried with 

    $(&quot;#mydiv&quot;).css({top: 200, left: 200});

but does not work.

In jQuery how can I set &quot;top,left&quot; properties of an element with position values relative to the parent and not the document?

For example, I have some class .article, and I want to view this class as grid view. So I applied this style:

    .article{
      width:100px;
      height:100px;
      background:#333;
      float:left;
      margin:5px;
    }

That style will make the .article look tiled/grid. It&#39;s work fine with fixed height. But if I want to set the height to auto (automatically stretch according to the data within it), the grid look nasty. 

![enter image description here][1]

And I want to make the view like this:

![enter image description here][2]



  [1]: http://i.stack.imgur.com/ukgdAm.jpg
  [2]: http://i.stack.imgur.com/DygbWm.jpg

How to Create Grid/Tile View?

I have an element that is position:fixed and so scrolls with the page how i want it to however. when the user scrolls up I want the element to stop scrolling at a certain point, say when it is 250px from the top of the page, is this possible? Any help or advice would be helpful thanks!

I had a feeling that I would need to use jquery to do so. I tried getting the scrolling or location of the where the user is but got really confused, is there any jquery solutions?

Stopping fixed position scrolling at a certain point?

In CSS, what is the difference between static (default) positioning and relative positioning?

Difference between static and relative positioning

I need my footer to be fixed to the bottom of the page and to center it. The contents of the footer may change at all time so I can&#39;t just center it via margin-left: xxpx; margin-right: xxpx;

The problem is that for some reason this doesn&#39;t work:

    #whatever {
      position: fixed;
      bottom: 0px;
      margin-right: auto;
      margin-left: auto;
    }

I crawled the web and found nothing. I tried making a container div and nada. I tried other combinations and gurnisht. How can I make this happen?

Thanks


CSS: fixed to bottom and centered

I have a positioned div whose content can be too long so scrollbars appear (`overflow:auto` set). It functions as a dialog box in an ajax app. I want to fix a close button on it&#39;s right top corner so when the user scrolls the div it won&#39;t scroll away.

I tryed it with `position:fixed; right:0; top:0` but it placed the button on the right top of the page not in the div (in firefox).

Is it possible to do this button placement using CSS only without hacking with the offsetWidth/Height in js on every scroll event?

ps: the div&#39;s height and width is not a fixed value it depends on the content&#39;s size and the browser window&#39;s size. User can also resize it if he want.

CSS position:fixed inside a positioned element

I have kind of a weird question. On my page I have a main image of a planet in some heavy duty nebula.  I have it set up so the min width is 1000px and max is 1500px. I have the sides fading out and this looks great with larger screens. What I&#39;d like to try to do is when you&#39;re looking at it on a mobile device for example and it&#39;s cutting off the width at 1000 pixels, I&#39;d like the image say 1300 pixels wide, centered and 150 pixels is cut off each side so you can&#39;t see the fade out at all, but is still able to then enlarge is the window&#39;s width becomes larger say on like a large iMac and that fade then becomes visible again once you pass that 1300 pixel width. 

My initial thought was to do something with negative margins on either side, but I couldn&#39;t get this to work while keeping the max and mix widths.

This is that specific section of code from the page, though the html and css is right there for everyone to see, you can just use the fine command to find that div ID for any further looking.

    &lt;div style=&quot;position:relative;width:100%;&quot;&gt;
       &lt;div id=&quot;help&quot; style=&quot;
          position:relative;
          z-index:1;
          height:100%;
          min-width: 1000px;
          max-width: 1500px;
          margin: 0 auto;
       &quot;&gt;
          &lt;img src=&quot;http://i.stack.imgur.com/tFshX.jpg&quot; border=&quot;0&quot; style=&quot;width:100%;&quot;&gt;
       &lt;/div&gt;
    &lt;/div&gt;

Any thoughts on this, it&#39;s very close to working the way I&#39;d like it to, just needs a small tweak.


sizing div based on window width

I would like to create a div, that is situated beneath a block of content but that once the page has been scrolled enough to contact its top boundary, becomes fixed in place and scrolls with the page.

How can I make a div stick to the top of the screen once it&#39;s been scrolled to?

Is it possible to tell the code to position by the center point of an element, rather than by the top-left point?
If my **parent** element has

    width: 500px;

and my **child** element has

    /*some width, for this example let&#39;s say it&#39;s 200px*/
    position: absolute;
    left: 50%;

one would assume that based on the `50%` positioning, the child element will be in the middle of the parent, leaving `150px` of free space on each side. However, it is not, since it is the top-left point of the child that goes to `50%` of the parent&#39;s width, therefore the whole child&#39;s width of `200px` goes to the right from there, leaving `250px` of free space on the left and only `50px` on the right.

So, my question is, how to achieve **center positioning**?

I found this solution:

    position: absolute;
    width: 200px;
    left: 50%;
    margin-left: -100px;

but I don&#39;t like it because you need to edit it manually for each element&#39;s width - I would like something that works globally.

(For example, when I work in Adobe After Effects, I can set a position for an object and then set specific anchor point of that object that will be put to that position. If the canvas is `1280px` wide, you position an object to `640px` and you choose the center of the object to be your anchor point, then the whole object will be centered within the `1280px` wide canvas.)

I would imagine something like this in CSS:

    position: absolute;
    left: 50%;
    horizontal-anchor: center;

Similarly, `horizontal-anchor: right` would position the element by its right side, so the whole content would be to the left from the point of its parent&#39;s `50%` width.

And, the same would apply for `vertical-anchor`, you get it.

So, is something like this possible using **only CSS** (no scripting)?

Thanks!

    

Position by center point, rather than top-left point

How to horizontally center a floating element of a variable width?

Edit: I already have this working using a containing `div` for the floating element and specifying a `width` for the container (then use `margin: 0 auto;` for the container). I just wanted to know whether it can be done without using a containing element or at least without having to specify a `width` for the containing element.

All Positioning Solutions on Gang of Coders

Total of 21 Positioning Solutions