Forums > Trouble when placing a 3rd item in a DIV

Full Version: Trouble when placing a 3rd item in a DIV

Forums > Resource Center > Support Center > MySpace Support > Myspace Resolved Topics

danielkraus

Aug 13 2008, 11:52 AM

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

Aug 13 2008, 12:12 PM

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.

This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.