DIV container height
Question posted by: anish007
(Newbie)
on
August 22nd, 2008 07:20 PM
I have a problem with making div container height grow with respect to the other.
I have basically 3 div containers, the div container named main contains the other 2 containers left and right respectively. My left container floats left and my right container floats right. The right containers height changes in different pages according to content, and my left container always has the same content.
Now, how would i make my left container height grow so that it matches up with the right container, in different pages?.
Can anyone help me with this, i would really appreciate it.
-
<div id="main">
-
<div id="left">
-
</div>
-
<div id="right">
-
</div>
-
</div>
my attributes of div containers are:
- #main{
-
width: 746px;
-
background: #FFFFFF;
-
margin: 0 auto;
-
border: 1px solid #000000;
-
text-align: left; }
-
-
#left {
-
width: 148px;
-
float: left;
-
height: 100%;
-
background-color: #5A6577; }
-
# right{
-
zoom: 1;
-
width: 595px;
-
float: right;
-
}
1
Answer Posted
a question, why do you need the right container? It seems that the right div contains the content, the left maybe navigation and the main container left and right div, but nothing else. Personally I'd drop the right container making the main container for the content. If you want the background color of the left container all trough to the bottom, why not using the border property of main?
- #main{
-
width: 595px;
-
background: #FFFFFF;
-
margin: 0 auto;
-
border: 1px solid #000000;
-
border-left: 148px solid #5a6577
-
text-align: left; }
-
-
#left {
-
width: 148px;
-
margin-left: -148px; }
-
/* another possibility to draw the div onto the border:
-
position: absolute;
-
left: -148px; */
|
|
|
What is Bytes?
We are a network of experts and professionals in IT and software development that help one another with answers to tough questions and share insights.
Get the best answers to your questions from over 197,050 network members.
Top HTML / CSS Contributors
|
