float:left

[kshawkeye]

I'm kinda confused here. I have this html code:

<div class="container">		<div class="left">		</div>		<div class="right">		</div></div>

and this is my css code:

.container {width: 960px; background-color:#FFF; margin-left:auto; margin-right:auto;}.left {width:460px; display:inline; float:left;}.right {width:460px; display:inline; float:left;}

I'm just trying to have the container class wrap everything, and right now the left and right are not displaying inside it. I think it's something with the float, but I'm not sure.I don't really get why the two columns are not displaying inside the container, can anyone explain?Thanks

[Fmdpa]

Is the missing open-quote on div.left part of the original code?

[kshawkeye]

Oops, my mistake, no it isn't missing it I just accidentally deleted it when posting.Do you have any idea why the two columns are being displayed below the container? (instead of inside it.)

[Ingolme]

Floated elements don't add to the height of their container. You can solve it by adding overflow: auto to the container.I don't think you should be applying display: inline to the columns because then there's no point in floating them.

[kshawkeye]

I don't think you should be applying display: inline to the columns because then there's no point in floating them.

How do I get them to stay on the left or right then? I want them side by side, isn't float the way to do this?

[Fmdpa]

I'd get rid of the floats and just have them display inline. Floats take the element out of the flow of other elements and align them to the left or right.

[cousineaug]

I'd get rid of the floats and just have them display inline. Floats take the element out of the flow of other elements and align them to the left or right.

but if you display inline the element has no width so you need

.container {width: 960px; background-color:#FFF; margin-left:auto; margin-right:auto;}.left {width:460px; display:inline-block;}.right {width:460px; display:inline-block;}

[kshawkeye]

That fixed most of my problem, now my code reads:HTML:

<div class="container">		<div class="column_left">			<h2>Left</h2>		</div>		<div class="column_right">			<h2>Right</h2>		</div>	</div>

CSS:

.container {overflow: auto; width: 960px; background-color:#F00; margin-left:auto; margin-right:auto; margin-top:10px;}.column_left {width:460px; display:inline-block; margin-left:10px; margin-right:10px;}.column_right {width:460px; display:inline-block; margin-left:10px; margin-right:10px;}

The right column is still being displayed under the left.I've found that if I change margin-left:10px; margin-right:10px; to margin-left:9px; margin-right:9px; it bumps the right up so they are next to each other, but the math doesn't add up.My width for container is 960, my two columns are 460 with a 10 margin. So 460+10x2=480. 480x2=960, I should be alright but it doesn't seem to agree. How does (460+9x2)x2=956, why would it need to be 956 to fit side by side?

[cousineaug]

My width for container is 960, my two columns are 460 with a 10 margin. So 460+10x2=480. 480x2=960, I should be alright but it doesn't seem to agree. How does (460+9x2)x2=956, why would it need to be 956 to fit side by side?

I get the same results We're off by 4 pixels now matter how I move things around....someone else may have an elegant answer...........Guy

[Ingolme]

If you're displaying them as inline blocks, be sure to not leave any whitespace or line breaks between the elements:Wrong

<div></div><div></div>

Right:

<div></div><div></div>

The reason being that line breaks and other whitespace translate to a single space between the two columns that occupies its own width.Edit: Now that I think of it, removing spaces or line breaks before and after the columns could also be useful

[kshawkeye]

Good eye Ingolme. Changing the HTML to:

<div class="container"> <div class="column_left"> <h2>Left</h2> </div><div class="column_right"> <h2>Right</h2> </div> </div>

Seems to fix the problem. Thanks

[kshawkeye]

Sorry for the double post but is there anyway around this? Or do I need to really pay attention to my whitespace now?

[Ingolme]

You have to pay attention to whitespace when you're working with inline or inline-block elements. That's all.There's another property about these two types of elements that might catch you by surprise: They usually have a bit of "padding" at the bottom but it's not really padding nor margin. It's a bit of space under the element left for letters like y, j and g that have portions going under the baseline. In order to get rid of that problem you can set the vertical-align property to "middle"

[cousineaug]

Sorry for the double post but is there anyway around this? Or do I need to really pay attention to my whitespace now?

actually it is only the space between the DIV you need to watch: this works fine

<div class="container">		<div class="column_left"><h2>Left Content</h2> </div><div class="column_right">			<h2>Right Content</h2>		</div></div>

as for the "trouble", does 4 pixels make that much difference? Can you go with 964 or 9 margins?If you have elements that will use exactly that space then it is critical - otherwise you would not know the difference looking at it from across the street :-)

[Ingolme]

The 4 pixels is only for specifically one font size and font family. If the page font was different it may be greater than 4 pixels.

[kshawkeye]

I'm not sure if I like having to watch all my whitespace, is there a better way of doing things or is this what seems to be done by everyone?

[Ingolme]

I'm not sure if I like having to watch all my whitespace, is there a better way of doing things or is this what seems to be done by everyone?

A lot of people just use floating instead.With floating you only have to watch that your margin, border, padding and width sum up to less than the width of the parent container.This means you can't mix percentages with pixels.In order to make the container surround the floating blocks you have to set overflow to auto or hidden, or give it padding on the top and bottom.I prefer floating because you don't need to worry about what's in the mark-up.

[ShadowMage]

With floating you only have to watch that your margin, border, padding and width sum up to less than the width of the parent container.This means you can't mix percentages with pixels.

Actually, you can in browsers that support box-sizing. Which all the latest versions do (the only oddball is FF, which I believe still requires the -moz prefix).

[Ingolme]

Actually, you can in browsers that support box-sizing. Which all the latest versions do (the only oddball is FF, which I believe still requires the -moz prefix).

I currently still develop for Internet Explorer 7 and will continue to do so for a while. Though you can, of course, use the other box model by making Internet Explorer run in quirks mode.