If you see the code, there's a div homefront, whose height is auto. Inside it, there's a div homebottom, whose height is fixed (say 400px). Inside this div, there's another div homebottomleft, whose height it inherit.
Now, I don't know if I've written the right code or not, for what I need.
I need then as soon as the height of homebottomleft increases, the homebottom div's height should also increase with it, automatically. It's not working even though I've tried some CSS properties. Please help if you can.
<div class="homefront">
<div class="homebottom">
<div class="homebottomleft"><br>
<div class="profile_pic"><?php echo '<img src="' . $headerImage . '" height="173" width="173"/>'; ?></div>
<div class="profilename"><?php echo $profilename; ?></div><hr>
<h3 id="groups">CONTACTS</h3>
<h4 id="links">
<br><br><br><br>
</h4>
</div>
<div class="homebottomright">
<div class="homebottomright_status">
<p style="font-family:Arial, Helvetica, sans-serif; font-weight:700; margin: 0px;">UPDATE STATUS</p>
<form name="statusform" method="post" action="">
<textarea style="overflow: hidden; resize: none;" class="statusbox" placeholder="Share something new..." name="status"></textarea><br>
<input class="postbutton" type="submit" name="updatestatus" value="POST"/>
</form>
</div>
<div class="homebottomright_updates">
Something
</div>
</div>
</div>
</div>
CSS:
.homefront{
width:1020px;
height: auto;
margin: 0 auto;
margin-top: 15px;
}
.homebottom{
width: inherit;
height: auto;
border-radius: 2px;
box-shadow: 0px 0px 3px 0.5px grey;
margin-top: 10px;
}
.homebottomleft{
width: 175px;
height: auto;
float: left;
padding: 0px 20px 0px 20px;
background-color: white;
border-radius: 2px;
box-shadow: 0px 0px 3px 0.5px grey;
position: relative;
}
.homebottomright{
width: 800px;
height: auto;
float: right;
position: relative;
}