SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Member
    Join Date
    Aug 2004
    Location
    US
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS positioning...layout collapsing!

    Hey everyone, I've got this nice little layout that I'm trying to code, but it's giving me huge problems. Here's a screenshot of what the site is supposed to look like, and this is what it looks like with the current coding. Here's how the structure should be laid out:



    I'm having trouble figuring out what in my coding is causing the positioning to differ from the image. The problem defiantely lies within #content-footer somewhere, but I'm not sure what exactly needs to be changed, and I've fooled around with it quite a bit and nothing has worked. I'd really appreciate if somebody could take a look at my coding and give me a pointer or 2 on what I can do to fix it.

    Thanks a ton!

  2. #2
    SitePoint Enthusiast 2kool2's Avatar
    Join Date
    May 2001
    Location
    UK
    Posts
    63
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It's due to the mix of absolute positioning and relative positioning.

    Soon as you use absolute the div is taken from the natural flow of the document. In effect container-content only has the footer in it hence it's displayed first.

    As for repairs I don't know. Try a clear:both on the footer but I don't think it'll work.

    Personally I wouldn't have used the position:absolute methods.

    hope it helps
    mike 2k: )2
    <work> http://webSemantics.co.uk </work>
    <rest> http://2kool2.com/ </rest>
    <play> http://bangersandmash.com/ </play>

  3. #3
    SitePoint Zealot ChrisOSX's Avatar
    Join Date
    May 2002
    Posts
    104
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    With a little more markup you can make it work. Just rap your absolutely positioned element inside of a relative positioned element container.

  4. #4
    SitePoint Enthusiast 2kool2's Avatar
    Join Date
    May 2001
    Location
    UK
    Posts
    63
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ChrisOSX
    With a little more markup you can make it work. Just rap your absolutely positioned element inside of a relative positioned element container.
    I think that's what he has done and is what's going wrong.
    mike 2k: )2
    <work> http://webSemantics.co.uk </work>
    <rest> http://2kool2.com/ </rest>
    <play> http://bangersandmash.com/ </play>

  5. #5
    SitePoint Zealot jfitz's Avatar
    Join Date
    Mar 2004
    Location
    Lovely Leipzig
    Posts
    166
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yeah, what they said.
    Not perfect but you should be able to take it from here.
    You'll have to change your urls back to relative and extract the css yourself. I'm far too lazy to do that.
    Check out paul's stickies.
    This is good too: http://www.brainjar.com/css/positioning/

    BTW, validate your original xhtml - you made a couple of mistakes.
    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Meforme.net :: Journal Index</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <!--<link rel="stylesheet" type="text/css" media="screen" href="css/screen.css"/>-->
    <!-- <link rel="stylesheet" type="text/css" media="print" href="css/print.css" /> -->
    <style type="text/css">
    body {
    background: url([url]http://www.meforme.net/test/images/main_bg.png[/url]) repeat fixed;
    margin: 0;
    padding: 0;
    text-align: center;
    }
    
    div#container {
    position: relative;
    width: 759px;
    margin: 50px auto 50px auto;
    text-align: left;
    }
    div#container-content {
    position: relative;
    width: 759px;
    background: url([url]http://www.meforme.net/test/images/inside_bg.png[/url]) repeat-y left;
    }
    
    div#container-footer {
    position: relative;
    width: 759px;
    height: 60px;
    background: url([url]http://www.meforme.net/test/images/inside_bottom.png[/url]) no-repeat left;
    }
    
    
    div#content-left {
    width: 579px;
    /*position: absolute;
    top: 0px;
    left: 0px;~~~~~~~~~~~~~~~~~~~~~~~*/
    }
    
    
    div#content-right {
    position: absolute;
    width: 180px;
    top: 0px;
    left: 579px;
    background-color: #0099FF;
    }
    div#left-header {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 579px;
    height: 50px;
    background: url([url]http://www.meforme.net/test/images/inside_left_top.png[/url]) no-repeat left
    }
    div#left-body {
    /*position: absolute;
    top: 50px;
    left: 0px;~~~~~~~~~~~~~*/
    width: 500px;
    padding: 50px 29px 0px 50px;/*~~~~~~~0px to 10px~~~~~~~*/
    }
    div#right-header {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 180px;
    height: 68px;
    background: url([url]http://www.meforme.net/test/images/inside_right_top.png[/url]) no-repeat left;
    }
    div#right-body {
    position: absolute;
    top: 68px;
    left: 0px;
    width: 180px;
    }
    
    div.hr { /*~~~~~~~~~ now a class selector ~~~~~~~~~*/
    position: relative;
    width: 100%;
    height: 1px;
    background: url([url]http://www.meforme.net/test/images/horiz_rule.png[/url]) repeat-x left;
    margin: 20px 0px 20px 0px;
    }
    
    .title {
    	font: bold 11px Georgia, "Times New Roman", Times, serif;
    	color: #334149;
    }
    .title a:link {
    	text-decoration: none;
    	color: #334149;
    }
    .title a:hover, .title a:visited, .title a:active {
    	text-decoration: none;
    	color: #993233;
    }
    .subtitle {
    	font: 9px Georgia, "Times New Roman", Times, serif;
    	color: #98A9B3;
    	text-transform: capitalize;
    }
    .body {
    	font: 11px Georgia, "Times New Roman", Times, serif;
    	color: #000000;
    	line-height: 150%
    }
    .endtitle {
    	font: bold 10px Georgia, "Times New Roman", Times, serif;
    	color: #98A9B3;
    	text-align: right;
    }
    .endtitle a:link {
    	text-decoration: none;
    	color: #98A9B3;
    }
    .endtitle a:hover, .title a:visited, .title a:active {
    	text-decoration: none;
    	color: #993233;
    }
    </style>
    </head>
    
    <body>
    <div id="container">
    	<div id="container-content">
    		<div id="content-left">
    			<div id="left-header"></div>
    			<div id="left-body">
    				<h1 class="title"><a href="javascript:;">Sample Entry Title</a></h1>
    				<h2 class="subtitle">Sunday, January 1st, 2004 at 12:00 AM</h2>
    				<p class="body">This is where the text of the body would go.  Blah blah blah blah blah.  Blahbetty blah blah blah.  This is where the text of the body would go.  Blah blah blah blah blah.  Blahbetty blah blah blah.  This is where the text of the body would go.  Blah blah blah blah blah.  Blahbetty blah blah blah.  This is where the text of the body would go.  Blah blah blah blah blah.  Blahbetty blah blah blah.  This is where the text of the body would go.  Blah blah blah blah blah.  Blahbetty blah blah blah.  This is where the text of the body would go.  Blah blah blah blah blah.  Blahbetty blah blah blah.</p>
    				<h4 class="endtitle"><a href="javascript:;">12:00 AM</a> / <a href="javascript:;">0 Comments</a></h4>
    				<div class="hr"></div>
    				<h1 class="title"><a href="javascript:;">Sample Entry Title</a></h1>
    				<h2 class="subtitle">Sunday, January 1st, 2004 at 12:00 AM</h2>
    				<p class="body">This is where the text of the body would go.  Blah blah blah blah blah.  Blahbetty blah blah blah.  This is where the text of the body would go.  Blah blah blah blah blah.  Blahbetty blah blah blah.  This is where the text of the body would go.  Blah blah blah blah blah.  Blahbetty blah blah blah.  This is where the text of the body would go.  Blah blah blah blah blah.  Blahbetty blah blah blah.  This is where the text of the body would go.  Blah blah blah blah blah.  Blahbetty blah blah blah.  This is where the text of the body would go.  Blah blah blah blah blah.  Blahbetty blah blah blah.</p>
    				<h4 class="endtitle"><a href="javascript:;">12:00 AM</a> / <a href="javascript:;">0 Comments</a></h4>
    				<div class="hr"></div>
    				<h1 class="title"><a href="javascript:;">Sample Entry Title</a></h1>
    				<h2 class="subtitle">Sunday, January 1st, 2004 at 12:00 AM</h2>
    				<p class="body">This is where the text of the body would go.  Blah blah blah blah blah.  Blahbetty blah blah blah.  This is where the text of the body would go.  Blah blah blah blah blah.  Blahbetty blah blah blah.  This is where the text of the body would go.  Blah blah blah blah blah.  Blahbetty blah blah blah.  This is where the text of the body would go.  Blah blah blah blah blah.  Blahbetty blah blah blah.  This is where the text of the body would go.  Blah blah blah blah blah.  Blahbetty blah blah blah.  This is where the text of the body would go.  Blah blah blah blah blah.  Blahbetty blah blah blah.</p>
    				<h4 class="endtitle"><a href="javascript:;">12:00 AM</a> / <a href="javascript:;">0 Comments</a></h4>
    				<div class="hr"></div>
    				<h1 class="title"><a href="javascript:;">Sample Entry Title</a></h1>
    				<h2 class="subtitle">Sunday, January 1st, 2004 at 12:00 AM</h2>
    				<p class="body">This is where the text of the body would go.  Blah blah blah blah blah.  Blahbetty blah blah blah.  This is where the text of the body would go.  Blah blah blah blah blah.  Blahbetty blah blah blah.  This is where the text of the body would go.  Blah blah blah blah blah.  Blahbetty blah blah blah.  This is where the text of the body would go.  Blah blah blah blah blah.  Blahbetty blah blah blah.  This is where the text of the body would go.  Blah blah blah blah blah.  Blahbetty blah blah blah.  This is where the text of the body would go.  Blah blah blah blah blah.  Blahbetty blah blah blah.</p>
    				<h4 class="endtitle"><a href="javascript:;">12:00 AM</a> / <a href="javascript:;">0 Comments</a></h4>
    				<div class="hr"></div>
    				<h1 class="title"><a href="javascript:;">Sample Entry Title</a></h1>
    				<h2 class="subtitle">Sunday, January 1st, 2004 at 12:00 AM</h2>
    				<p class="body">This is where the text of the body would go.  Blah blah blah blah blah.  Blahbetty blah blah blah.  This is where the text of the body would go.  Blah blah blah blah blah.  Blahbetty blah blah blah.  This is where the text of the body would go.  Blah blah blah blah blah.  Blahbetty blah blah blah.  This is where the text of the body would go.  Blah blah blah blah blah.  Blahbetty blah blah blah.  This is where the text of the body would go.  Blah blah blah blah blah.  Blahbetty blah blah blah.  This is where the text of the body would go.  Blah blah blah blah blah.  Blahbetty blah blah blah.</p>
    				<h4 class="endtitle"><a href="javascript:;">12:00 AM</a> / <a href="javascript:;">0 Comments</a></h4>
    			</div>
    		</div>
    		<div id="content-right">
    			<div id="right-header"></div>
    			<div id="right-body">
    				<h1>Subheading title</h1>
    				<h2>Stuff to go in the subheading.  Blah blah blah blah blah.  Blahbetty blah blah blah.  Stuff to go in the subheading.  Blah blah blah blah blah.  Blahbetty blah blah blah.</h2>
    				<h1>Subheading title</h1>
    				<ul>
    					<li>Item 1</li>
    					<li>Item 2</li>
    					<li>Item 3</li>
    					<li>Item 4</li>
    				</ul>
    			</div>
    		</div>
    	</div>
    	<div id="container-footer"></div>
    </div>
    </body>
    </html>

  6. #6
    SitePoint Member
    Join Date
    Aug 2004
    Location
    US
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Wow, that's fantastic! Thank you so much, I'll have to pick apart your code to see what I've done wrong. I've made several layouts mixing absolute and relative before and never had any problems...suppose you learn something every time Thanks again!

  7. #7
    SitePoint Zealot jfitz's Avatar
    Join Date
    Mar 2004
    Location
    Lovely Leipzig
    Posts
    166
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by meforme
    Wow, that's fantastic! Thank you so much, I'll have to pick apart your code to see what I've done wrong. I've made several layouts mixing absolute and relative before and never had any problems...suppose you learn something every time Thanks again!
    My pleasure.
    The edits are marked with a row of tildes ~~~~

    Like the 2kool2 said, when you position something absolutely you effectively lift it out of the flow. If you imagine that your containing divs are elasticated, always trying to be as small as they can. Then you lift the inner div out by positioning it absolutely, the containing div just snaps back. Because the footer was positioned relatively, it still took up space in the containing div and got pulled to the top.

    Just a quick point about debugging this stuff. What I find useful, if I can't figure out what's going wrong is to comment chunks of the code. I just whip out about half of the suspect code, save it, see what happens. Regardless of whether that works or not, you now know which of the two halves of the suspect code to look in, the half you took out or the half you left in. Wash, rinse, repeat until you've nailed the critter. Each time you narrow the possibilities by half. For the nerd in you that's called a binary search.


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
  •