SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Guru redhillccwebmas's Avatar
    Join Date
    Jun 2005
    Posts
    989
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    push element into position of another if the other isn't there

    Hi there,

    I am having a problem with my CSS -

    I have a page within it there is a id element called 'maincontent'. This is in a fixed position on the page and it doesn't automatically move up when an element above it is removed.

    Page where element above 'main content' element has been removed

    Code:
    <html>
    <head>
    <style>
    body{background-color:#939da4;padding-top:7px;}
    .container{width:750px;margin:0px auto;background-color:#ffffff;border:solid 2px #bcbcbc;}
    .header{width:740px;height:85px;background:url(images/header.jpg);margin:5px;}
    #login {height:56px;float:left;background-color:#aaaaaa;margin-left:5px;margin-right:5px;display:inline;border:solid 1px #bcbcbc;}
    #date {height:25px;background-color:#dadada;margin-left:5px;margin-top:-33px;border:solid 1px #bcbcbc; }
    
    #date,#login,#pridebulleted,#pridetitle,#latestnewstitle,#latestnews,#testimonial{width:233px;}
    #pridetitle{height:32px;background-color:#d6d6d6;margin-top:5px;margin-left:5px;border:solid 1px #d6d6d6;background:url(images/home/titles/weprideourselveson.jpg);}
    #pridebulleted{height:88px;margin-left:5px;border:solid 1px #aaaaaa;background:url(images/misc/weprideourselveson_bulletedlist.jpg) center no-repeat;background-color:#aaaaaa;}
    
    #latestnewstitle{height:28px;background-color:#436e83;margin-left:5px;border:solid 1px #436e83;margin-top:5px;background:url(images/titles/latestnews.jpg);}
    #latestnews{height:180px;border:solid 1px #bcbcbc;margin-left:5px;}
    
    #head-ad{width:500px;height:124px;background:url(images/heads/spanner.jpg);float:right;margin-right:5px;margin-top:5px;}
    
    #maincontent{width:500px;float:right;margin-right:5px;margin-top:5px;}
    
    #maincontent-text{width:310px;}
    
    #maincontent-text h1{font-family:Arial;font-size:11px;color:#666666;float:left;font-weight:normal;line-height:15px;margin-left:10px;}
    
    #maincontent-girl{height:212px;width:190px;background:url(images/misc/girlholdinghips.jpg);float:right;}
    
    #testimonial{height:147px;border:solid 1px #bcbcbc;margin-left:5px;margin-top:5px;}
    
    #pgbtm-titlecontainer,#pgbtm-textcontainer{width:245px;}
    
    #pgbtm-titlecontainer{height:28px;background-color:#999999;margin-right:5px;}
    
    #pgbtm-textcontainer{height:122px;border:solid 1px #bcbcbc;margin-right:5px;}
    
    
    
    #pgbtm-textcontainer-sidetext{width:120px;float:left;}
    
    #pgbtm-textcontainer-sidetext h1{font-family:Arial;font-size:12px;color:#ff0000;font-weight:bold;margin-left:5px;}
    
    #pgbtm-textcontainer-sidetext h2{font-family:Arial;font-size:11px;color:#333333;font-weight:normal;margin-top:-5px;margin-left:5px;}
    
    .pgbtm-container{float:right;}
    
    #footer{width:740px;height:50px;background:url(images/misc/footer.png);margin-left:5px;margin-top:5px;margin-bottom:5px;}
    
    #latestnews h1 {font-family:Arial;color:#333333;font-size:11px;font-weight:bold;margin-left:15px;}
    
    #latestnews h2 {font-family:Arial;color:#333333;font-size:11px;font-weight:normal;margin-left:15px;margin-top:-8px;}
    
    .imgthumb{margin:8px;float:left;border:solid 1px #bcbcbc;}
    
    
    
    
    /* BUTTONS */
    
    #navlinks {margin:0px; padding:0px;}
    
    #navlinks li {
    	list-style: none;
    	display: inline;}
    
    
    
    
    
    </style>
    </head>
    
    <body>
    <div class="container">
    <div class="header"></div>
    
    <div id="login"></div>
    
    <ul id="navlinks">
    <li><img src="images/buttons/home.jpg"></li>
    <li><img src="images/buttons/aboutus.jpg"> </li>
    <li><img src="images/buttons/services.jpg"> </li>
    
    <li><img src="images/buttons/contact.jpg"> </li>
    <li><img src="images/buttons/links.jpg"> </li>
    </ul>
    
    <div id="date"></div>
    
    
    <div id="pridetitle"></div>
    <div id="pridebulleted"></div>
    
    <div id="maincontent">
    <div id="maincontent-text">
    <h1>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam diam. Nam rhoncus massa vitae libero. Vestibulum enim tortor, condimentum blandit, eleifend quis, rutrum et, ante. Vestibulum placerat tellus quis turpis. Morbi lacus lacus, vulputate a, commodo sit amet, euismod nec, nisi. Nullam vitae purus. Etiam vitae nisl. Phasellus laoreet risus eu ligula. 
    
    Aenean lacus quam, fringilla quis, mollis sed, auctor in, erat. Integer placerat urna sed augue. Aenean porta felis sit amet orci. Donec imperdiet velit vel odio. Morbi at nunc quis risus bibendum facilisis.
    </h1>
    
    </div>
    <div id="maincontent-girl"></div></div>
    
    <div id="latestnewstitle"></div>
    <div id="latestnews">
    <h1>20/06/2006 - Site is now live</h1><h2>This website is now complete and running</h2><h1>19/06/2006 - brilliant</h1><h2>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas pede mi, ullamcorper eu, bibendum nec, pretium vel, massa.</h2><h1>17/06/2006 - An amazing site -period</h1><h2>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas pede mi, ullamcorper eu,</h2>
    
    
    </div>
    
    <div class="pgbtm-container">
    
    <div id="pgbtm-titlecontainer"></div>
    <div id="pgbtm-textcontainer"></div>
    </div>
    
    <div class="pgbtm-container">
    <div id="pgbtm-titlecontainer"><img src="images/titles/featuredservice.jpg"></div>
    <div id="pgbtm-textcontainer">
    <div class="imgthumb"><img width=95 height=95 src="images/services/SEO.jpg" alt="You should never underestimate the importance of SEO - that's why we don't"/></div><div id="pgbtm-textcontainer-sidetext"><h1>Search Engine Optimisation (SEO)</h1><h2>You should never underestimate the importance of SEO - that's why we don't</h2></div>
    
    </div>
    </div>
    
    
    <div id="testimonial"><img src="images/misc/quote_home.png"></div>
    
    <div id="footer"></div>
    
    </div>
    
    
    
    </body>
    
    </html>
    Page where element above 'main content' element has been fixed in place

    Code:
    <html>
    <head>
    <style>
    body{background-color:#939da4;padding-top:7px;}
    .container{width:750px;margin:0px auto;background-color:#ffffff;border:solid 2px #bcbcbc;}
    .header{width:740px;height:85px;background:url(images/header.jpg);margin:5px;}
    #login {height:56px;float:left;background-color:#aaaaaa;margin-left:5px;margin-right:5px;display:inline;border:solid 1px #bcbcbc;}
    #date {height:25px;background-color:#dadada;margin-left:5px;margin-top:-33px;border:solid 1px #bcbcbc; }
    
    #date,#login,#pridebulleted,#pridetitle,#latestnewstitle,#latestnews,#testimonial{width:233px;}
    #pridetitle{height:32px;background-color:#d6d6d6;margin-top:5px;margin-left:5px;border:solid 1px #d6d6d6;background:url(images/home/titles/weprideourselveson.jpg);}
    #pridebulleted{height:88px;margin-left:5px;border:solid 1px #aaaaaa;background:url(images/misc/weprideourselveson_bulletedlist.jpg) center no-repeat;background-color:#aaaaaa;}
    
    #latestnewstitle{height:28px;background-color:#436e83;margin-left:5px;border:solid 1px #436e83;margin-top:5px;background:url(images/titles/latestnews.jpg);}
    #latestnews{height:180px;border:solid 1px #bcbcbc;margin-left:5px;}
    
    #head-ad{width:500px;height:124px;background:url(images/heads/spanner.jpg);float:right;margin-right:5px;margin-top:5px;}
    
    #maincontent{width:500px;float:right;margin-right:5px;margin-top:5px;}
    
    #maincontent-text{width:310px;}
    
    #maincontent-text h1{font-family:Arial;font-size:11px;color:#666666;float:left;font-weight:normal;line-height:15px;margin-left:10px;}
    
    #maincontent-girl{height:212px;width:190px;background:url(images/misc/girlholdinghips.jpg);float:right;}
    
    #testimonial{height:147px;border:solid 1px #bcbcbc;margin-left:5px;margin-top:5px;}
    
    #pgbtm-titlecontainer,#pgbtm-textcontainer{width:245px;}
    
    #pgbtm-titlecontainer{height:28px;background-color:#999999;margin-right:5px;}
    
    #pgbtm-textcontainer{height:122px;border:solid 1px #bcbcbc;margin-right:5px;}
    
    
    
    #pgbtm-textcontainer-sidetext{width:120px;float:left;}
    
    #pgbtm-textcontainer-sidetext h1{font-family:Arial;font-size:12px;color:#ff0000;font-weight:bold;margin-left:5px;}
    
    #pgbtm-textcontainer-sidetext h2{font-family:Arial;font-size:11px;color:#333333;font-weight:normal;margin-top:-5px;margin-left:5px;}
    
    .pgbtm-container{float:right;}
    
    #footer{width:740px;height:50px;background:url(images/misc/footer.png);margin-left:5px;margin-top:5px;margin-bottom:5px;}
    
    #latestnews h1 {font-family:Arial;color:#333333;font-size:11px;font-weight:bold;margin-left:15px;}
    
    #latestnews h2 {font-family:Arial;color:#333333;font-size:11px;font-weight:normal;margin-left:15px;margin-top:-8px;}
    
    .imgthumb{margin:8px;float:left;border:solid 1px #bcbcbc;}
    
    
    
    
    /* BUTTONS */
    
    #navlinks {margin:0px; padding:0px;}
    
    #navlinks li {
    	list-style: none;
    	display: inline;}
    
    
    
    
    
    </style>
    </head>
    
    <body>
    <div class="container">
    <div class="header"></div>
    
    <div id="login"></div>
    
    <ul id="navlinks">
    <li><img src="images/buttons/home.jpg"></li>
    <li><img src="images/buttons/aboutus.jpg"> </li>
    <li><img src="images/buttons/services.jpg"> </li>
    
    <li><img src="images/buttons/contact.jpg"> </li>
    <li><img src="images/buttons/links.jpg"> </li>
    </ul>
    
    <div id="date"></div>
    <div id="head-ad"></div>
    
    <div id="pridetitle"></div>
    <div id="pridebulleted"></div>
    
    <div id="maincontent">
    <div id="maincontent-text">
    <h1>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam diam. Nam rhoncus massa vitae libero. Vestibulum enim tortor, condimentum blandit, eleifend quis, rutrum et, ante. Vestibulum placerat tellus quis turpis. Morbi lacus lacus, vulputate a, commodo sit amet, euismod nec, nisi. Nullam vitae purus. Etiam vitae nisl. Phasellus laoreet risus eu ligula. 
    
    Aenean lacus quam, fringilla quis, mollis sed, auctor in, erat. Integer placerat urna sed augue. Aenean porta felis sit amet orci. Donec imperdiet velit vel odio. Morbi at nunc quis risus bibendum facilisis.
    </h1>
    
    </div>
    <div id="maincontent-girl"></div></div>
    
    <div id="latestnewstitle"></div>
    <div id="latestnews">
    <h1>20/06/2006 - Site is now live</h1><h2>This website is now complete and running</h2><h1>19/06/2006 - brilliant</h1><h2>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas pede mi, ullamcorper eu, bibendum nec, pretium vel, massa.</h2><h1>17/06/2006 - An amazing site -period</h1><h2>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas pede mi, ullamcorper eu,</h2>
    
    
    </div>
    
    <div class="pgbtm-container">
    
    <div id="pgbtm-titlecontainer"></div>
    <div id="pgbtm-textcontainer"></div>
    </div>
    
    <div class="pgbtm-container">
    <div id="pgbtm-titlecontainer"><img src="images/titles/featuredservice.jpg"></div>
    <div id="pgbtm-textcontainer">
    <div class="imgthumb"><img width=95 height=95 src="images/services/SEO.jpg" alt="You should never underestimate the importance of SEO - that's why we don't"/></div><div id="pgbtm-textcontainer-sidetext"><h1>Search Engine Optimisation (SEO)</h1><h2>You should never underestimate the importance of SEO - that's why we don't</h2></div>
    
    </div>
    </div>
    
    
    <div id="testimonial"><img src="images/misc/quote_home.png"></div>
    
    <div id="footer"></div>
    
    </div>
    
    
    
    </body>
    
    </html>
    Anyone know a way to do this? I don't particularly want to create a new div ID and use negative margins - any other ways, guys?

    Cheers for the help

    James

  2. #2
    doing my best to help c2uk's Avatar
    Join Date
    May 2005
    Location
    Cardiff
    Posts
    1,832
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Can you provide an online version? That makes it easier to test, at least for me with Firefox and the Webdeveloper Toolbar and other nice gimmicks for Firefox. Also the code is not that easy to read when everything is in just one line, put each css property in an extra line, makes it easier for us to help you, too.
    Dan G
    Marketing Strategist & Consultant


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •