CODEWITHSUNDEEP
htmlcsslayout
hdx
hdx

Reputation: 4538

div column layout, stretchable column with min-width

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.

Upvotes: 1

Views: 662

Answers (1)

Amanda
Amanda

Reputation: 53

I moved the right panel inside the left panel and floated it right. Then set a min-width on the left panel. So that when it gets to 800px the right panel disappears... See the example here: http://ahhh-design.com/stack.html

<html>
<head>
<style type="text/css">     
#prospectDetailMainWrapper div {
border:1px solid purple; 
overflow:hidden;
}

#leftPanel {
height:600px;
background: yellow;
min-width: 800px;
overflow:hidden;
}

#rightPanel {
height:600px;
float:right;
margin-top:103px;
width:265px;
background: #fff;
}

#prospectDetailMainWrapper .clear {
height: 0;
font-size: 1px;
margin: 0;
padding: 0;
line-height: 0;
clear: both;
}          
</style>
</head>

<body>
<div id="prospectDetailMainWrapper">
    <div class="primaryButtons"></div>
    <div id="leftPanel">
        <div id="prospectInfoMain"></div>
        <div id="prospectTabbedSection"></div>


                        <div id="rightPanel">
                                <div id="prospectContactInfo"></div>
                                <div id="prospectCampainSource"></div>
                                <div id="prospectScreening"></div>
                        </div>        <!-- end right panel -->

    </div><!-- END LEFT PANEL-->
</div>
</body>

Upvotes: 1

Related Questions