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

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!
 
E

Edwin van der Vaart

tomek said:
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.
 
T

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.
 
B

Bergamot

tomek said:
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.
 
T

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.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,744
Messages
2,569,484
Members
44,903
Latest member
orderPeak8CBDGummies

Latest Threads

Top