Hi Sarah, that's great that you want to understand further.
Here is how it works:
This is the page with
both of the columns without content:
|
HTML Code:
|
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Enter Page Title</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link href="jao.css" rel="stylesheet" type="text/css" media="screen" />
<style type="text/css">
<!--
body {
background-color: #FFFFFF;
background-repeat: no-repeat;
}
.style3 {color: #666666}
</style></head>
<body>
<div id="header">
<h1> </h1>
</div>
<div id="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Rates</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Free Lunch</a></li>
</ul>
</div>
<div id="page">
<div id="content"> CONTENT STARTS HERE
</div>
<div id="sidebar"> SIDE BAR STARTS HERE
</div>
</div>
<div style="clear: both; height: 30px"> </div>
<div id="footer">
<p align="center" class="style3">Jackson Administrative Services • Designed by <a href="http://www.creativemain.com">www.creativemain.com</a></p>
</div>
</body>
</html> |
Now that I've taken all the contents out, you can see where <div id="content"> and <div id="sidebar"> are ending.
DIVs are like boxes on the page and you can style them using CSS, that is you can change their sizes etc.
DIVs usually stay on top of each other (on the page, in terms of design) rather than next to each other (like on your page) and that is why your CSS looks like this:
|
Code:
|
#content {
float: left;
width: 480px;
}
#sidebar {
float: right;
width: 280px;
} |
Here "float" changes their 'standard' behavior and <div id="content"></div> goes to the left side of the page because of "float: left;" and the sidebar goes to the right because of "float:right;".
One more important thing to note this is their sizes;
the sum of their sizes shouldn't exceed the size of their parent container. <div id="page"></div> is their parent here.
I hope this makes sense and helps you understand what I did
Tables/Columns CSS Question
Linear Mode
