SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Guru glenngould's Avatar
    Join Date
    Nov 2005
    Posts
    661
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Floating elements with different heights in two columns

    Is there a way to float a list of items with varying heights in two columns as displayed in the image below?



    The numbers on the boxes shows the order of the items in the HTML markup.
    Tweep List adds an avatar menu to Twitter (open source)
    Word Stats shows your most used words on Twitter

  2. #2
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Due to the nature of floats it's not going to work like that.

    Let's say your floats were 200px wide and they were all floated left in a 400px wide parent. That would allow you to get them to display in the order of the markup.

    In your image where you have float #6 hanging on #3, that would actually be float number #5 snagging on #3. Then float #6 would be dropping below #5 with a gap above #6.

    The only way to do that with floats is to float two columns. But that will defeat your source order.

  3. #3
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    2,106
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You call it lists? But I don't see any <li> elements?

    If you want something similar to the example you could do something like:
    Code HTML4Strict:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
     
    <style type="text/css">
    html, body {
    	margin: 0;
    	padding: 0;	
    }
     
    #wrapper {
    	width: 500px;
    	margin: 100px auto o;
    	overflow: hidden;	
    }
     
    .column {
    	width: 245px;
    	float: left;	
    }
     
    .left {
    	margin-right: 10px;	
    }
     
    .box {
    	width: 245px;
    	height: 90px;
    	margin-bottom: 5px;	
    	background: #20ABFF
    }
     
    .box p {
    	margin: 5px;
    	font-size: 16px;
    	font-weight: bold;
    	color: #FFF	
    }
     
    .three {
    	height: 150px;	
    }
     
    .four {
    	height: 110px;	
    }	
     
     
    </style>
    </head>
     
    <body>
    <div id="wrapper">
     
    <div class="column left">
     
    <div class="box"><p>1</p></div>
    <div class="box three"><p>3</p></div>
    <div class="box"><p>5</p></div>
    </div>
     
    <div class="column">
    <div class="box"><p>2</p></div>
    <div class="box four"><p>3</p></div>
    <div class="box"><p>6</p></div>
    </div>
     
    </div>
     
     
    </body>
    </html>

  4. #4
    SitePoint Guru glenngould's Avatar
    Join Date
    Nov 2005
    Posts
    661
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    @Rayzur: You described the exact behaviour I'm seeing in my tests. I've managed to flow one side (left or right) as the way I need. But having also read a few more posts of yours in related threads it looks impossible to achieve it with floats.

    @donboe: In your example, the elements' order is not what I need. Be it lists or any other element this is the order I need in the markup:

    <element1><element2><element3><element4><element5><element6>

    Edit:

    Sample HTML, feel free to post your ideas

    HTML Code:
    <html>
    <head>
    	<style>
    		.box {background:#20abff; color:#fff; width:100px; margin: 0 0 5px 0;}
    		.left {float:left;}
    		.right {float:right;}
    		.container {width:205px;}
    	</style>
    </head>
    <body>
    
    <div class="container">
    	<div class="box left" style="height:60px;">1</div>
    	<div class="box right" style="height:80px;">2</div>
    	<div class="box left" style="height:60px;">3</div>
    	<div class="box right" style="height:60px;">4</div>
    	<div class="box left" style="height:60px;">5</div>
    	<div class="box right" style="height:60px;">6</div>
    </div>
    
    </body>
    </html>
    Tweep List adds an avatar menu to Twitter (open source)
    Word Stats shows your most used words on Twitter

  5. #5
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    If you knew what the heights were on each of these blocks you could pull it off with some negative margins and inline-blocks. I'm sure that is not what you are after though but you might find this interesting just the same.


    Code HTML4Strict:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
     
    <title>Inline-Block Test</title>
     
    <style type="text/css">
     
    .nav  {
        width:400px;
        display:table; 
        margin:50px auto;
        padding:5px;
        list-style:none;
        background:#333;
        word-spacing:-1em; 
    }
     
    .nav li {
        width:190px;
        display:inline-block;
        vertical-align:top;
        margin:5px;
        color:#FFF;
        word-spacing:0;
    }
    .a {
        height:150px;
        background:red;
    }
    .b {
        height:200px;
        background:blue;
    }
    .c {
        height:150px;
        background:green;
    }
    .d {
        height:150px;
        background:orange;
    }
    .nav li.neg {margin-top:-45px;}
    </style>
     
    </head>
    <body>
     
    <ul class="nav">
        <li class="a">one</li>
        <li class="b">two</li>
        <li class="c neg">three</li>
        <li class="d">four</li>
        <li class="b neg">five</li>
        <li class="a">six</li>
    </ul>    
     
    </body>
    </html>

  6. #6
    SitePoint Guru glenngould's Avatar
    Join Date
    Nov 2005
    Posts
    661
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This looks nice, but you're right I do not know the exact height. Well, kind of...

    Each box layout is almost identical in the actual layout, except the title height (a header element). If a title is long enough to wrap into a second line for instance, it changes the height of the box.

    There are a few other solutions to this (relying on letter arithmetic, or 1,3,5 - 2,4,6 even-odd approach as donboe demonstrated) but I just hoped that it could flow smoothly with a few floats
    Tweep List adds an avatar menu to Twitter (open source)
    Word Stats shows your most used words on Twitter


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
  •