I always get stuck here... Divs not behaving properly (alignment issues)
- by user345501
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>
