The pure <div/> approach: Positions
Creating web page layout using CSS positioning really is a very simple thing to do. All we need to remember is that an XHTML element's absolute position is always relative to its container. That is the one thing we usually forget. We are so caught up in the semantic definition of the word absolute position we forget that it isn't absolute only in the context of the web page itself (<body/>).
For a similar simple markup we wrote in Listing 2 of our previous notes, we now have the following Listing 1.
<![CDATA[Listing 1:
<body id="doc">
<div id="d11" class="d1">
<div id="d11-sub1">
<div id="d11-21" class="d11-2">
</div>
<div id="d11-22" class="d11-2">
</div>
</div>
<div id="d11-sub2">
<div id="d11-23" class="d11-2">
</div>
<div id="d11-24" class="d11-2">
</div>
</div>
</div>
<div id="d12" class="d1">
<div id="d12-21" class="d12-2">
</div>
<div id="d12-22" class="d12-2">
</div>
<div id="d12-23" class="d12-2">
</div>
<div id="d12-24" class="d12-2">
</div>
<br style="clear: both" />
</div>
<br style="clear: both" />
</body>]]>
The styling commands we needed in Listing 2 felt simpler to do and easier to understand from the perspective of having to think about how the browser layout engine will interpret the commands we write.
<![CDATA[Listing 2:
/* Section: Content specific
**********************************************************************/
body, #doc {
border: 5px double rgb(255,0,0);
width: auto;
/* Use // to give a specific instruction to IE browser only
**********************************************************************/
//padding-bottom: 100px;
}
#d11, #d12 {
height: 100%;
width: 920px;
border: 5px solid rgb(0,255,0);
margin: 100px;
/* Set margin-{left, right} to "auto" to center the div box because
* setting text-align to "center" at the container level only works
* with IE but not with other browsers, in addition to having the
* unintended effect of having the container's text actually centered
* that is if we simply just want the layouts centered, not its text.
**********************************************************************/
margin-left: auto;
margin-right: auto;
}
div.d11-2 {
border: 5px solid rgb(0,0,255);
margin: 50px;
}
#d11-sub1, #d11-sub2 {
width: 900px;
height: 100%;
border: 1px solid red;
margin: 10px;
position: relative;
}
#d11-21, #d11-22, #d11-23, #d11-24 {
width: 100px;
padding: 25px;
}
#d11-22 {
position: absolute;
top: 0px;
right: 0px;
}
#d11-24 {
position: absolute;
top: 0px;
right: 0px;
}
#d12 {
border: 5px solid rgb(0,150,50);
}
div.d12-2 {
border: 5px solid rgb(0,0,255);
margin: 50px;
}
#d12-21, #d12-22, #d12-23, #d12-24 {
padding: 10px;
width: 100px;
float: left;
}
/* End Section
**********************************************************************/]]>
I'd say it looks pretty straightforward without having spent lots of hours tweaking the style attributes to get the desired results.
I was pretty happy this turned out to be easy. But then just for kicks I wanted to find out "What if I did the other way around, strictly with floats and kept all the elements' positions at its default relative value?" "Would it be just as simple?" "Would it be just as quick to do?"
The pure <div/> approach: Floats
With the same base structural template as Listing 1 above, I found that achievement the desired result using float method is considerably longer. Sure if you look at the last CSS code-block of Listing 2, you'll see that I actually cheated by using floats because well... that was actually the simplest way to order the <div/>'s in simple column formation. But then, to figure out which of the <div/>'s in square formation need to be floated the right way took quite a bit of trial and error in the order of magnitude of 5. Yes. Five. Listing 2 took me only a couple of minutes to write and get right. Listing 3 took me almost 15 minutes to do due to tinkering with the float and clear attribute combinations.
<![CDATA[Listing 3:
/* Section: Content specific
**********************************************************************/
body, #doc {
border: 5px double rgb(255,0,0);
//padding-bottom: 0;
}
#d11, #d12 {
width: 920px;
border: 5px solid rgb(0,255,0);
margin: 100px;
/* Set margin-{left, right} to "auto" to center the div box because
* setting text-align to "center" at the container level only works
* with IE but not with other browsers, in addition to having the
* unintended effect of having the container's text actually centered
* that is if we simply just want the layouts centered, not its text.
**********************************************************************/
margin-left: auto;
margin-right: auto;
}
div.d11-2, div.d12-2 {
border: 5px solid rgb(0,0,255);
margin: 50px;
}
#d11-21, #d11-22, #d11-23, #d11-24 {
width: 100px;
padding: 25px;
}
#d11-sub1, #d11-sub2 {
border: 1px solid red;
margin: 10px;
//padding-bottom: 50px;
}
#d11-21, #d11-23 {
float: left;
clear: left;
}
#d11-22, #d11-24 {
float: right;
clear: right;
}
#d11-23 {clear: left;}
#d12 {
border: 5px solid rgb(0,150,50);
}
#d12-21, #d12-22, #d12-23, #d12-24 {
padding: 10px;
width: 100px;
float: left;
}
#d12-21 {clear: left;}
#d12-24 {clear: right;}
/* End Section
**********************************************************************/]]>
No comments:
Post a Comment