How to horizontally center a floating element of a variable width?

css css-float positioning centering variable-width
Waleed Eissa picture Waleed Eissa · Aug 5, 2009 · Viewed 137.8k times · Source

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.

Answer

Leyu picture Leyu · Aug 5, 2009

Assuming the element which is floated and will be centered is a div with an id="content" ... 

<body>
<div id="wrap">
   <div id="content">
   This will be centered
   </div>
</div>
</body>

And apply the following CSS:

#wrap {
    float: left;
    position: relative;
    left: 50%;
}

#content {
    float: left;
    position: relative;
    left: -50%;
}

Here is a good reference regarding that.

Related questions

How to Create Grid/Tile View?

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/…

Read More
Restrict border width to text width in a block element

I have an <h2> title into a fixed with <div> (238px). When this page is rendered, the browser manage line breaks into the title to make the text fit the width (238px). But the width property …

Read More
Mixing floating and fixed positioning

here is a standard use of float and fixed : <html> <head> <style type="text/css"> #bigDiv { background-color: red; height: 2000px; width: 100px; float: left; } #littleDiv { background-color: green; height: 400px; width: 200px; float: left; } #littleDivFixed { …

Read More