Hi,
I don't know why, after encountering this problem dozens of times, the answer always seems different and I can't seem to work my way through the problem-solving process, but here I am again with misaligned divs.
I've got 3rows encasing columns. each
row is to have (at least) 3 columns (and probably some nested divs down the line, but I'm not even there yet). I'm trying to make a fluid chunk in the center ultimately, with pretty corners. However, my top
row is already showing signs of misbehaving. .O
Please help with my silly questions!
Cheers and thanks in advance!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<style type="text/css">
#wrap {
margin:auto;
width:80%;
height:75%;
border: solid #066 1px;}
#row1 {
width:100%;
height:10%;
background:#F20;
}
#r1c1 {
float:left;
width:05%;}
#r1c2 {
float:left;
width:80%}
#r1c3 {
clear:both;
width:05%;
}
#row2 {
float:none;
width:100%;
background:#0C6;
}
#r2c1 {}
#r2c2 {}
#r2c3 {}
#row3 {
width:100%;
height:15%;
background:#00F;
clear:both;
}
#r3c1 {}
#r3c2 {}
#r3c3 {}
</style>
<body>
<div id="wrap">
<div id="row1">
<div id="r1c1">LEFT</div>
<div id="r1c2">CENT</div>
<div id="r1c3">RIGHT</div>
</div>
<div id="row2">
MIDDLE
</div>
<div id="row3">
BOTTOM
</div>
</div>
</body>
</html>
