Web Analytics Made Easy -
StatCounter 3 Column CSS Layout Bugs - CodingForum

Announcement

Collapse
No announcement yet.

3 Column CSS Layout Bugs

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • 3 Column CSS Layout Bugs

    Greetings all,
    I've been having some issues with trying to solve these bugs in my CSS (I've extensively researched various "3-column" approaches for Fixed-Fluid-Fixed styles, even using faux columns, however each approach has been pretty much the same results.)

    Below is an image of what the template is supposed to look like when finished. Please ignore the Highlighted-Rounded Corner Box in the centre column, I'd rather do that last, after all the bugs are worked out.



    The problems I've been having are relatively simple to describe:
    • Neither Sidebar shows up
    • The footer is -not- pushed to the bottom of the page, like it is supposed to.


    Following is the CSS Code and HTML Code for the specific page.

    PHP Code:
    <html>

    <
    head>
        <
    link href="dependencies/styles/main.css" rel="stylesheet" type="text/css" />
    </
    head>

    <
    body class="mainStyle">

    <
    div id="container">

        <
    div id="header">
            <
    div id="banner"></div>
        </
    div>

        
        <
    div id="menu"></div>

        <
    div id="body">
            <
    div id="leftSidebar"></div>
            <
    div id="rightSidebar"></div>
            <
    div id="mainContent"></div>
        </
    div>

        <
    div id="footerPush"></div>
    </
    div>

    <
    div id="footer"></div>

    </
    body>

    </
    html
    Code:
    /*
    	SIMM Stylesheet
    	Created by Brian Teran aka Kenshin Takai
    	©2009. All Rights Reserved.
    	Credits must remain intact.
    	Do not modify without permission.
    */
    
    body  
    {	
    	min-width: 640px;
    	background: #000000;
    }
    
    .mainStyle #container
    {
    	height: 100%;
    	width: 100%;
    	height: auto !important;
    	min-height: 100%;
    	
    	margin-bottom: -150px;
    }
    
    .mainStyle #banner
    {
    	margin: 0 auto;
    	
    	width: 537px;
    	height: 135px;
    	
    	background-image: url(../images/backgrounds/banner.png);
    }
    
    .mainStyle #header 
    { 
    	background-image: url(../images/backgrounds/bars/header_bar.png);
    	
    	width: 100%;
    	height: 250px;
    } 
    
    .mainStyle #menu
    {
    	position: relative;
    	background-image: url(../images/backgrounds/bars/menu_bar.png);
    	width: 100%;
    	height: 60px;
    	
    	top: -61px;
    }
    
    .mainStyle #leftBar 
    {
    	
    	float: left;
    	
    	background-image: url(../images/backgrounds/bars/left.png);
    	
    	width: 300px;
    }
    
    .mainStyle #mainContent 
    {
    	margin: 0px 320px 0px 320px;
    	padding: 20px;
    } 
    
    
    .mainStyle #rightBar 
    {
    	float: right;
    	
    	background-image: url(../images/backgrounds/bars/right.png);
    	
    	width: 350px;
    	height: 100%;
    }
    
    .mainStyle #footerPush
    {
    	height: 150px;
    }
    
    .mainStyle #footer 
    {	
    	background-image:url(../images/backgrounds/bars/footer_bar.png);
    	
    	width: 100%;
    	height: 150px;
    }
    Any help would be greatly appreciated, and any assistance/advice as well will be duly noted. Much thanks in advance!

  • #2
    Welcome to CF!

    Have you seen these layouts?

    - Bonrouge
    - Layout Gala

    Both of them have working 3-column templates that would be great starting points.

    You should also know that including a DOCTYPE is an essential practice if you want any hope of cross-browser compatibility.
    matt | design | blog

    Comment


    • #3
      Thanks!

      Thanks for the assistance thus far! I've been able to get the sidebars/content box to appear, however the sidebars still refuse to span the entire container. Gah....

      You can view an online demo of the current situation here:
      View Demo Here

      Updated Code:
      PHP Code:
      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

      <
      html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

      <
      head>
          <
      link href="dependencies/styles/main.css" rel="stylesheet" type="text/css" />
          
          <!--[if 
      IE]>
              <
      style type="text/css">
                  
      #container,
                  #mainContent,
                  #innerContainer,
                  #subContainer
                  
      {
                      
      zoom1;
                  }
                  
              </
      style>
          <![endif]-->
          
      </
      head>

      <
      body class="mainStyle">

      <
      div id="container">

          <
      div id="header">

              <
      div id="banner"></div>
          </
      div>
          
          <
      div id="menu"></div>
          
          <
      div id="innerContainer">
              
              <
      div id="leftBar">
                  <
      div id="textContainer">Left Bar</div>
              </
      div>
          
              <
      div id="subContainer">

                  <
      div id="rightBar">
                      <
      div id="textContainer">Right Bar</div>
                  </
      div>
                  <
      div id="mainContent">Main Content</div>
              </
      div>
              
          </
      div>
          
      </
      div>

      <
      div id="footer"></div>

      </
      body>

      </
      html
      CSS Code:
      Code:
      /*
      	SIMM Stylesheet
      	Created by Brian Teran aka Kenshin Takai
      	©2009. All Rights Reserved.
      	Credits must remain intact.
      	Do not modify without permission.
      */
      
      html
      {
      	height: 100%;
      }
      
      body  
      {	
      	margin: 0;
      	padding: 0;
      	width: 100%;
      	height: 100%;
      	min-height: 100%;
      
      	color: #FF0099;
      	background: #000000;
      }
      
      
      .mainStyle A:link
      {
      	font-weight: bolder;
      	color: #3366CC;
      	text-decoration: underline;
      }
      
      .mainStyle A:hover
      {
      	font-weight: bolder;
      	color: #3366CC;
      	text-decoration: underline overline;
      	font-style: oblique;
      }
      
      .mainStyle A:visited
      {
      	font-weight: bolder;
      	color: #3366CC;
      	text-decoration: underline overline;
      	font-style: oblique;
      }
      
      .mainStyle #container
      {
      	position: relative;
      	
      	top: 0;
      	left: 0;
      	
      	width: 100%;
      	height: auto !important;
      	min-height: 100%;
      	
      	overflow: hidden;
      }
      
      *  html #container
      {
      	height: 100%;
      }
      
      .mainStyle #innerContainer
      {
      	height: 100%;
      	padding-bottom: 100px;
      	
      	overflow: hidden;
      }
      
      .mainstyle #innerContainer:after
      {
      	content: " ";
      	display: block;
      	clear: both;
      }
      
      .mainStyle #subContainer
      {
      	position: relative;
      }
      
      .mainStyle #textContainer
      {
      	position: relative;
      	margin-left: 15px;
      	margin-right: 15px;
      }
      
      .mainStyle #banner
      {
      	margin: 0 auto;
      	
      	width: 537px;
      	height: 135px;
      	
      	background-image: url(../images/backgrounds/banner.png);
      }
      
      .mainStyle #header 
      { 
      	background-image: url(../images/backgrounds/bars/header_bar.png);
      	
      	width: 100%;
      	height: 175px;
      } 
      
      .mainStyle #menu
      {
      	position: relative;
      	background-image: url(../images/backgrounds/bars/menu_bar.png);
      	width: 100%;
      	height: 40px;
      	
      	top: -41px;
      }
      
      .mainStyle #leftBar 
      {
      	position: relative;
      	
      	float: left;
      	
      	background-image: url(../images/backgrounds/bars/left.png);
      	
      	width: 300px;
      	
      	min-height: 100%;
      	height: 100%;
      	
      	text-align: left;
      	
      	display: block;
      	
      	overflow: hidden;
      	
      }
      
      .mainStyle #mainContent 
      {
      	position: relative;
      	margin: 0px 320px 0px 320px;
      } 
      
      
      .mainStyle #rightBar 
      {
      
      	position: relative;
      	float: right;
      	
      	background-image: url(../images/backgrounds/bars/right.png);
      	
      	width: 300px;
      	
      	min-height: 100%;
      	height: 100%;
      	
      	text-align: right;
      	
      	display: inline;
      	overflow: hidden;
      }
      
      .mainStyle #footer 
      {	
      	position: absolute;
      	bottom: 0;
      	
      	background-image:url(../images/backgrounds/bars/footer_bar.png);
      	
      	width: 100%;
      	height: 100px;
      	
      	text-align: center;
      }
      Any further assistance would be greatly appreciated! I'm eager to get started on the back end for this thing!

      Comment


      • #4
        Validator is your friend, see the errors in your markup at http://validator.w3.org/check?uri=ht...Inline&group=0

        Also, make sure that you are not missing/adding anything from/to the original layout that your are referring. You may change the look and feel, but you need to use all the elements and styles as specified there (except color,background etc can be altered as per your choice and height, width etc can be altered by keeping the proportions), to get a similar layout.
        Last edited by abduraooft; Apr 18, 2009, 05:05 AM.
        Digitalocean Cloud Hosting (Referral link - get $10 free credit) Fameco

        Comment


        • #5
          The repeat of the textContainer id is the "common" container for any text inside the sidebars, so that error is erroneous. As to the header error, I can't see a tag that I "didn't close" or something similar, unless it's referring to the stylesheet include. I did use the validator before submitting here.

          Thanks anyhow!

          Comment


          • #6
            I did a little bit of research. Some of the sources I've visited state that percentages need an absolute dimension figure for the parent container(s), yet some also state that it's based on the body, rather than anything containing it. A suggestion was "Faux Columns", though I'm not quite sure how to execute this.

            Any chance someone could please be of assistance?

            Comment


            • #7
              Here's the article on faux columns. What it amounts to is creating a small slice of a background image and repeating it vertically (the repeat-y CSS value on a background declaration) to give the illusion of multiple full-length columns. Done properly it works quite well; I use the technique all the time.
              matt | design | blog

              Comment


              • #8
                The repeat of the textContainer id is the "common" container for any text inside the sidebars, so that error is erroneous. As to the header error, I can't see a tag that I "didn't close" or something similar, unless it's referring to the stylesheet include. I did use the validator before submitting here.
                so that error is erroneous. NO it is a correctly called an error.

                If you need a div more than once, you should make it a class.

                .textContainer instead of #textContainer.

                #Divs should only be used once per page.

                look here. Classes for repeated use.

                Frank
                Last edited by effpeetee; Apr 19, 2009, 12:21 PM.
                * Sources (updated: 21.11.2012.
                Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

                Comment

                Working...
                X