CODEWITHSUNDEEP
htmlcss
volume one
volume one

Reputation: 7543

CSS percentage and pixel layout combined

I'm really struggling with this, if anyone could help my eternal thanks goes out to you.

I have a CSS DIV with a width of 1260px called wrapper:

#wrapper {
width: 1260px;
}

Inside this wrapper DIV I have three DIVs called column-left, column-mid, and column-right:

#column-left {
width: 245px;
float: left;
}

#column-mid {
width: 55.55555555555556%; /* (700px/1260px) */
float:left
margin-left: 35px;
margin-right: 35px;
}

#column-right {
width: 245px;
float:left;
}

Very simply, it is a three column layout within a wrapper div. The middle div "column-mid" has a percentage width set. It should be 700px wide which is 55.55555555555556% of 1260px (the width of the wrapper div).

It all looks fine at this resolution. However if I change the width of the wrapper div to say 1400px, then the column-mid div is not expanding to fill the space properly. It's equivalent width is only increasing to 775px when really it should be filling 794px because 794px is 55.55555555555556% of 1430px

Why is the column-mid div only going up to 775px? What I am trying to achieve is that the left and right columns stay a fixed size (245px) but the middle column should increase in relation to the size of the wrapper div.

Upvotes: 3

Views: 2765

Answers (2)

codingrose
codingrose

Reputation: 15699

It is happening because you are not changing width of #column-left and #column-right according to whole width and just changing width of #column-mid.

For the case where width of #column-left and #column-right to remain 245px and width of #column-mid to be responsive,

try this:

#column-mid {
    width: calc(100% - 560px); //245px for #column-left, 245px for #column-right and 70px for margin
}

Another solution:

Try:

#wrapper {
    display:table;
}
#column-left,#column-mid,#column-right{
    display:table-cell;
}
#column-left,#column-right{
    width: 245px;background:#f7f7f7;
}
#column-mid {
    background:#ccc;
    padding:0 35px;//for spacing
}

Here is the fiddle.

Upvotes: 2

kasimir
kasimir

Reputation: 1554

Why not try this approach: http://jsfiddle.net/Er8uX/2/

#wrapper {
    width: 1260px;
    border: 1px solid #ddd;
    overflow: hidden;
    position: relative;
}
#column-left {
    width: 245px;
    position: absolute;
    left: 0;
    border: 1px solid #f0f;
}

#column-mid {
    margin: 0 280px;
    border: 1px solid #00f;
}

#column-right {
    width: 245px;
    border: 1px solid #f0f;
    position: absolute;
    height: 100%;
    right: 0;
}

I think this is what you want, basically: fixed left and right column, main content according to wrapper width. I've used absolute positioning to keep them in place; on the right one I've used 100% height if you have a column with a background and want it to run all the way down, the left one has height according to content.

Upvotes: 3

Related Questions