ok... here's what my design should look like...


http://www.outlawz.frihost.net/fula/test2.php

see, the boxes on the right... all have the spacers between them and it works well... but when i take away content on the left... the spacers between most of the boxes disappear... anyone know why, any help? feel free 2 look at my coding etc... thanks!

Well, it's probably because all of those right-floated 'spacers' are inside your content division, so when you're deleting the content, you're also deleting the divs of ID 'spacer'. Using empty elements simply to position other elements is an incredibly inefficient (and, as you can see, difficult) way to lay things out. You should just get rid of all those spacer divs and use margins around your right-floated boxes instead.

Also, IDs should be unique within a document, so all of the 'extra' box IDs should replaced with a class instead.

Well, it's probably because all of those right-floated 'spacers' are inside your content division, so when you're deleting the content, you're also deleting the divs of ID 'spacer'. Using empty elements simply to position other elements is an incredibly inefficient (and, as you can see, difficult) way to lay things out. You should just get rid of all those spacer divs and use margins around your right-floated boxes instead.

Also, IDs should be unique within a document, so all of the 'extra' box IDs should replaced with a class instead.

ok, that makes sense 2 me... i can see what you mean... however im just starting out so im not experienced with "margins" and "classes" in divs... if someone could help me out and show me an example or explain to me how it should look on my coding it'd b much appreciated... thanks

Try reading the "Selectutorial (http://css.maxdesign.com.au/selectutorial/)". Specifically, you should read the "Class selectors" and "Should you use ID or class?" sections. Specifying a margin for a block is simply a matter of invoking the margin property (http://www.w3schools.com/css/css_reference.asp#margin).

thanks ill check them links....

also, the right hand blocks, they are all div's... can i still add a margin to these? thanks 4 the help, unlike other sites i got a decent reply here

ok.. here is my css now... "extra and extra2" are the right hand boxes, i added a 10px margin...

<style type="text/css">
html,body{margin:0;padding:0}
body{font: 67% verdana,arial,sans-serif;text-align:center;}
body{background: #2D3855}
p{margin:0 10px 10px}
a{display:block;color: #FFF;padding:10px}
div#header{position:relative; background:#000000}
div#header a{position:absolute;right:0;top:23px}
div#container{text-align:center}
div#content p{line-height:1.4;}
div#news{background:#104E8B;border: 2px solid #000000}
div#spacer{background:#2D3855}
div#extra{background:#104E8B;border: 1px solid #000000;margin: 10px}
div#extra2{background:#104E8B;border: 2px solid #000000;margin: 10px}
div#footer{background: #2D3855;color: #FFFFFF}
div#footer p{margin:0;padding:5px 10px}
div#footer a{display:inline;padding:0;color: #FFFFFF}
div#container{width:707px;margin:0 auto}
div#content{float:left;width:500px}
div#news{float:right;width:200px}
div#spacer{float:right;width:200px}
div#extra{float:right;clear:right;width:200px}
div#extra2{float:right;clear:right;width:200px}
div#footer{clear:both;width:100%}

hr {
border: 1px solid #000000;
color: #104E8B;
background-color: #104E8B;
height: 4px;
width: 100%;
text-align: left;
}

body {background-image: url(http://www.outlawz.frihost.net/fula/image/bground.jpg); background-attachment: fixed; background-position: top center; background-repeat: repeat-y; }

</style>

now... look at the link in the first post... all the right hand boxes seem to be under the content :( ... any idea why?

heres the code for the right hand boxes -

<div id="spacer">
<br>
</div>

</div><div id="extra">
<br><font face="verdana" color="#FFFFFF" size="1"><b><P ALIGN="LEFT">LATEST NEWS</b></font><br><br>

<font face="verdana" color="#000000" size="1">
- Kadafi on O.F.T.B CD<br><br>
- King T - New Album<br><br>
- New deathrow compliation<br><br>
- Tupac Center closed<br><br>
</font>

</div>


<div id="extra">
<br><font face="verdana" color="#FFFFFF" size="1"><b><P ALIGN="LEFT">LATEST INTERVIEWS</b></font><br><br>

<font face="verdana" color="#000000" size="1">
- Taje Of Thuglife<br><br>
- Angela Ardis<br><br>
- Assassin<br><br>
- Jon B<br><br>
- Storm<br><br>
- Rated R<br><br>
</font>
</div>


<div id="extra">
<br><font face="verdana" color="#FFFFFF" size="1"><b><P ALIGN="LEFT">LATEST MEDIA</b></font><br><br>

<font face="verdana" color="#000000" size="1">
- R.I.P Killa Kadafi (MP3)<br><br>
- Son Rize - Promo Vid (MP4)<br><br>
- Kadafi Desktop #1<br><br>
- Kadafi Desktop #2<br><br>
</font>
</div>


<div id="extra">
<br><font face="verdana" color="#FFFFFF" size="1"><b><P ALIGN="LEFT">LATEST POLL</b></font><br><br>

<font face="verdana" color="#000000" size="1">

<table width=150 height=100 id=maintbl align=center cellpadding=0 cellspacing=0 ><tr><td valign=top bgcolor=#104E8B><font id=titlefnt color=#FFFFFF>
<b>
<center>Fatal n Felony
</center></b>
</font>
<br>
<form name=id method=post action=http://www.kpoll.com/results.php?pollid=16118626><font color=#000000><input type=radio name=id value=1> <font id=opt1 color=black>Fatal</font><br><input type=radio name=id value=2> <font id=opt2 color=black>Kadafi</font><br>
<br>
<center>
<input type=submit value=Vote>
</u>
</a>
</center>

</form>
</td>
</tr>
</table>

</font>
</div>


<div id="extra">
<br><font face="verdana" color="#FFFFFF" size="1"><b><P ALIGN="LEFT">SUPPORT THE REAL</b></font><br><br>

<center>
<img src="http://www.assatashakur.org/images/resistbanner011-a.jpg">
</center>
<br><br>

</div>

thanks!

Yes, you can add margins to practically anything. It sounds like you may need a more complete CSS tutorial to pick up on a few basics — try these (http://www.westciv.com/style_master/house/tutorials/index.html).

And here's a general run-down of CSS positioning schemes and the box model (http://www.brainjar.com/css/positioning/).

Your floated boxes are being pushed down because there isn't enough room to fit them next to div#content within div#container. Div#container is 707 pixels wide; div#content is 500 pixels wide; each of the floated boxes (still have to work on those classes ;)) is 200 pixels wide plus a 10-pixel margin and 1-pixel border on either side, making for a total width of 222 pixels.

500 + 222 > 707

Try just using a top margin. Also, the Floatutorial (http://css.maxdesign.com.au/floatutorial/) makes for useful reading.

You should also remove the <style> tags from your CSS file as they're HTML, not CSS. Style tags are only required to delimit a style sheet within an HTML document.

thanks.. all works now, ill work on the styles also... thanks!