CSS: Layout Using Div Tags
{youku}id_XMjU5MjkwODc2.html{/youku}
<div> is a page division. It is the CSS way to create a page layout.
#my_first_div
{
width:100px;
height:100px;
background-color:red;
}
This can then be inserted into your html
><div id = "my_first_div"> This is text inside my division </div>
You can use CSS codes to arrange your divs on the page.
The CSS code I use
Below is the simplified CSS I use in class. 3 columns, header and footer fixed.
You can copy and paste this code into your CSS document and adjust it to suit your own needs
#box {
width:780px;
margin-left:auto;
margin-right:auto;
}
#head {
width:780px;
height:239px;
}
#menu {
width:160px;
height:400px;
float:left;
}
#main {
width:430px;
float:left;
}
#submenu {
width:160px;
float:right;
}
#foot {
clear:both;
width:780;
height:75px;
}
The #box div is the container that the other divs are put into. It should be invisible. margin-left:auto; and margin-right:auto; are used to center the layout on the page.
#menuand #main use float:left; to place them next to each other. #submenu uses float:right; to align it to the right.
#foot needs clear:both; A lot of students forget this. It is needed to clear the float command from your #menu #main and #submenu divs
The HTML code for the layout
This is the simplified code in HTML for the layout. You can copy and paste it into dreamweaver, but make sure the div names are the same as those in your CSS file:
<body>
<div id = "box">
<div id = "head"> This is the head </div>
<div id = "menu">This is the menu </div>
<div id = "main"> This is the main content </div>
<div id = "submenu"> This is the submenu </div>
<div id = "foot"> This is the footer </div>
</div>
</body>
Remember, all your <div> tags must go inside the <div id = "box"> tag.
To place your <div> in the absolute center of the screen
The following code will place your #box container div in the horizontal and vertical middles of your page.
#box {
width:400px;
height:200px;
position:absolute;
top:50%;
left:50%;
margin-left:-200px;
margin-top:-100px;
}
margin-left and margin right will always be negative half of your width and height