CODEWITHSUNDEEP
htmlcsscss-float
webworm
webworm

Reputation: 11019

CSS/Float - Floated element doesn't use width assigned

I am trying to create a site layout using CSS. I have four (4) DIV elements. One is the main container that I have centered in the page and contains all the other DIV elements. Of the remaining three DIVs one is a page header, one is a left menu and the last holds content for the page. I would like to have the CONTENT DIV floated such that it is adjacent to the MENU DIV. However, I am finding that the width of the CONTENT DIV is not using the width I specified. I have created a sample running on JSFIDDLE which should make it easier to visualize.

http://jsfiddle.net/Rrgr7/

What I am trying to figure out is why the CONTENT DIV doesn't take up 600 pixels as I have defined? Thank you.

Upvotes: 1

Views: 143

Answers (1)

Jason Goemaat
Jason Goemaat

Reputation: 29214

You have to float your content also. Your content div is 600 from the left not counting the float and if you add more text it will run down under the menu: example.

If you float it, then it will do what you want, but you have to be careful about sizes or it will float down under your menu.

If you just give it a 200px margin and no width, I think that would work best as it would use the remaining space and stay 200px from the left edge. The float doesn't push it further, the margin is from the container div.

Upvotes: 4

Related Questions