Height of div.

apotd · 12-10-2011, 12:55 PM

I tried to make this simple layout:

http://i39.tinypic.com/e7ml4p.gif

Now I want the menu (nav) to be the same height as the two content divs (test). Is there any way to do this?

HTML:

Code:

<body>

<div id="container">

	<header>
		<h1>This is the header.</h1>
	</header>
	
	<nav>
		<h2>Menu</h2>
		<ul>
			<li><a href="link.html">Link 1</a></li>
			<li><a href="link.html">Link 2</a></li>
		</ul>
	</nav>
	
	<div id="test">
		<h2>This is a title.</h2>
		<p>test</p>
	</div>
	
	<div id="test">
		<h2>This is another title.</h2>
		<p>test</p>
	</div>
	
	<footer>
		<p><small>footer.</small></p>
	</footer>
	
</div>

CSS:

Code:

body{
	width: 700px;
	margin: 0;
	padding: 0;
	font-family: georgia;
	margin: 0 auto 0 auto;
}

header, nav, footer, #test{
	display: block; 
}

header{
	background: #cccccc;
	-moz-border-radius: 15px;
	border-radius: 15px;
}

nav{
	float: left;
	width: 17%;
	background: #cccccc;
	-moz-border-radius: 15px;
	border-radius: 15px;
	padding: 10px;
}

#test{
	float: right;
	width: 75%;
	background: #cccccc;
	-moz-border-radius: 15px;
	border-radius: 15px;
	padding: 10px;
	margin: 0 0 15px 0;
}

footer{
	clear: both;
	background: #cccccc;
	-moz-border-radius: 15px;
	border-radius: 15px;
}

Excavator · 12-10-2011, 02:14 PM

Hello apotd,
The normal methods won't work with your rounded corners.
Here is a jQuery solution - http://nopeople.com/CSS%20tips/jQuer...mns/index.html

apotd · 12-10-2011, 02:31 PM

And if I'd remove the rounded corners, how would I do it in that case?

Excavator · 12-10-2011, 04:09 PM

Quote:

Originally Posted by apotd

And if I'd remove the rounded corners, how would I do it in that case?

You can do it with a background color or an image repeated on the y axis.
Look at my faux columns demo. You can google faux columns for a million more examples.

Here's another equal height columns method that works very well too.

apotd · 12-12-2011, 07:01 PM

Thank you, this works fine. I forgot how I should mark this question as resolved though, since I can't seem to edit my first post.