SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Zealot cdutoit's Avatar
    Join Date
    Dec 2004
    Location
    London
    Posts
    178
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    New to CSS - Basic layout problem

    I have just started with CSS and need some help positioning 2 columns.

    I would like a header, 2 columns and a footer. I am happy with the header and footer, but can't get the 2 columns right. Not sure how to work it.

    Please help.


    HTML:
    Code:
    <HTML>
     <HEAD>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
      <LINK href="css/view.css" type="text/css" rel="stylesheet"></HEAD>
     <body>
      <div id="page">
       <%--------------------------------------------------------------%>
       <DIV id="Header">
        Header info here...
       </DIV> <!-- END header -->
       <%--------------------------------------------------------------%>
       <div id="Content">
           <%----------------------------------------------------------%>
           <DIV id="Sidebar">
            Sidebar here<br>
           </DIV> 
           <%----------------------------------------------------------%>
           <DIV id="ContentMain">
            Content here...    
           </DIV>
           <%----------------------------------------------------------%>
       </div>
       <%--------------------------------------------------------------%>   
       <DIV id="Footer">
        Footer info here...    
       </DIV>
       <%--------------------------------------------------------------%>
      </div> <!-- END page -->
     </body>
    </HTML>
    CSS:

    Code:
    #page
    {
        width: 760px;
        margin-left: 130px;
        min-height: 100%;
        text-align: left;
    }
    
    * html #page
    {
        height: 100%;
    }
    
    /*------------------------- HEADER --------------------------------------*/
    
    #Header
    {
        margin: 0px 25px 10px 25px;
        text-align: left;
        border: dashed 1px black;
    }
    
    #Content
    {
        margin: 0px 25px 10px 25px;
        text-align: left;
        border: dashed 2px yellow;
    }
    
    
    /*--------------------------- Sidebar -----------------------------------*/
    
    #Sidebar
    {
        position: relative;
        top: 0;
        left: 0;
        width: 220px;
        height: 100%;
        border: 1px solid red;
    }
    
    /*------------------------- Content -----------------------------------*/
    
    #ContentMain{
        position: relative;
        display: inline;
        height: 100%;
        margin: 0 0 0 245px;
        top: 0;
        border: solid 1px blue;
    }
    
    
    /*------------------------- FOOTER --------------------------------------*/
    
    #Footer
    {
        margin: 0px 25px 10px 25px;
        text-align: left;
        border: dashed 2px purple;
    }

  2. #2
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    float left, clear floats

    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" xml:lang="en" lang="en">
    <head>
    <title>12345 12345 12345 12345 12345</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    	<style type="text/css">
    	html,body{height:100%;}
    	
    	*{margin:0;padding:0;}
    	
    	head+/**/body .fc:after {
    	content:"."; 
    	display:block; 
    	height:0; 
    	clear:both;
    	visibility:hidden;
    	}
    	/* \*/
    	* html .fc{height:1%;}
    	*+html .fc{display:inline-block;}
    	/*  */
    	
    	#page{
    	width: 760px;
    	margin:-54px auto 0 auto;
    	/*background:#ccffcc;*/
    	}
    	/*head+body #page{min-height:100%;}
    	* html #page{height: 100%;}*/
    	
    
    /*------------------------- HEADER --------------------------------------*/
    	#Header,#Content{margin:10px 25px 0px 25px;}
    	* html #Header,* html #Footer{height:1%;}
    	
    	.x{height:54px;overflow:hidden;}
    	
    	#Header{border: dashed 1px black;}
    	#Content{border: dashed 2px yellow;}
    	
    /*------------------------- FOOTER --------------------------------------*/
    
    	#Footer{
    	border:dashed 2px purple;
    	width:706px;
    	margin:10px auto;
    	}
    	
    /*--------------------------- Sidebar -----------------------------------*/
    
    	#Sidebar,* html .r,#ContentMain{float:left;}
    	#Sidebar{
    	width:220px;
    	border: 1px solid red;
    	}
    	
    /*------------------------- Content -----------------------------------*/
    
    	#ContentMain{width:100%;}
    	
    	.r{border:solid 1px blue;}
    	head+body .r{margin:0 0 0 222px;}
    	
    	* html #Sidebar,* html #ContentMain{height:500px;}
    	head+body #Sidebar,head+body #ContentMain{min-height:500px;}
    	
    	#page p,#Footer p{padding:5px;}
    	</style>
    </head>
    <body>
    
    <div id="page">
    
    <div class="x"></div>
    
    <div id="Header"><p>Header info here...</p></div> <!-- END header -->
    
    <div id="Content" class="fc">
    
    
    <div id="Sidebar"><p>Sidebar here</p></div>
    
    <div class="r fc">
    <div id="ContentMain"><p>Content here</p></div>
    </div>
    
    </div>
    
    </div> <!-- END page -->
    
    <div id="Footer"><p>Footer info here</p></div>
    
    </body>
    </html>

  3. #3
    SitePoint Zealot cdutoit's Avatar
    Join Date
    Dec 2004
    Location
    London
    Posts
    178
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks

  4. #4
    SitePoint Zealot cdutoit's Avatar
    Join Date
    Dec 2004
    Location
    London
    Posts
    178
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code working 100%. Please help me understand the logic....

    What is the meaning of content:"."; ?

    Why is the top margin -54px?
    #page{
    width: 760px;
    margin:-54px auto 0 auto;
    * Please explain syntax head+body #page{min-height:100%;}

    * Is it the same as?: head #page{min-height:100%;} and body #page{min-height:100%;}

    * How can I have the footer at the bottom of the screen?

    I uncommented the bit in green, but it did not seem to have an effect:

    #page{
    width: 760px;
    margin:-54px auto 0 auto;
    /*background:#ccffcc;*/
    }
    /*head+body #page{min-height:100%;}
    * html #page{height: 100%;}*/
    Sorry for all the questions. Just trying to get my head around this.

    Thanks

  5. #5
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    float clearing
    head+/**/body .fc:after {/*min-height browsers, but not IE7*/
    content:".";
    display:block;
    height:0;
    clear:both;
    visibility:hidden;
    }
    /* \*/
    * html .fc{height:1%;} /*IE <7*/
    *+html .fc{display:inline-block;}/* IE>6*/
    /* */

    filter, hacks

    head+body min-height browsers
    * html IE 5 5.5 6
    *+html IE 7

    footer at bootom of screen

    head+body #page{min-height:100%;}
    * html #page{height: 100%;}


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
  •