CODEWITHSUNDEEP
css
tawheed
tawheed

Reputation: 5821

CSS width not adding up as expected

I have a page with a row of 100px and 4 columns of 25px each. I seem to get at odd behavior. Please take a look at this fiddle http://jsfiddle.net/GmU2k/

My question is should all of the columns be on the same line?

Upvotes: 0

Views: 45

Answers (3)

Narendra
Narendra

Reputation: 3117

Check this fiddel

http://jsfiddle.net/GmU2k/2/

.column-3 {
    width: 24%;
    border: 1px solid red;
    float: left;
}

You gave the width as 25% and a border of 1px. So 4 divs width = 100% + border width Thats why 4 divs are not shown in one line. Because there is not enough space.

Once you decrease the width of inner divs then there will be enough space. Or you can remove the border, so that inner divs will have enough space to be shown in a single line.

Note: The simple concept is there should be enough space for the divs to be shown in single line. If there is not enough space then they will flow to the next line.

Upvotes: 0

JunM
JunM

Reputation: 7150

Fiddle

Better use box-sizing: border-box by adding below css on column-3: That happens because of your 1px border.

box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */

Upvotes: 2

Navyseal
Navyseal

Reputation: 901

Change the column-3 width to 24%.

Upvotes: 0

Related Questions