SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Zealot boognish's Avatar
    Join Date
    Sep 2005
    Location
    Leeds
    Posts
    102
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Need 3 liquid divs to stretch across page

    I'm trying to figure out a similar front page layout as www.dabs.com. Specifically how it displays the hot deals. I have 6 pages I want to link to from the front page in 6 divs - 2 rows, 3 columns that stretch across a container div, like the hot deals divs do at dabs. The dabs source is too complicated to see how its done. Can anyone help me with this please?
    Last edited by boognish; Oct 12, 2007 at 22:11.

  2. #2
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,115
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    When you use the term liquid it usually refers to percentage width based layouts where you could have something like
    20% | 60% | 20%

    In this case it's just consecutive floats of fixed width that stack against each other..
    http://www.yellowshoe.com.au/examples/float_stack.html

    Hope it helps

  3. #3
    SitePoint Zealot boognish's Avatar
    Join Date
    Sep 2005
    Location
    Leeds
    Posts
    102
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the link Mark, although thats not what I had in mind. See how on www.dabs.com the divs (hot deals) are liquid. I'd like it to be a liquid (percentage based) 2 row, 3 column layout. Except unlike dabs, if the user changes the size of the browser window alot, I want it to stay as 3 columns. Have you got any examples of this?

    As in - as this image demonstrates

  4. #4
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Float the right column and give it a fixed width in pixels (I'm guessing that's what it's s'posed to be); give the wide left column no width but instead a margin-right equal to the width of the right column.
    Then the white boxes in the middle will be inside the wide column, floated left and given a width equal to about a third of 100% once adjusted for margins and padding.

  5. #5
    SitePoint Zealot boognish's Avatar
    Join Date
    Sep 2005
    Location
    Leeds
    Posts
    102
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for that, that was really helpful. I'm getting there - http://edpersonaltraining.com/front.php. I still have the issue of the of it not staying as a 3 column layout, it drops down to 2 colums when the browser window is reduced too much.

    Code:
    CSS
    
    #wrapper { 
    text-align: left;
    width: 100%;
    margin: 0 auto; 
    background: #000 repeat-y 10px 0;
    }
    
    #contentfloatholder {
    background: repeat-y 100% 0;
    float: left;
    width: 100%;
    }
    
    #centerwrap {
    float:left;
    width: 100%; 
    margin: 0 -95% 0 0;
    }
    
    #center2 {
    margin: 0 175px 0 11px;
    }
    
    .box {
    margin:20px;
    width:29%;
    height:250px;
    float:left;
    background:white;
    	}
    
    
    HTML
    
    <div id="wrapper">
    <div id="header">...header content</div>
    <div id="contentfloatholder">
      <div id="centerwrap">
    
        <div id="center2">
          <div class="box"></div>
          <div class="box"></div>
          <div class="box"></div>
          <div class="box"></div>
          <div class="box"></div>
          <div class="box"></div>
        </div>
      
      </div>
      <div id="right">Menu content...</div>
        </div>
      </div>
    </div>
    How do I stop it from doing that?

  6. #6
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It's because you've used pixel margins. At some point, 20px is going to be greater than the space left over for it after you've deducted the &#37; width. That's why you shouldn't mix units on width/padding/margins.

  7. #7
    SitePoint Zealot boognish's Avatar
    Join Date
    Sep 2005
    Location
    Leeds
    Posts
    102
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Perfect - Thank you very much!

  8. #8
    SitePoint Zealot boognish's Avatar
    Join Date
    Sep 2005
    Location
    Leeds
    Posts
    102
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I came across IE6 display problems while browser testing. Can't figure out how to sort this, it looks fine in other browsers. Can anyone help?

    The page - http://www.edpersonaltraining.com
    The page in IE6 - http://www.edpersonaltraining.com/picts/ie6problem.jpg

    Code:
    HTML
    <div id="wrapper">
      <div id="header">...header content</div>
      <div id="contentfloatholder">
        <div id="centerwrap">
          <div id="center">
            <div class="innerleftcontent"> <a href="http://www.edpersonaltraining.com/edpt.php"><img src="picts/welcomebutton.jpg" class="frontbuttons" /></a> <a href="http://www.edpersonaltraining.com/blog/blog.php"><img src="picts/blogbutton.jpg" class="frontbuttons" /></a> <a href="http://www.edpersonaltraining.com/edge.php"><img src="picts/getfitbutton.jpg" class="frontbuttons" /></a><br />
              <img src="picts/solutions1.jpg" class="frontbuttons" /> <img src="picts/solutions2.jpg" class="frontbuttons" /> <img src="picts/solutions3.jpg" class="frontbuttons" /> <br />
              <a href="http://www.edpersonaltraining.com/you.php"><img src="picts/youbutton.jpg" class="frontbuttons" /></a> <a href="http://www.edpersonaltraining.com/home.php"><img src="picts/homebutton.jpg" class="frontbuttons" /></a> <a href="http://www.edpersonaltraining.com/team.php"><img src="picts/teambutton.jpg" class="frontbuttons" /></a> </div>
          </div>
        </div>
        <div id="right">Menu content...</div>
      </div>
    </div>
    </div>
    Code:
    CSS
    
    #wrapper { 
    text-align: left;
    width: 100&#37;;
    margin: 0 auto; 
    background: #000 repeat-y 10px 0;
    }
    
    #contentfloatholder {
    background: repeat-y 100% 0;
    float: left;
    width: 100%;
    }
    
    #centerwrap {
    float:left;
    width: 100%; 
    margin: 0 -95% 0 0;
    }
    
    #center {
    margin: 0 175px 0 11px;
    background-color:#ffffff;
    border-color:#99cc33;
    border-width:2px;
    border-style:solid;
    min-height:552px;
    }
    
    .innerleftcontent
    {
    margin-top:0px;
    margin-bottom:20px;
    margin-left:20px;
    margin-right:20px;
    text-align:justify;
    	}
    
    .frontbuttons {
    margin-left:2%;
    margin-right:2%;
    margin-top:0%;
    margin-bottom:0%;
    width:29%;
    height:29%
    float:left;
    }

  9. #9
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Your width and margins on the images add up to 33&#37; which you would think would be right, but IE6 often gets it a bit wrong and you have to reduce something to make it work. You're also missing the ; before the float: left so it's not actually being applied. You also don't need height on the images either.

  10. #10
    SitePoint Zealot boognish's Avatar
    Join Date
    Sep 2005
    Location
    Leeds
    Posts
    102
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Tyssen. It was the typo ; I missed out. Also reducing the percentage from 29&#37; to 28% corrected the display issue. Though removing the height with the missed ; typo has had strange effects on the display in all browsers. It appears the the "height:29%" with the missing ; allowed the "centre" div to change height with the buttons height change, now its removed the centre div just stays at its min-height and the buttons move over the top of it. I've been trying to recify this for hours now. Can't figure out now to get the centre div to move with the buttons. Any ideas how to sort this?

  11. #11
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,481
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    HI,

    You need to clear the floats taht are contained within #center.

    See the faq on floats for a number of clearing techniques and an explanation


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •