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

DarthSwian — Fri, 09 May 2008 11:55:26 GMT

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.

css to layout little blocks of information in a flowing way

bboyle1234 — Fri, 09 May 2008 06:02:48 GMT

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

Client Side Web Development

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

css to layout little blocks of information in a flowing way