1

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.

Improve this question

1 Answer 1

Reset to default
4

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

Thank you for much. That was an excellent example. I see what you mean. Thank you very much for the detailed JSFiddle examples.
You're welcome, thanks for including a JSFiddle example in your question.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.