theBruney ScrapBook

This tutorial is related to CSS layout techniques. If you seek something like this, then this tutorial might be useful to you.

<div class="box_container">
<div class="box_header">Simple Div-ing</div>
<div class="box_content">
<div class="panel1s">
<div class="panel1_sub">
Your body text here.
</div><!--End panel1_sub -->
</div><!--End panel1 -->
<div class="panel2s">
<div class="panel2_sub">
Your body text here.
</div><!--End panel2_sub -->
</div><!--End pane2s -->
<div class="panel3s">
<div class="panel3_sub">
Your body text here.
</div><!--End panel3_sub -->
</div><!--End panel3s -->
</div><!--End box_content -->
<div class="box_footer"> © You!</div>
</div> <!--End of box_container-->

Here’s the CSS styling

*{/*This is optional, I like to remove all browser default settings and then add my own later.*/
margin:0; padding:0;
}
.box_container{  /*Once you give this a defined width, you can also add  margin: auto auto; to centre the container*/
width: 400px;
color: #fff;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
}
.box_header{
background:#003333;
text-align: center;
}
.panel1s, .panel2s, .panel3s{
float: left;
width: 133px;
margin:auto auto;
}
.panel1s{
background: #336600;
}
.panel2s{
background:#FF6600;
}
.panel3s{
background: #663399;
width: 134px; /*Over writes previous 133px width so that the panel meets the edge of the box_container*/
}
.panel1_sub, .panel2_sub, .panel3_sub{
padding: .3em .3em;
width: 100px;
margin:auto auto;
}
.box_footer{
/* clear: both; drops the div below the floating ones. You could have just used clear: left; but this only clears divs floating to the left, which is what we need, but if you added a div to float right, then you wouldn't have to worry about editing the code. clear:both; clears the DIV in question from all previously floating divs.*/
clear:both;
background:#000033;
text-indent: 10px;
}

You would have noticed that I added .panel#s_sub divs to the .panel#s and none for the .box_header and .box_footer, you are allowed to add more sub/nested divs. I only did for demonstration purposes, sub/nested divs allows you to format inside text and the like without messing with the
main structure. In the example, I gave the .panel#_sub paddings, which would keep the text and any other elements away from the edges.

If you wanted to keep spacing between your panels, then you could have just given your .panel2s, and .panel3s margin-left (or margin-right) settings. Whenever you add margins, you must also consider your widths of your floating divs, any panel that breaks beyond the container will drop. Let’s say you added a margin-left: 40px; to .panel2s, then this would push .panel3s to the edge, once .panel3s passes the boundering width of the .box_container, it will no longer float next to it’s previous brother, en otras palabras, .panel3s will drop! So therefore, the wrapping container, in this tutorial .box_container, should have a width large enough to contain its child DIVs/panels.

The limits are endless with what you can do. Hopefully this tutorial gives you ideas on how to take things further. Of course, your own site would have larger widths, the demonstrated one is just small to fit neatly in this page.

For additional info, it is important that you give your main container (in this tutorial it’s .box_container) a fixed width, because if a user toggles with the window size, making the window size smaller than the size of your panel containers, then you will notice that the panels will drop, and you’ll lose your float:left; effect. So do remember, that floating divs need fixed width properties, and by fixed I mean don’t use width: auto or width: xxx%, use px units or so.

Download file.

Cheers.

Let’s get started!

After you’re done creating and saving your 3 slices..

1. Header
2. Content
3. Footer

<div class="box_container">
<div class="box_header"></div>
<div class="box_content">
<div class="bodytxt">
Your body text here.
</div>
</div>
<div class="box_footer"></div>
</div> <!--End of box_container-->

Here’s the CSS styling

.box_container{  /*Once you give this a defined width, you can also add margin: auto auto; to centre the container*/
width: 608px;
}
.box_header{
background: url(sd_01.gif) no-repeat;
width: 608px;
height: 56px;
}
.box_content{
background: url(sd_02.gif) repeat-y;
width: 608px;
}
.bodytxt{
font-family: century gothic;
font-size: 10px;
color: #339933;
margin: 0 1em 0 2em; /*Set margin values for top=0,
right=1em, bottom="0" left="2"*/
}
.bodytxt p{ /*Remove browser paddings and margins
-THIS IS VERY IMPORTANT*/
margin:0;
padding:0;
}
.bodytxt p{
padding: .5em;  /*Add your desired paragraph paddings. */
}
.box_footer{
background: url(sd_04.gif) no-repeat;
width: 608px;
height: 28px;
}

Please note that you must remove the paragraph margins or else in browsers like Firefox, there will be a space/gap between the header and the content images and the content and the footer images. Once you remove the margins, you can then give padding values to the p tag.
The final result in action here!

Download project files here…