Skip Navigation.

NWE Help: Web: Authoring: HTML: CSS: Div Tags

NWE Home :: Help :: Web :: Authoring :: HTML :: CSS

DIV will eventually replace tables for page formatting. Tables were never meant to be used for overall formatting in HTML, but they were used for lack of a better system. Now, CSS margins and DIVs can do the complex formatting. DIVs are also useful because CSS styles can flow through them, unlike tables which interrupt the flow because they aren't the same type of container block elements like DIVs and Ps.

DIVs can be really confusing, so the examples linked from this page and the examples page are a good place to start learning how to format pages using DIV tags. Also, inknoise has a nifty web based DIV writer, which is here.

Header - Table data spanning 2 columns - table is 800px wide
2 cellpadding and 2 cellspacing, overall background color is gray (#cccccc)
table data background colors arer white, which with padding and spacing create a border
table data 190 wide
both are aligned top and both have a white background		table data 590 wide (padding in DIV for extra space inbetween)

To use DIV make a table that looks like this one, you'll need to use both CSS and HTML. While there are numerous ways to structure each, this is one way that works:

Do this in the CSS and this in the HTML
CSS
html, body {
	margin: 0px 10% 2%;
	padding: 0;
	background-color: #fff;
	color: #333;
	}

#side {
	width: 190px;
	float: left;
	margin-left: -1px;
	padding: 10px;
	}
	
	
#content {
	padding: 10px;
	margin-left: 200px;
	border-left: 1px dashed #666;
	}

#header {
	background-color: #fff;
	color: #999;
	border-bottom: 1px dashed #999;
	margin-bottom: 1px;
	}
	
#footer {
	background-color: #fff;
	color: #999;
	border-top: 1px dashed #999;
	text-align: right;
	padding: 2px 10px 0 0;
	clear: both;
	}


.spacer {
	clear: both;
	}
	
p {padding: 0;
   margin-top: 0px;
	}
HTML 
<div id="header">
<h1>Two Columns Using CSS and DIV Tags</h1>
</div>

<div id="side"> 
<p> This is the Navigation DIV. 
It is 190 pixels wide
and floated left. It has a 
negative 1 pixel left margin.
</p>

<div class="spacer">

 
</div>
</div>

<div id="content">
<p> 
This is the Content DIV. 
It has a left margin
of 200 pixels, giving a 10 pixel 
gutter between it and the Side DIV. 

<p> </p>

<div class="spacer">
 
</div>
</div>

<div id="footer">
<p>
This is the footer.
</p>
</div>






See this example and this three column example. And, see inknoise's
nifty web based DIV writer, which is here.