CODEWITHSUNDEEP
css
soundswaste
soundswaste

Reputation: 3074

Fluid divs spill over with border

I have 2 divs that are float:left and show side by side like this :

enter image description here

The CSS for them is :

.movie-activity-feed{
    background:#f87777;
    float:left;
    padding:1%;
    margin:1% 2.5%;
    width:46%;
}

And they occupy the whole row properly. But when I add a border like this :

border:2px solid #000;

The divs spill over like this :

I know thats because of the extra 8px of borders that is not available in the row. But is there a way to declare my margins as 2.5% - 2px or something? In short, is there a way to have fixed width borders on my fluid divs (using %), without the design breaking?

enter image description here

EDIT:

I resolved this using Passerby's comment and this question about box-sizing : Fluid CSS layout and Borders

This allows me to happily add any padding/border to a fluid div without worrying.

Upvotes: 2

Views: 336

Answers (2)

Sujith Kumar KS
Sujith Kumar KS

Reputation: 1043

try some css calculations 

margin: 1px calc(2% - 10px);
  • it will not work in mozilla

Upvotes: 0

Nitesh
Nitesh

Reputation: 15749

Yes you can. You just need to change your margin-left and margin-right from 2.5% to 0.5%

Here is the Working Fiddle

The HTML:

<div class="movie-activity-feed"></div>
<div class="movie-activity-feed"></div>

The CSS:

.movie-activity-feed{
    background:#f87777;
    float:left;
    padding:1%;
    margin:1% 0.5%;
    width:46%;
    border:2px solid #000;
}

Hope this Helps.

Upvotes: 1

Related Questions