Help on css float parameter

V

Victor

Dear all,
I'm having a hard time trying to work with two <div> tags and the float
functionality. I want two div blocks to be one after the other (one
menu on the left, and the content on the right).
Problem is that I want these blocks to have a % width (30% - 70%),
which leads the float parameter not to work anymore (blocks are one
below the other). Any idea ?

div#menu
{
float:left;
width: 30%;
border-right: lightgrey 1px solid;
}
div#contenu
{
width: 70%;
background-color: green;
}
 
J

Jonathan N. Little

Victor said:
Dear all,
I'm having a hard time trying to work with two <div> tags and the float
functionality. I want two div blocks to be one after the other (one
menu on the left, and the content on the right).
Problem is that I want these blocks to have a % width (30% - 70%),
which leads the float parameter not to work anymore (blocks are one
below the other). Any idea ?

div#menu
{
float:left;
width: 30%;
border-right: lightgrey 1px solid;
}
div#contenu
{
width: 70%;
background-color: green;
}

30% + 70% + 1 pixel > 100%

http://www.w3.org/TR/CSS21/box.html
 
B

Beauregard T. Shagnasty

Victor said:
I'm having a hard time trying to work with two <div> tags and the
float functionality. I want two div blocks to be one after the other
(one menu on the left, and the content on the right). Problem is that
I want these blocks to have a % width (30% - 70%), which leads the
float parameter not to work anymore (blocks are one below the other).
Any idea ?

div#menu
{
float:left;
width: 30%;
border-right: lightgrey 1px solid;
}
div#contenu
{
width: 70%;
background-color: green;
}

You need to set a left margin for the content div. Also, you don't need
to float the menu. See this example:

http://benmeadowcroft.com/webdev/csstemplates/left-column.html

He separates the text styling from the design, using multiple
stylesheets. This is for the layout:
http://benmeadowcroft.com/webdev/csstemplates/left-column.css

He also uses 'class' instead of 'id' and I prefer using 'id' as there
should only be one of each div on the page. Either way, it works fine.
 
D

dorayme

"Victor said:
Dear all,
I'm having a hard time trying to work with two <div> tags and the float
functionality. I want two div blocks to be one after the other (one
menu on the left, and the content on the right).
Problem is that I want these blocks to have a % width (30% - 70%),
which leads the float parameter not to work anymore (blocks are one
below the other). Any idea ?

div#menu
{
float:left;
width: 30%;
border-right: lightgrey 1px solid;
}
div#contenu
{
width: 70%;
background-color: green;
}

Perhaps best not to have such tight dimensions. IE6 adds pixels
under various float conditions. Consider not adding any width to
the content div, or else one that is one or two or more % less
than 70. You might also wanting to be giving some padding to the
the divs (adding even more px that need accounting for). In this
sort of setup, best to supply margins, especially left margin for
the content div to give the menu div a defined space to "sit in"
so that there is no content then flowing under the menu pane
(unless that is what you want, of course)
 

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

Forum statistics

Threads
473,744
Messages
2,569,484
Members
44,906
Latest member
SkinfixSkintag

Latest Threads

Top