Hey Webmasters,
Recently I stumbled upon how to create a four column layout using basic css, but I'm really curious why the order of the div elements placed in the HTML have to be ordered a specific way.
Does the positioning matter because of the way its parsed? As you can see in the HTML code, I ordered the div's in a weird way. I originally had them ordered in a way that would seem logical, but for some reason some of the elements were misplaced.
HTML Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Page title here</title>
<meta name="DC.title" content="Title here" />
<meta name="DC.subject" content="Keywords here" />
<meta name="DC.description" content="Description here" />
<meta name="DC.format" content="text/html" />
<meta name="DC.publisher" content="Publisher here" />
<meta name="DC.language" content="en" />
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<style type='text/css'>
#Container {
width:898px;
}
#left-Float {
float:left;
width:450px;
height:265px;
text-align:left;
border:1px solid;
}
#l-left {
float:left;
width:210px;
padding-left:5px;
padding-right:5px;
text-align:left;
border:1px solid;
}
#l-right {
float:right;
width:210px;
padding-left:5px;
padding-right:5px;
text-align:left;
border:1px solid;
}
#right-Float {
float:right;
width:450px;
height:265px;
text-align:left;
border:1px solid;
}
#r-left {
float:left;
width:215px;
padding-left:5px;
padding-right:5px;
text-align:left;
border:1px solid;
}
#r-right {
float:right;
width:215px;
padding-left:5px;
padding-right:5px;
text-align:left;
border:1px solid;
}
</style>
</head>
<body>
<div id="Container">
<div id="left-float">
<div id="l-left">
Left Left
</div>
<div id="r-right">
Right Right
</div>
</div>
<div id="right-float">
<div id="r-left">
Right Left
</div>
<div id="l-right">
Left Right
</div>
</div>
</div>
</body>
</html>
validator.w3.org says:This document was successfully checked as XHTML 1.1!
|
