|
|
Posted by Beauregard T. Shagnasty on 01/09/07 19:08
Victor wrote:
> 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.
--
-bts
-Motorcycles defy gravity; cars just suck
Navigation:
[Reply to this message]
|