Help on css float parameter

Discussion in 'HTML' started by Victor, Jan 9, 2007.

  1. Victor

    Victor Guest

    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;
    }
    Victor, Jan 9, 2007
    #1
    1. Advertising

  2. Victor wrote:
    > 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


    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
    Jonathan N. Little, Jan 9, 2007
    #2
    1. Advertising

  3. 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
    Beauregard T. Shagnasty, Jan 9, 2007
    #3
  4. Victor

    dorayme Guest

    In article
    <>,
    "Victor" <> wrote:

    > 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)

    --
    dorayme
    dorayme, Jan 9, 2007
    #4
    1. Advertising

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

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Andy
    Replies:
    7
    Views:
    6,226
    Roedy Green
    May 10, 2004
  2. Jim West
    Replies:
    4
    Views:
    1,392
    Jeff Schwab
    Jan 16, 2004
  3. Jukka Lehtonen

    operator== (float, float)

    Jukka Lehtonen, Aug 4, 2004, in forum: C++
    Replies:
    5
    Views:
    2,401
    Jukka Lehtonen
    Aug 5, 2004
  4. bd
    Replies:
    0
    Views:
    597
  5. Carsten Fuchs
    Replies:
    45
    Views:
    1,486
    James Kanze
    Oct 8, 2009
Loading...

Share This Page