Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Feb 2009
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Div with 3 columns

    Hello,

    I'm just re-doing my old webpage layout from Tables into Divs and wondered if anyone could help.

    I have the following which in IE aligns the 3 Divs side by side. One main in the centre and one sidebar on each side. Perfect!

    I have two problems....

    1. When adding more detail into the Divs they don't seem to be top aligned, they sink to the bottom.
    2. Can't get this to work in FireFox.

    I'd like to keep it to a similar layout and not use floats if possible, but I guess if I knew what I was doing then I wouldn't be asking for help!!!

    Many thanks

    Code:
    <html>
    
    <head>
    
    <style type="text/css">
    
    body {
      color: black;
      background: white;
    }
    
    .BodyContainer {
      width: 900px;
      background-color: red;
    }
    
    .LeftContainer {
      width: 150px;
      display: inline;
    
      background-color: lightblue;
    }
    
    .MiddleContainer {
      width: 550px;
      display: inline;
      background-color: lightgreen;
    }
    
    
    .RightContainer {
      width: 200px;
      display: inline;
      background-color: tan;
    }
    
    .LeftContent {
      color: red;
    }
    
    .MiddleContent {
      color: orange;
    }
    
    .RightContent {
      color: white;
    }
    
    </style>
    
    </head>
    
    
    
    <body>
    
    <div class="BodyContainer">
      <div class="LeftContainer">
        <div class="LeftContent">
          Text here<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
        </div>
      </div>
      <div class="MiddleContainer">
        <div class="MiddleContent">
          Middle<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
        </div>
      </div>
      <div class="RightContainer">
        <div class="RightContent">
          Right<br /><br /><br /><br /><br /><br /><br /><br />
        </div>
      </div>
    </div>
    
    </body>
    
    </html>

  • #2
    Regular Coder BoldUlysses's Avatar
    Join Date
    Jan 2008
    Location
    Winston-Salem, NC
    Posts
    938
    Thanks
    10
    Thanked 190 Times in 187 Posts
    Hi Rich,

    Welcome to CF! What you have is a good start. A few suggestions:

    1. Don't test with IE. IE is not standards-compliant when it comes to rendering pages, so what you see with IE isn't a correct representation of your code, even if it looks right. Around here we say "Code it for Firefox, tweak (or hack) it for IE."
    2. The first step toward cross-browser compatibility is a DOCTYPE. It tells the browser which "rules" your page is playing by, and the browser renders the page accordingly. If the browser doesn't know your rules, it's going to render the page by its rules, which vary more from browser to browser.

    That said, have a go with this:

    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>
    	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    
    	<title>Page Title Goes Here</title>
    	
    	<style type="text/css">	
    	
    		body {
    		  color: black;
    		  background: white;
    		}
    		
    		.BodyContainer {
    		  width: 900px;
    		  background-color: red;
    		  overflow:auto;
    		}
    		
    		.LeftContainer {
    		  width: 150px;
    		  float:left;
    		  background-color: lightblue;
    		}
    		
    		.MiddleContainer {
    		  width: 550px;
    		  float:left;
    		  background-color: lightgreen;
    		}
    		
    		
    		.RightContainer {
    		  width: 200px;
    		  float:left;
    		  background-color: tan;
    		}
    		
    		.LeftContent {
    		  color: red;
    		}
    		
    		.MiddleContent {
    		  color: orange;
    		}
    		
    		.RightContent {
    		  color: white;
    		}	
    
    	</style>
    	
    </head>
    
    <body>
    	
    <div class="BodyContainer">
      <div class="LeftContainer">
        <p class="LeftContent">
          Text here
        </p>
      </div>
      <div class="MiddleContainer">
        <p class="MiddleContent">
          Middle
        </p>
      </div>
      <div class="RightContainer">
        <p class="RightContent">
          Right
        </p>
      </div>
    </div>
    
    </body>
    </html>
    Notice a few things:

    1. Replaced some extraneous divs with <p>s in order to make the code more semantic and avoid divitis. Removed your line breaks too. If you want to add dummy content use the lorem ipsum generator.
    2. Your containers are floated left now instead of being set to display:inline. That's not a proper use of that declaration.
    3. overflow:auto has been added to .BodyContainer in order to clear your floats.
    matt | design | blog

  • Users who have thanked BoldUlysses for this post:

    richcranney (02-25-2009)

  • #3
    New to the CF scene
    Join Date
    Feb 2009
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Woah, quite a few changes, but all look good and its displaying how I want now, thanks for the links too, good examples.

    Many thanks for your help, I can now drift away from tables and have a stab at this.

  • #4
    New to the CF scene
    Join Date
    Feb 2009
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Hi msuffern

    Thanks for the help before, not sure if you can help with this too....

    I've been playing with the piece you helped with earlier and I thought I would add a header which spans over the middle DIV and the Right DIV, but for some reason, the width is not playing ball.

    I have the body container which is 900px, this should not be more and not be less.

    The Left is a 20% of this, the middle 60% and the right 20%. So in theory the Header which goes over the middle and right should be 80%. The problem being in Firefox it is the same width as the middle.

    My question is, should it be 100% width for the header or 80%?

    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>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    
    <title>Page Title Goes Here</title>
    	
    <style type="text/css">	
    
    .BodyContainer {
      background-color: red;
      width: 900px;	
      overflow:auto;
      font-family: Tahoma;
      font-size: 10pt;
    }
    		
    .LeftContainer {
      width: 20%;
      float:left;
      background-color: lightblue;
    }
    
    .MiddleHeaderContainer {
      width: 80%;
      background-color: purple;
    }
    
    .MiddleContainer {
      width: 60%;
      float:left;
      background-color: lightgreen;
    }
    
    .RightContainer {
      width: 20%;
      float:left;
      background-color: tan;
    }
    
    .LeftTopHeader {
      color: brown;	
      background:url(bg_corner_topright.gif) no-repeat;
      background-position:right 0px;
    }
    
    .LeftExtraHeader {
      color: yellow;
    }
    
    .LeftContent {
      color: red;
      padding: 5px 5px 5px 5px;
    }
    
    .MiddleHeaderContent {
      color: white;
      padding: 5px 5px 5px 5px;
    }
    
    .MiddleContent {
      color: orange;
      padding: 5px 5px 5px 5px;
    }
    
    .RightContent {
      color: white;
      padding: 5px 5px 5px 5px;
    }	
    
    </style>
    	
    </head>
    
    <body>
    	
    <div class="BodyContainer">
    
    
      <div class="LeftContainer">
        <div class="LeftTopHeader">
          First
        </div>
        <div class="LeftContent">
          Text here under the first menu header which will have rounded corners
        </div>
        <div class="LeftExtraHeader">
          Second
        </div>
        <div class="LeftContent">
          More text under the second menu header
        </div>
        <div class="LeftExtraHeader">
          Third
        </div>
        <div class="LeftContent">
          And so on and so on....
        </div>
      </div>
    
    
      <div class="MiddleHeaderContainer">
        <div class="MiddleHeaderContent">
          Header here
        </div>
      </div>
    
    
      <div class="MiddleContainer">
        <div class="MiddleContent">
          Middle
        </div>
      </div>
    
    
      <div class="RightContainer">
        <div class="RightContent">
          Right
        </div>
      </div>
    </div>
    
    </body>
    </html>

  • #5
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,866
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    Hi richcranney,
    Take a look at http://bonrouge.com/3c-hf-fixed.php?nc. I believe, you can easily achieve your goal by just arranging it's markup like
    Code:
    <div id="wrap"> 
    <div id="inner-wrap">
    <div id="left">left</div>
    <div id="main">
        <div id="header">
           <h1>Three columns - fixed width</h1>
        </div>
       <div id="right">right</div>
       <div id="content">content  </div>
    </div>
    </div>
    <div id="footer">
    <p>This is a footer</p>
    </div>
    </div>
    (You may see the details of the layout at http://bonrouge.com/3c-hf-fixed.php)
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #6
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,749
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Hello richcranney,
    If you remove the background color from the floated .LeftContainer you can see the rest of your header.
    Like this -
    Code:
    	
    .LeftContainer {
      width: 20%;
      float:left;
      /*background-color: lightblue;*/
    }
    
    .MiddleHeaderContainer {
      width: 80%;
      background-color: purple;
    }
    .MiddleHeadContainer is sized 80% of it's containing div, .BodyContainer.

    Let it take all the room available like this -
    Code:
    .LeftContainer {
      width: 20%;
      float:left;
      background-color: lightblue;
    }
    
    .MiddleHeaderContainer {
      /*width: 80%;*/
      background-color: purple;
    }
    ...
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


  •  

    Posting Permissions

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