I have been trying for over a week now and asked around but know one seems to know how I fix this one.
I a left, middle and right DIV, but the right one does not show at 100% like the left one does.
What do I change so it is the same height?
Without using Javascript.
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body style="background-color: #ddd; height: 100%;">
<div id="outer" style="background-color: lightblue; margin: 0 auto; width: 600px; height: 100%; border-top-left-radius: 1.125em; border-top-right-radius: 1.125em;">
<div id="head" style="background-color: #56D1AC; margin: 0 auto; width: 600px; text-align: center; border-top-left-radius: 1.125em; border-top-right-radius: 1.125em;">
head
</div>
<div id="left" style="background-color: #56D1AC; float: left; margin: 0 auto; width: 100px; height: 100%; text-align: center;">
left<br><br>more text<br><br>more text<br><br>more text<br><br>more text<br><br>more text
</div>
<div id="mid" style="background-color: lightblue; float: left; margin: 0 auto; width: 400px; height: 100%; text-align: center; border-top-left-radius: 1.125em; border-top-right-radius: 1.125em;">
mid<br><br>more text
</div>
<div id="right" style="background-color: #56D1AC; float: left; margin: 0 auto; width: 100px; height: 100%; text-align: center;">
right<br><br>more text
</div>
<br clear="all">
<div style="background-color: #ddd; text-align: center;">footer</div>
</div>
</body>
</html>