Trouble when placing a 3rd item in a DIV Options

[danielkraus]

Hi everyone,
I am new here, and am new to CSS and Xhtml. I am working on a DIV layout and cannot igure out why my "blogs" div strecthes when I place more than 3 items in it. I have tried seperate <p> <ul><li> everything in one <p>, but nothing seems to work. The address of the myspace page is http://www.myspace.com/practicelayout300.

CSS

CODE

<style>
body {
background-color:000000;
width:100%;}
.contactTable {
visibility:hidden;
display:none;}


.text {
color:FFFFFF;}

.orangetext15{
visibility:hidden;
display:none;}

.lightbluetext8{
visibility:hidden;
display:none;}

.blacktext12 {visibility:hidden;
display:none;}

.btext {visibility:hidden;
display:none;}

a, a:link, a:visited, a:hover, a:active {
font-family:"ChocolateBox" Arial;
font-size:14px;
color:6999c9;
text-decoration:none;}
a:hover {
text-decoration:underline;
color:FFFFFF;}
h1 {
font-family:"Charlemagne Std" Arial;
font-size:38px;
text-align:right;
margin-right:30px;
z-index:2;
color:FFFFFF;}

h2 {
font-family:"ChocolateBox" Arial;
font-size:24px;
text-align:right;
margin-top:5px;
margin-right:20px;
color:FFFFFF;}

h3 {
font-family:"ChocolateBox" Arial;
font-size:24px;
text-align:left;
margin-top:5px;
margin-right:20px;
color:6999c9;}

h4 {
font-family:"ChocolateBox" Arial;
font-size:20px;
text-align:left;
margin-top:5px;
margin-right:20px;
color:FFFFFF;}







.page {
position:absolute;
width:100%;
left:0;
top:170px;
z-index:1;
margin-left:0px;
padding:2px;
border:0;
background-color:000000;}

.header {
margin-top:14px;
background-color:000000;
height:190px;
padding:0 30px;
text-transform:capitalize;
color:FFFFFF;}

.header img {
float:left;
margin-left:-36px;}


.content {
height:1790px;
margin:5px 5px;
padding:10px 10px;
background-color:FFFFFF;}

.top {
height:360px;
margin-left:5px;
background-image: url("http://i35.tinypic.com/t8rv60.jpg");}
.content-about {
position:absolute;
width:302px;
height:314px;
margin-left:28px;
margin-top:20px;
padding:12px 8px;
background-color:transparent;
color:FFFFFF;}

.content-about p {
margin-left:160px;
margin-right:8px;
margin-top:-180px;
font-family: "ChocolateBox" Arial;
font-size:16px;
color:FFFFFF;}

.content-about img {
float:left:}

.feature {
float:right;
width:570px;
height:344px;
margin-right:20px;
margin-top:12px;
margin-bottom:5px;
background-color:tansparent;}

.feature h1 {
font-family:"ChocolateBox" Arial,
font-size:17px;
color:6999c9;
text-align:right;}


.feature img{
float:right;
margin-top:12px;
margin-right:10px;}

.midfeature {
margin:12px 12px;
width:320px;
background-color:transparent;}

span {
font-family:"ChocolateBox" Arial;
color:FFFFFF;
font-size:15px;}

.mid {
height:500px;
margin-top:10px;
margin-left:10px:
margin-right:10px;
background-color:6999c9;}


.midleft {
float:left;
width:390px;
height:380px;
margin-left:15px;
margin-top:10px;
background-color:000000;}
.midleft p {
color:FFFFFF;
padding:4px;
font-family:"ChocolateBox" Arial;
font-size:13px;}
.midleft img {
float:right;}

.midquotes {
position:absolute;
width:310px;
height:380;
margin-top:20px;
margin-left:325px;
background-color:000000;}

span.quotes {
position:absolute;
color:6999c9;
font-size:18px;
margin-top:0;
margin-left:0;
padding-left:6px;
z-index:2;
background-color:000000;}



