3 columns layout, broken when resize the browser - CSS-Tricks

This topic is empty.

Viewing 5 posts - 1 through 5 (of 5 total)

Author

Posts
March 26, 2013 at 6:14 am #43666

akarsh
Participant

Example:
wrapper: width:980px;border:1px solid red;margin: 0 auto;overflow:hidden
inside wrapper i have 3 divs called sec.
sec: width:324px;border:1px solid green;float:left

When am resizing the browser, the 3rd columns coming down. Could anyone tel me , whts the issue is?

I wanna fix this in px, dont want in liquid layout.

March 26, 2013 at 6:22 am #129731

proudfist
Participant

Your code works for me…

#wrapper
{
width:980px;
border:1px solid red;
margin: 0 auto;
overflow:hidden;
}
#sec
{
width:324px;
height:100px;
border:1px solid green;
float:left;
}

March 26, 2013 at 6:41 am #129434

Paulie_D
Member

The borders you have applied will actually make the all the boxes larger than you have set them.

Basically, unless you apply a box-sizing property the ‘sec’ boxes will be 326px wide being made up of 324+1+1 (width + left border+ right border).

Therefore, if you set the width of the wrapper to 978 (and so actually 978 + 1 +1 ), everything will fit neatly because 326 *3 = 978 and you get this: http://codepen.io/Paulie-D/pen/cHadI

March 26, 2013 at 7:10 am #129733

akarsh
Participant

Ya thanks, could u just try this, wrapper = 1000 put border. inside tht give 3 equivalent div’s with border and space. And then you resize the browser, problem will occur. Just skip my code and try this new one.

March 26, 2013 at 7:26 am #129736

Paulie_D
Member

Why don’t you try it….just fork the Codepen I gave you and play away.

You’ll just have to work on your math.
Author

Posts

Viewing 5 posts - 1 through 5 (of 5 total)

The forum ‘CSS’ is closed to new topics and replies.