css to layout little blocks of information in a flowing way

Last post 05-09-2008 7:55 AM by DarthSwian. 1 replies.

Sort Posts:

  • css to layout little blocks of information in a flowing way

    05-09-2008, 2:02 AM
    • Loading...
    • bboyle1234
    • Joined on 03-01-2007, 7:28 PM
    • Posts 73

    Hi,

    I think I may have given myself a hint to my answer when I used the word "flow" in the title above, but please help me with this problem:

    I have a repeater spitting out items that look like this:

    <style>
    
    /* these two items should be side by side */
    
    .itemInfo
    {
        width: 80px;
        float: left;
    }
    
    .itemDescription
    {
        width: 80px;
        float: left;
    }
    
    </style>
    
    <div class="itemWrapper">
        <div class="itemInfo">
            itemName<br />
            itemTimeStamp<br />
            <img src="tinyImage1.png" /><img src="tinyImage2.png" />
        </div>
        <div class="itemDescription">
            sample item description
        </div>
    </div>
    
     
    These items are to go inside a <div> which is 500px wide. Each item is exactly 130px wide.

    I want them to be displayed in vertically-aligned rows, two to each row, spaced nicely to fill the 500px-wide container.

    Can you help me figure out how to get these things to flow nicely into the structure? If the container widens to 800px, for example, they should fill up 3 or 4 to a row depending on their width and margin attributes.

    Thank you in advance,

    Ben 

  • Re: css to layout little blocks of information in a flowing way

    05-09-2008, 7:55 AM
    Answer
    • Loading...
    • DarthSwian
    • Joined on 12-04-2007, 2:47 PM
    • Florida
    • Posts 556

     You'd want the item wrapper to float left and put THAT in a div, everything will move to the next row if there isn't enough room in the containing div for the next item.

    "Hokey religions and ancient weapons are no match for a good blaster at your side."
Page 1 of 1 (2 items)