.midcontact {
position:absolute;
width:260px;
height:420px;
margin-left:28px;
margin-top:10px;
background-color:000000;}


.navigationone {
position:absolute;
background-color:transparent;
z-index:2;
padding-top:10px;
padding-left:19px;
visibility:visible;}

span.contact {
font-family:"ChocolateBox" Arial;
color:6999c9;
font-size:17px;}

.bottom {
position:absolute:
width:1100px;
height:860px;
margin-top:20px;
color:FFFFFF;
background-color:000000;}

.friends {
float:left;
width:350px;
height:740px;
margin-top:16px;
margin-left:16px;
color:000000;
background-color:666666;}
.favs {
position:absolute;
width:620px;
height:740px;
margin-top:16px;
margin-left:48px;
color:FFFFFF;
background-color:666666;}

span.blogs {
font-family:"ChocolateBox" Arial;
color:6999c9;
font-size:15px;}

.blogs {
float:left;
width:295px;
height:390px;
margin-top:5px;
margin-left:2px;;
color:FFFFFF;
background-color:000000;}
.blogs li {
margin-left:-14px;
padding-bottom:4px;}
.favsites {
float:right;
width:285px;
height:390px;
margin-top:5px;
margin-right:2px;
color:FFFFFF;
background-color:6999c9;}

.remarks {
clear:both;
width:450px;
height:220px;
margin-top:5px;
margin-left:10px;
color:FFFFFF;
background-color:6999c9;}


</style>

HTML

CODE

<table style="width:1100px;
height:1800px;
cellpadding:0px;
cellspacing:0px;
background-color:666666;">
<tr><td valign="top">

<div class="header">
<img src="http://i38.tinypic.com/op9pix.jpg" />
</div>

<div class="content">

<div class="top">

<div class="content-about">
<img src="http://i35.tinypic.com/2sbv5ft.jpg" />
<p>Directory Sexy<br /><br />
An Online Lingerie Resource<br /><br /><br />
United States<br /><br />
<a href="http://www.msplinks.com/MDFodHRwOi8vdmlld21vcmVwaWNzLm15c3BhY2UuY29tL2luZGV4LmNmbT9mdXNlYWN0aW9uPXVzZXIu
mlld0FsYnVtcyZmcmllbmRJRD0gNDAzNzA5MzQ1">Our Pics</a>
</p>
</div>

<div class="feature">
<img src="http://i34.tinypic.com/21awt1f.jpg" />
<div class="midfeature">
<h1> About Us</h1>
<p><span>We started Directory Sexy to provide information to visitors about lingerie designers, retail stores and e-stores. We designed this new layout. If you see anything weird or odd send us a message. We have blog on http://directorysexy.wordpress.com, please check it out.<br /><br />-If you are a designer or own a company, send us a note and we will add you to our directory.</span></p></div>
</div>
</div>
<div class="mid">
<div class="midleft">
<h3>Featured Boutique</h3>
<h4>&Dagger;&nbsp;Bizou Boutique&nbsp;&Dagger;</h4>

<p><img src="http://i35.tinypic.com/117e63t.jpg" />Started by two sisters, Andrea and Christine Cook, in 2006 <a href="http://www.msplinks.com/MDFodHRwOi8vYml6b3Vib3V0aXF1ZS5jb20v">Bizou Boutiqe</a> offers the finest in luxury lingerie. After journeys around the globe they decided to bring a little of the boudoir to the UK.</p>
<p>Bizou “is a girly, decadent haven for all the ladies who like to indulge in their passion for lingerie, luxury and pampering. “ They travel extensively to bring you the best fitting and most comfortable brands on the market.</p>
</div>
<div class="midquotes">

<h2>Fashionable Quotes</h2>

<p><span class="quotes"><br />"Every generation laughs at the old fashions, and follows religiously the new."
<br />---Henry David Thoreau<br /><br /><br /><br />
"Fashions fade, style is eternal"<br />
---Yves Saint Laurent
</span></p>
</div>

