SitePoint Sponsor

User Tag List

Results 1 to 5 of 5

Thread: css layout fix

  1. #1
    SitePoint Addict
    Join Date
    Aug 2002
    Posts
    385
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    css layout fix

    does anyone know a fix for this layout? you can see that netscape doesnt seem to include #footer in the #main region.

    Pls dont be afraid by the long code below, its just a simple skeleton layout.

    Any help is appreciated, thanks.
    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "[url="http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd[/url]">
    <html xmlns="[url="http://www.w3.org/1999/xhtml"]http://www.w3.org/1999/xhtml[/url]">
    <head>
    <title></title>
    <style>
    body {
    margin:0px;
    padding:0px;
    height:100%;
    }
    #align {
    text-align:center;
    }
    #main {
    width:780px;
    margin-left:auto;
    margin-right:auto;
    border:1px dashed red;
    height:100%;
    background-color:pink;
    }
    #logo {
    float:left;
    padding:30px 0px 0px 10px;
    }
    #menu{
    margin-top:28px;
    margin-left:170px;
    }
    #content {
    position:relative;
    width:600px;
    text-align:left;
    margin-left:170px;
    padding:18px 10px 0px 0px;
    border:1px dashed red;
    background-color:yellow;
    }
    #content span.left {
    position:relative;
    top:50px;
    width:285px;
    float:left;
    text-align:justify;
    }
    #content span.right {
    position:relative;
    top:50px;
    width:285px;
    float:right;
    text-align:justify;
    }
    #footer span.left {
    float:left;
    text-align:left;
    padding:50px 0px 0px 10px;
    }
    #footer span.right {
    float:right;
    text-align:right;
    padding:100px 10px 10px 0px;
    font-size:10px;
    }
    </style>
    </head>
    <body>
    <div id="align">
    	<div id="main">
    	<div id="logo">
    	HELLO WORLD
    	</div>
    	<div id="menu">	
    	HOME | ABOUT | TEXT	
    	<hr/>
    	</div>
    	<div id="content">
    	<b>HELLO</b>
    	<span class="left">	
    	Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text 
    	Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text 
    	Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text 
    	Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text 
    	Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text 
    	Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text 
    	Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text 
    	</span>
    	<span class="right">
    	Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text 
    	Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text 
    	Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text 
    	Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text 
    	</span>
    	</div>
    	<div id="footer">
    	<span class="left">
    	 Text <br/>
    	 Text <br/>
    	 Text <br/>
    	 Text <br/>
    	 Text <br/>
    	</span>
    	<span class="right">
    	Text Text Text Text Text Text Text 
    	</span>
    	</div>
    	</div>
    </div>
    </body>
    </html>

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,350
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    To get NN/mozilla to display the footer you will need to a clear:both to enable the conatiner to expand around the float. Add clear:both as indicated below.
    e.g.
    Code:
     </div>
     <br style="clear:both" />
     </div>
    </div>
    </body>
    </html>
    Also in IE6 your text is spilling oout of the container. This is because you have positioned it relatively but you have also tried to float it. You can't do both!

    Just floating is enough - change the styles as follows.
    Code:
    #content span.left {
    margin-top:50px;
    width:285px;
    float:left;
    text-align:justify;
    }
    #content span.right {
    margin-top:50px;
    width:285px;
    float:right;
    text-align:justify;
    }
    One last thing - get rid of all the spans and use divs. A span is an inline element and you have wrapped great big blocks of text in them. That's ok until you need to add a paragraph and then you will have problems.

    A span is used for inline content (portions of text etc) and should not be used for block level elements. You will only have problems later on with your current design.

    Hope that helps.

    Paul

  3. #3
    SitePoint Addict
    Join Date
    Aug 2002
    Posts
    385
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That really helped a lot. Thanks a lot.

  4. #4
    SitePoint Addict
    Join Date
    Aug 2002
    Posts
    385
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    by the way, i just tested it in mozilla firebird and it doesn't look quite well. maybe you know some hacks? thanks

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,350
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Firebird seems to need another clear to work:
    Here:
    Code:
     Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text 
     </div>
     <div style="clear:both"></div>
     </div>
     <div id="footer">
    Paul


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
  •