CODEWITHSUNDEEP
csshtmllayoutcss-float
arpymastro
arpymastro

Reputation: 811

CSS to display three column content

I am trying to get three column output using <div> for each.

Right now my div on the left is lined properly even the middle one, but when I try to put right it is just clipping down.

CSS

/* left div */
 #left-sidebar, #right-sidebar {
    width:15%;
    height:700px;
    float: left;
    padding-left: 15px;
    padding-top: 20px;
}

/* middle div */
 #mid-content {
    width:75%;
    padding-left: 30px;
    padding-top: 20px;
}

/* right div */
 #right-sidebar {
    float:right;
}

Upvotes: 0

Views: 100

Answers (3)

andershagbard
andershagbard

Reputation: 1137

First of all, your elemnents add up to 105% in all. Second, you have added padding to a floating element which have a width specified in %, not a good idea. Look at http://www.w3schools.com/css/css_boxmodel.asp

Here is a solution http://jsfiddle.net/Ru6CL/

#left-sidebar,
#right-sidebar,
#mid-content {
    float:left;
}

#left-sidebar,
#right-sidebar {
    width: 15%;
    background-color: red;
}
#mid-content {
    width: 70%;
    background-color: blue;
}

remember to use clear: both;

Upvotes: 1

silicakes
silicakes

Reputation: 6902

That happens because according to CSSs box model, the size of the element is the sum of its width, border and padding thus - your content+padding exceeds the 100%.

in order to solve this, just add

box-sizing: border-box;

to your columns and it will recalculate the necessary width along with the above taken into consideration.

In addition, you might consider floating the elements to the same direction, i.e to the left since the box-sizing thing might get thrown off otherwise.

I made a working example here: http://jsfiddle.net/v6peK/

Upvotes: 0

ksu
ksu

Reputation: 608

What happens if you change the values to add up to 100%?. Right now, 75%, 15% and 15% adds up to 105%.

Upvotes: 0

Related Questions