CODEWITHSUNDEEP
csscss-float
Brett
Brett

Reputation: 20049

Using border-right with floats displays incorrectly

I am floating a couple divs inside a container div & the first div has a border on the right. It works correctly WITHOUT the border, but when I add the border it all messes up & the text inside the container on the right displays itself under the border from the other div.

To show you what I mean here is a picture:

messed display

Here is my code:

<div style="margin: 0px auto; width: 500px; border: 1px solid #000;">
    <div style="width: 500px; border-bottom: 1px solid #000;">
        <div style="float: left; width: 250px;">Resolution/Megapixels</div>
        <div style="float: right; width: 250px;">Average Quality Size/Best Quality Size</div>
        <div style="clear: both;"></div>
    </div>
    <div style="width: 500px; border-bottom: 1px solid #000;">
        <div style="float: left; width: 250px; border-right: 1px solid #000;">0.5 megapixels</div>
        <div style="float: right; width: 250px;">3x5 inches/NA</div>
        <div style="clear: both;"></div>
    </div>
</div>

Edit:

Please disregard. Worked it out as soon as I posted this.

Upvotes: 0

Views: 435

Answers (3)

Gilsham
Gilsham

Reputation: 2276

it is because adding a boarder to an element will add the border width to the elements width so your border is making the "3x5 inches" is actually 251px wide forcing it down as it can't fit next to a 250px width element in a 500px container, just reduce one of the 250px divs by 1px to 249px

Upvotes: 1

Gregg B
Gregg B

Reputation: 13727

You're border is making the box too wide. Need to set the left div (with the border) to 249 so that it adds up to 250px with the border.

Upvotes: 3

Brett
Brett

Reputation: 20049

NVM... I'm a fool. Realized right after I posted this I had to decrease the first div's size by 1 because of the border size.

Upvotes: 0

Related Questions