Auto stretch with height 100%

Hi, would appreciate any help here and pardon me if I didn’t explained it well.

I have the following design that I need to have a left sidebar auto expand onclick. When the left sidebar is expanded, I need the body content to shift itself to the right and shift back when the sidebar is closed. Currently I have this code and the content is being “covered” by the sidebar during expand.

How can I do it like a “fluid design”?

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js'></script>
<script>
function show( ) { $("#left").show(); return false;}
function hide( ) { $("#left").hide(); return false;}
</script>
<style type="text/css" media="screen">
body {
    margin:0;
    padding:0;
    height:100%;
}
#left {
    position:absolute;
    left:0;
    top:0;
    padding:0;
    width:200px;
    height:100%;
    color:#333;
    background:#eaeaea;
    border:1px solid #333;
}
.content {
    width:90%
    color:#333;
    background:#ffc;
    border:1px solid #333;
    padding:0 10px;
    text-align: right;
}
</style>
</head>

<body>
<div id="left">
<p class="top">LEft column
</div>

<div class="content">
<p><a href="#" onclick="show();">show</a> / <a href="#" onclick="hide();">hide</a></p>
</div>

</div>
</body>
</html> 

Drop the position: absolute, add float: left and give html 100% height also:


html,body {
		margin:0;
		padding:0;
		height:100%;
}
#left {
		padding:0;
		width:200px;
		height:100%;
		color:#333;
		background:#eaeaea;
		border:1px solid #333;
		float: left;
}
.content {
		width:90%
		color:#333;
		background:#ffc;
		border:1px solid #333;
		padding:0 10px;
		text-align: right;
}

Thanks for your reply Scallio. Unfortunately the absolute position is there to stretch the div height to 100%. Is there a way to accommodate this as well?

Yes, that’s why I set html to 100% height as well in my previous post. Try it :slight_smile:

Following up what already has been suggested. :slight_smile:

The content, you want it not overlapped and to expand when #left is hidden.

Try make the content div widthless and cleared from the floated #left:


<style type="text/css" media="screen">
html,
body {
    margin:0;
    padding:0;
    height:100%;
}
#left {
    float:left;
    width:200px;
    height:100%;
    color:#333;
    background:#eaeaea;
    border:1px solid #333;
}
.content {
    margin-right:10%;
/*    margin:0 5%; /* instead, if you want it centred when #left is gone */
    overflow:hidden; /* stay clear from the float (IE6 needs hasLayout to do the same */
    color:#333;
    background:#ffc;
    border:1px solid #333;
    padding:0 10px;
    text-align: right;
}
</style>

wow thanks alot Scallio! It works! Erik thanks alot too! That’s what I hope to achieve as well.

Thank you both, appreciate you guys help!