Hey guys I'm trying to code this 2 column div layout and I can't think of a way to do what I want... here is the code:
#prospectDetailMainWrapper div{
border:1px solid purple;
}
#leftPanel{
height:600px;
padding-right:266px;
}
#rightPanel{
height:600px;
position:absolute;
right:0;
top:103px;
width:265px;
}
#prospectDetailMainWrapper .clear{
height: 0;
font-size: 1px;
margin: 0;
padding: 0;
line-height: 0;
clear: both;
}
<link rel="stylesheet" type="text/css" href="../css/default/prospect_detail_mock.css"/>
<div id="prospectDetailMainWrapper">
<div class="primaryButtons"></div>
<div id="leftPanel">
<div id="prospectInfoMain"></div>
<div id="prospectTabbedSection"></div>
</div>
<div id="rightPanel">
<div id="prospectContactInfo"></div>
<div id="prospectCampainSource"></div>
<div id="prospectScreening"></div>
</div>
<div class="clear"></div>
</div>
So what I'm trying to to is to have the rightPanel with a fixed width and the leftPanel to stretch, and that is working right now... but the tricky part is that I want the rightPanel to not show when the browser window gets smaller... so if I'm dragging the browser window to make it smaller, once the leftPanel reaches a certain min-width I wan't the rightPanel to start hiding... The reason is that if my users have a small monitor I wanna make sure they can the the entire leftPanel...
Thx in advance for the help!