Hi,

I have a container that I want to place a 3 column layout inside.

The container is styled like this:

#container {
    text-align: left;
    margin-left: 15%;
    margin-right: 15%;
}

I want to stay away from setting the size in pixels but my container has no set width so should I set column widths in %?

Say I want the left column to be 30%, middle 60%, and right 10% but I also need a 5px margin around each column. How should I do this?

Any help would be most appreciated!

UPDATED CODE

#leftcol { 
position:relative;
float:left;
background-color:#D5D5D5;
padding:5px;
-moz-border-radius: 10px;
border-radius: 10px;
width:35%;
margin-right:1%;
}

#rightcol {
position: relative;
background-color:#D5D5D5;
padding:5px;
width:15%;
-moz-border-radius: 10px;
border-radius: 10px;
margin-left:84.5%;

}

#centercol {
float:left;
background-color:#D5D5D5;
width:46%;
-moz-border-radius: 10px;
border-radius: 10px;
position:relative;
padding:5px;

}

You can see the site in question here: http://booyahachieved.com. it's the homapage

Thanks,

Jonesy

1 answer

Ktash 1851
0
points

Mixing of percent based widths and a 5px margin isn't going to really be possible. At least not cross-browser, in my experience. You can have a 5px margin on the outside columns, but you will run into the issue of the inside will need to have a margin-left and right that are percent. The best way to do this is probably to do a 1% margin added to the side columns, which will add 1% to either side of the margins on this inside. This won't necessarily give you 5px, but it will get you what you want.

Answered over 8 years ago by Ktash
  • thanks Ktash, I'm running into a bit of trouble though, Even though all my %'s add up to 100% I'm still getting weird behavior. I have updated my question with my new CSS. I'm wondering if having a 5px padding in each col is effecting the overall positioning? Billy Jones over 8 years ago
  • Yes. In Internet Explorer 7 and below, padding and border are counted as part of the width. In all other browsers, the box model is to add the padding and border to the width. So, it would be 15% + 5px. Margin is not counted in width calculations. See http://css-tricks.com/the-css-box-model/ for more info Ktash over 8 years ago