two div in one line, first div's width is const and the second isn't

[tomek milewski]

Hello,
I want to make a simple html page. It has a header div, a main div and
some footer div.
I want to make main div to contain two columns (menu and content):

<div class="container">
<div class="header"><p>Some text</p></div>

<div class="main">
<div class="menu"><p>other text</p></div>
<div class="content"><p>and other<p></div>
</div>

<div class="footer"><p>the end</p></div>
</div>

menu div has fixed width (lets say 150px) and I want to make the
content div taking the rest of the container div width (which is for
example 100%).

I found out that making menu and content "float:left" allows them to
be in one line. Bu when I've written more text into content, it became
so wide that my browser broke the line

I also found out that making the menu "position:relative" and adding a
"margin-left:150px" to content also helps. But then I realized that if
menu is high and content is short, then menu crashes with footer.

Now I have no idea, except making content's width fixed.

Any help would be apreciated!

 

[Edwin van der Vaart]

Hello,
I want to make a simple html page. It has a header div, a main div and
some footer div.
I want to make main div to contain two columns (menu and content):

<div class="container">
<div class="header"><p>Some text</p></div>

<div class="main">
<div class="menu"><p>other text</p></div>
<div class="content"><p>and other<p></div>
</div>

<div class="footer"><p>the end</p></div>
</div>

menu div has fixed width (lets say 150px) and I want to make the
content div taking the rest of the container div width (which is for
example 100%).

I found out that making menu and content "float:left" allows them to
be in one line. Bu when I've written more text into content, it became
so wide that my browser broke the line

I also found out that making the menu "position:relative" and adding a
"margin-left:150px" to content also helps. But then I realized that if
menu is high and content is short, then menu crashes with footer.

Now I have no idea, except making content's width fixed.

Use for the footer "clear:both". That way the menu stays left and
content on the right.
--
Edwin van der Vaart
http://www.semi-conductor.nl/ Links to Semiconductors sites
http://www.evandervaart.nl/ Edwin's persoonlijke web site
Explicitly no permission given to Forum4Designers, onlinemarketingtoday,
24help.info, issociate.de and software-help1.org to duplicate this post.

 

[tomek milewski]

Use for the footer "clear:both". That way the menu stays left and
content on the right.

Thanks for the advice but it doesn't work. If the content has too much
text inside, it is dropped to a new line, under left. It works only if
content is short enough to fit in one line.

 

[Bergamot]

Thanks for the advice but it doesn't work. If the content has too much
text inside, it is dropped to a new line, under left. It works only if
content is short enough to fit in one line.

Post a URL.

 

[tomek milewski]

Post a URL.

I've just uploded it on that site:
http://htmtest.republika.pl/

 

[Ben C]

I've just uploded it on that site:
http://htmtest.republika.pl/

Make .content { margin-left: 160px; } and don't float it.

Floats do drop underneath each other if there's not enough space
available, that's what they're supposed to do.

 

[tomek milewski]

Make .content { margin-left: 160px; } and don't float it.

Floats do drop underneath each other if there's not enough space
available, that's what they're supposed to do.

This is IT! Thank You very much.