[hiddenghost]

I'm having a little trouble making some borders fit around some content.
The problem is the borders just bunch up at the top and the content pushes down like it should.
The css for this with the border that doesn't work inside the class item_box

.item_box{
 display: block;
 padding: 1em 1em 1em 1em;
 margin: 10px 1px 10px 1px;
 border: 1px solid black;
 padding: 1px 1px 1px 1px;
}

.item_name{
 float: left;
 width: 100%;
 border-bottom: 1px solid black;
 padding: 5px 0 0 0;
}

.item_data{
 display: block;
 padding: 15px 5px 5px 5px;
}

.item_desciption{
 width: 100%;
 margin: 20px 10px 0 0;
 float: left;
 position: relative;
 top: 2px;
}

.item_price{
 float: right;
 margin: 5px 0 5px 10px;
 background: gray;
 color: white; 
 padding: 3px 8px 3px 8px;
 position: relative;
 top: 2px;
}

.item_source{
 float: right;
 margin: 5px 0 5px 0;
 background: gray;
 color: white;
 padding: 3px 8px 3px 8px;
 position: relative;
 top: 2px;
}

The html.

    <div class="item_box">
        <span class="item_name">A Name</span>
        <span class="item_data">
            <span class="item_price">Price (avg.): $10.00</span>
            <span class="item_source">Recent Source: Things to buy</span>
            <span class="item_desciption">A thing</span>
        </span>
    </div>

The html is repeated with php. All the borders just bunch up at the top of the page.
I'm using firefox if that means anything.

This post has been edited by hiddenghost: 17 January 2012 - 08:22 PM

[Dormilich]

that's due to the float. floated content does not count when calculating the height of the container. therefore the container will more or less collapse (depending on the non-floated content), and with it the borders.

what you could do is inserting an element at the end with the clear property.

[revolutionx]

Yes, as Dormilich said,

You'll need to add the following CSS:

.item_box:after {
        display: block;
        clear: both;
        content: " ";
        height: 0;
        overflow: hidden;
}

[hiddenghost]

Thanks. This will help a lot.

I'm trying to make it so the page will work on any screen size without an alternate page. Like with phones.

I was just starting out with the float to get the content to fill any browser window size. Just couldn't get the borders right.