• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 413
  • 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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

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