• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 408
  • Last Modified:

Problem giving left floated smaller div same height as right floated div

Hi,

This is a simplified version of my problem:

<div style="width:500px;">
<div style="float:left; width:200px; height:100%; background:#9F0;">menu</div>
<div style="float:right; width:200px; background:#F3C; height:300px;">content</div>
</div> 

Open in new window


I want the height of the menu div to be equal to the content div's height.

The height of the content div can vary on different pages, so i can't set the parent div to an certain fixed height.

I also don't want to assign the parent div with an overflow:hidden as i want certain other div's to  be able to "break-out" of the parent div. (with out being hidden)

Is there a fix for this?
0
peps03
Asked:
peps03
  • 3
2 Solutions
 
Julian HansenCommented:
Two methods
1. Position the menu absolutely with top: 0, bottom: 0 - this will stretch the menu to fit its container. You can then make the right container margin-left: 300px to make space for the menu - no need to float it - if you want to float it you will need to add an element after the content with style="clear:both" to clear the float and force the parent to enclose the content.
<!doctype html>
<html>
<head>
<title>Test</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
</script>
</head>
<body>
<div style="width:500px; position :relative;">
	<div style="position: absolute; top: 0; bottom: 0; left: 0; width:200px; height:100%; background:#9F0;">menu</div>
	<div style="margin-left: 300px; width:200px; background:#F3C; height:300px;">content</div>
</div> 
</body>
</html>

Open in new window

2. Use javascript to change the height (assum jquery)

$(function() {
  $('#menuid').height('#parentid').height());
});

Open in new window

0
 
Kyle HamiltonData ScientistCommented:
this isnt pretty, but it works:

margin-bottom: -9999px;
padding-bottom: 9999px
0
 
Julian HansenCommented:
Further to my post above: as usual IE is not your friend so here is full code for the jquery solution
<!doctype html>
<html>
<head>
<title>Test</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
  $('#menu').height($('#parent').height());
});
</script>
</head>
<body>
<div style="width:500px;" id="parent">
  <div id="menu" style="float:left; width:200px; height:100%; background:#9F0;">menu</div>
  <div style="float:right; width:200px; background:#F3C; height:300px;">content</div>
  <div style="clear: both"></div>
</div> 
</body>
</html>

Open in new window

Setting heights on elements only works if the parent has a height defined. As you want your content to be fluid (vertically) this is not an option. If you want to support all browsers then the jscript solutoin is probably the safest. If you (like me) don't care about IE users then you can use the first post.
0
 
peps03Author Commented:
Thank you julianH!

That really helped me! Got it fixed!
0
 
Julian HansenCommented:
You are welcome
0

Featured Post

Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now