CSS Forum

**Boar** · 10:27 AM

hello, I am building my first css layout and right now I have three seperate div's, is this okay, or should I have some sort of wrapper?

I am trying to align everything left so I used the "clear: both;" attribute on the footer style is this correct?

My first two divs seem to automatically align left, but should I be telling them to stay left somehow?

Thanks for any help, Im beginning to really like this CSS!

Code:

<html>
</head>
<style type="text/css">
body {
	background-color: #777777;
	background-image: url(images/bg.jpg);
	background-repeat: repeat-x;
	margin: 0;
	padding: 0;
}

#footer {
	background: #777777 url(images/footer-bg.jpg) repeat-x;
	clear: both;
	width: 100%;
	height: 100px;	
		
}

#main { background: #ffffff; width: 100%;}
#lower { height: 488px; width: 980px; margin 0;}
#top { height: 112px; width: 980px; margin 0;}

#small {
font-family: Arial, helvetica, sans-serif;
font-size: 11px;
padding-top: 15px;
color: #999999;
text-align: left;
padding-left: 20px;
}


</style>


</head>


<body>

<div id="top">
<img src="spacer.jpg" width="980" height="112" />
</div>

<div id="main">
<div id="lower">
<img src="spacer.jpg" width="980" height="488" />
</div>
</div>


<div id="footer">
<div id="small"> Link &nbsp; link </div>
</div>

</body>
</html>

**LadynRed** · 03:47 PM

Quote:

right now I have three seperate div's, is this okay, or should I have some sort of wrapper?

It is generally a good idea to add a "wrapper" around your content, especially if you're using a fixed-width layout. Set it to position:relative.

Quote:

I am trying to align everything left so I used the "clear: both;" attribute on the footer style is this correct?

Clearing is only necessary if you've got floated elements in the document. If you don't have any floats, you don't need the clear:both;

Quote:

My first two divs seem to automatically align left, but should I be telling them to stay left somehow?

Nope, the normal document flow is top to bottom, left to right. Unless you want to move them around, you don't have to tell it anything.

You should also get in the habit of zeroing out margin and padding for all elements, like this: *{margin: 0; padding: 0;}.

It's also good practice to define your font family and size on the body in your css.

**Boar** · 05:54 PM

Thanks for the help ladyinred.

The clear: both; element was needed for a previous layout where I had code for a table and then a css footer; for some reason when I added "align: left" to the table the CSS footer moved off to the top right of the page, so I added clear: both and it fixed it! Any ideas what the issue was? Before I added align left to the table everything was fine, and it aligned left naturally anyway.

So I should add this property to all of my styles in my style sheet *{margin: 0; padding: 0;}. (other than text obviously)?

Also for the wrapper, what exactly should it have since everything aligns automatically to the left? Should I assign sizes in it?

Thanks!

**LadynRed** · 12-06-2007, 03:12 PM

Quote:

Any ideas what the issue was?

Yes, you were using TABLES for layout

Quote:

So I should add this property to all of my styles in my style sheet *{margin: 0; padding: 0;}.

You only need to add it once, the asterisk says apply to ALL elements.

Quote:

Also for the wrapper, what exactly should it have since everything aligns automatically to the left? Should I assign sizes in it?

Depends on your layout. If you want a centered, fixed-width layout, then yes, give it a width, and add margin: 0 auto; on the #wrapper rules and text-align: left. Then, to make IE center that, add text-align: center on the body rules.