<div class="midcontact">
<div class="navigationone">
<a href="http://www.msplinks.com/MDFodHRwOi8vZnJpZW5kcy5teXNwYWNlLmNvbS9pbmRleC5jZm0/ZnVzZWFjdGlvbj1pbnZpdGUuYWRkZnJpZW5kX3ZlcmlmeSZmcmllbmRJRD00MDM3MDkzNDU=">
<img src="http://i33.tinypic.com/15d9iea.jpg" /></a>
<br /><br />
<a href="http://www.msplinks.com/MDFodHRwOi8vbWVhc3NhZ2luZy5teXNwYWNlLmNvbS9pbmRleC5jZm0/ZnVzZWFjdGlvbj1tYWlsLm1lc3NhZ2UmZnJpZWRuSUQ9IDQwMzcwOTM0NQ=="><img src="http://i35.tinypic.com/2af0g8h.jpg" /></a>
<br /><br />
<a href="http://www.msplinks.com/MDFodHRwOi8vY29sbGVjdC5teXNwYWNlLmNvbS9pbmRleC5jZm0/ZnVzZWFjdGlvbj11c2VyLmFkZFRvRmF2b3JpdGUmZnJpZW5kSUQ9NDAzNzA5MzQ1JnB1YmxpYz0wPjxp
Wcgc3JjPQ=="><img src="http://i33.tinypic.com/33xuijm.jpg" /></a>
<br /><br />
<a href="http://www.msplinks.com/MDFodHRwOi8vbWVzc2FnaW5nLm15c3BhY2UuY29tL2luZGV4LmNmbT9mdXNlYWN0aW9uPW1haWwuZm9y
2FyZCZmcmllbmRJRDQwMzcwOTM0NSZmb3J3YXJkcHJvZmlsZT48aW1nIHNyYz0="><img src="http://i34.tinypic.com/sxjccg.jpg" /></a>
<br /><br />
<a href="http://www.msplinks.com/MDFodHRwOi8vZ3JvdXBzLm15c3BhY2UuY29tL2luZGV4LmNmbT9mdXNlYWN0aW9uPWdyb3Vwcy5hZGR0
2dyb3VwJmZyaWVuZElEPTQwMzcwOTM0NQ=="><img src="http://i34.tinypic.com/nqb981.jpg" /></a>
<br /><br />
<a href="http://www.msplinks.com/MDFodHRwOi8vY29sbGVjdC5teXNwYWNlLmNvbS9pbmRleC5jZm0/ZnVzZWFjdGlvbj1SYXRlSW1hZ2UuVXNlclJhdGluZyZVc2VySUQ9NDAzNzA5MzQ1JnB1YmxpYz0wPjxp
Wcgc3JjPQ=="><img src="http://i36.tinypic.com/6t1qte.jpg" /></a>
</p>
</div>
</div>
</div>

<div class="bottom">

<div class="friends"><h2>bottompart</h2>
</div>

<div class="favs">
<div class="blogs">
<h3>Blogs</h3>
<p><a href="http://www.msplinks.com/MDFodHRwOi8vZWRpdGlvbjEyLndvcmRwcmVzcy5jb20+PHNwYW4gY2xhc3M9">edition12 Blog</span></a>
<a href="http://www.msplinks.com/MDFodHRwOi8vZnJvdWZyb3VmYXNoaW9uaXN0YS5ibG9nc3BvdC5jb20="><span class="blogs">Faire Frou Frou Blog</span></a>
</p>
<p><a href="http://www.msplinks.com/MDFodHRwOi8vbmFpYWRvbWFyZS53b3JkcHJlc3MuY29t"><span class="blogs">Naia Do Mare</span></a></p>
</div>
<div class="favsites">
<h2>Favorites</h2>
</div>
<div class="remarks"></div>
</div>

</div>


</div>
</td></tr></table>
</div>

I just made each link into a seperate DIV and it seems to work, Thanx Anyway!! :)

[schizo]

Please don't double post. There's an edit button there for a reason.

I'm guessing you no longer need help, then? If you want this reopened, let me know.
Topic closed an moved to Resolved.