1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Preventing wrapping around a float DIV

Discussion in 'CSS' started by Will.Spencer, Oct 7, 2005.

  1. #1
    I'm thinking wrongly about this and I can't figure out where my error is.

    I have three div's:

    1. A big DIV that encompasses everything.

    div.body {
    background-color: #FFFFFF;
    width : 100%;
    margin : 1em;
    }

    2. A floating left DIV.

    div.left {
    position : relative;
    float : left;
    background-color: #FFFFFF;
    }

    3. A floating right DIV.

    div.right {
    position : relative;
    float : right;
    background-color: #FFFFFF;
    }
    SEMrush
    div.left isn't very tall. div.body, on some pages, is very very tall.

    I thought it would be extra cool if the text within div.body slid (I'm missing the right word here) all the way to the left side of the browser window after div.left finished.

    I was wrong. It looks awful. :eek:

    How do I make it stop? :confused:

    Effectively, I want to set the height of div.left to 100%.

    Does my explanation make sense?
     
    Will.Spencer, Oct 7, 2005 IP
    SEMrush
  2. mjewel

    mjewel Prominent Member

    Messages:
    6,693
    Likes Received:
    514
    Best Answers:
    0
    Trophy Points:
    310
    #2
    I'm no expert, but I think you can assign a 100% height to the left div, but only if you assign a height to your div.body.

    You might give it a try until someone smarter comes along :)
     
    mjewel, Oct 7, 2005 IP
  3. Will.Spencer

    Will.Spencer NetBuilder

    Messages:
    14,789
    Likes Received:
    1,040
    Best Answers:
    0
    Trophy Points:
    375
    #3
    Thanks mjewel. :)

    Unfortunately, that has the same effect. <blush>
     
    Will.Spencer, Oct 7, 2005 IP
  4. mjewel

    mjewel Prominent Member

    Messages:
    6,693
    Likes Received:
    514
    Best Answers:
    0
    Trophy Points:
    310
    #4

    Hmm, I just tested it and it seems to work for me. Are you assigning a fixed height to the wrapper?

    <style type="text/css">
    <!--

    div.body {
    background-color: #FFFFFF;
    width : 100%;
    margin : 1em;
    height:500px;
    }



    div.left {
    position : relative;
    float : left;
    background-color: #FFFFFF;
    height:100%;
    }


    div.right {
    position : relative;
    float : right;
    background-color: #FFFFFF;
    }

    -->
    </style>
     
    mjewel, Oct 7, 2005 IP
  5. Will.Spencer

    Will.Spencer NetBuilder

    Messages:
    14,789
    Likes Received:
    1,040
    Best Answers:
    0
    Trophy Points:
    375
    #5
    Ah... no. I set the wrapper to 100%. Each page contains a different amount of content.
     
    Will.Spencer, Oct 7, 2005 IP
  6. mjewel

    mjewel Prominent Member

    Messages:
    6,693
    Likes Received:
    514
    Best Answers:
    0
    Trophy Points:
    310
    #6
    The 3 column layout with a footer is the holy grail of CSS and there is no perfect method to do it. There are various hacks and javascript that get close.

    If you don't want a footer, I think you just need to add another div box for the center main body content, with a fixed or percentage width and auto height which would constrain the center from flowing into the left or right div's? You would have a wrapper around three boxes- left, center, right.

    Of course, I don't know all you are trying to accomplish so I may be way off base.

    http://www.redmelon.net/tstme/3colfixed/
     
    mjewel, Oct 7, 2005 IP
  7. Will.Spencer

    Will.Spencer NetBuilder

    Messages:
    14,789
    Likes Received:
    1,040
    Best Answers:
    0
    Trophy Points:
    375
    #7
    I do want a footer. :)

    Right now the footer is just at the bottom of the content, inside div.body.

    I've tried using another DIV for the center main body content. I could not make it work, but I will try again. :)

    Here is a page that shows what I have right now. If you scroll down, you can see the issue.

    http://www.tech-faq.com/ringback-number.shtml
     
    Will.Spencer, Oct 7, 2005 IP
  8. mjewel

    mjewel Prominent Member

    Messages:
    6,693
    Likes Received:
    514
    Best Answers:
    0
    Trophy Points:
    310
    #8
    I don't think there is a way to set the height of the left div to 100% unless you define a height. Other than using a table to establish a left and right column (where you could then place your div's) or if your left div is going to be the same fixed height on all pages, you could absolute position the main body div from the top and left - I don't know what else to suggest.
     
    mjewel, Oct 7, 2005 IP
  9. Roze

    Roze Guest

    Messages:
    403
    Likes Received:
    29
    Best Answers:
    0
    Trophy Points:
    0
    #9
    I just worked on a 2 column layout in CSS yesterday - I too had to learn from scratch. All my sources told me that both columns had to say float:left, not one float:left and one float:right. I have no idea thouhg, just a thought.

    The columns are working though. The area behind the black bamboo painting is the second div: http://www.rosebytes.com/bobo/musical_articles/
     
    Roze, Oct 7, 2005 IP
  10. Will.Spencer

    Will.Spencer NetBuilder

    Messages:
    14,789
    Likes Received:
    1,040
    Best Answers:
    0
    Trophy Points:
    375
    #10
    Will.Spencer, Oct 8, 2005 IP