CODEWITHSUNDEEP
htmlcss
mgiuffrida
mgiuffrida

Reputation: 3579

Centering floated, width-less divs with CSS

You can see what I'm going for at http://jsfiddle.net/vW45s/. A center div with two lines of text, and text on the left and right that abuts the text at the bottom of the center div.

I would like the text to be centered on the page (either the main "hello world" or the second line). Right now I'm using an outer div with a specified width and margin: auto. If the width is too large, the text will not appear to be centered; if the width is too small for the inner text, the divs will be stacked: http://jsfiddle.net/vW45s/1/.

Is there a better way to center these three floated divs, while still getting the left and right text to align with the second line of the center div?

Any tips would be appreciated. CSS is not my strong point, but I'm learning.

Upvotes: 2

Views: 889

Answers (2)

Aaron Digulla
Aaron Digulla

Reputation: 328840

Floating and centering doesn't mix well. To be able to center something, the browser must be able to determine how wide the element is. To determine it's width, it needs to know how wide the other floating divs are. Their width depends on the width of the element you want to center.

You have these options:

  1. Try to get it to work without assigning a size. It might be possible. Be ready to spend a day or two on this to get it work with Firefox and Chrome and then one week to fix it in IE. ;)

  2. Assign a width to all three divs

  3. Use absolute positioning instead of floating. Make the center column 100% wide and move the side columns in front of it (one left with left: 0 and the other right with right: 0; both will need a definite width). That works until you start resizing the browser window too much (and the side columns start to overlap with the center).

  4. Use a table or display: table-cell because table cells know about their siblings widths without floating. That means you can assign a width to the two side columns and then let the inner column grow.

PS: Yes, I know about the myth that tables are bad. The myth is a gross simplification. It's bad to nest 500 tables to get the design you want if you can get the same result with two divs and some smart CSS. But that doesn't mean you must not use tables at all.

Upvotes: 2

eivers88
eivers88

Reputation: 6247

Have you tried adding width: 33% to the left, right, and center divs along with text-align: center?

Upvotes: 0

Related Questions