5

HTML Setup

<div id="fixed-wrapper">
<div id="header">
        <h1>Site Name</h1>
</div>
<div id="leftCol"></div>
<div id="centerCol"></div>
<div id="rightCol"></div>

CSS:

#fixed-wrapper{
    min-width: 1264px;
}
#header{
    width: 100%;
    height: 75px;   
    text-align: center;
}
#header h1 
{
    line-height: 75px;   
}
 #centerCol {
    margin-left: 310px;
    margin-right: 360px;
    height: 100%;
    min-width: 604px;
}
#rightCol {
    width: 285px;
    height: auto;
    position: absolute;
    top: 75px;
    right: 0;
    margin-right: 75px;
}
#leftCol {
    width: 235px;
    height: auto;
    position: absolute;
    top: 75px;
    left: 0;
    margin-left: 75px; 
}

The issue is that the center column needs to have a min-width, but the right column shouldn't move into the center column.

Hyper
  • 312
  • 4
  • 13

2 Answers2

4

Try set width of center column as auto rather define its minimum width,

 #centerCol {
    margin-left: 310px;
    margin-right: 360px;
    height: 100%;
    width: auto;
}
toopay
  • 1,635
  • 11
  • 18
  • Theres no need to define it(min-width), since i suspect you want fixed two side(left/right) and a fluid center div column. – toopay Jul 27 '11 at 18:02
  • I wanted a fluid center div, however I wanted to limit how small the center gets. – Hyper Jul 27 '11 at 18:22
  • Set the `min-width` on fixed wrapper if you want, but not at the center div. – toopay Jul 27 '11 at 18:31
0

Make #fixed-wrapper positioned relatively, so that the #leftCol and #rightCol are positioned absolutely with respect to it, rather than to the document body.

#fixed-wrapper{
    min-width: 1264px;
    position: relative;
}

jsFiddle example

Gus
  • 7,289
  • 2
  • 26
  • 23
  • This works, however toopay's solution works better, this method seems to conflict with one of my margins. – Hyper Jul 27 '11 at 17:58