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 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Sep 2011
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Basic CSS problem with two column layout....

    OK guys here we go, I know this is a very basic problem but ive been coding for about two weeks now, having had no previous experience. I thought I was doing well with the css basics until I hit this problem.

    All I want is for the left hand container to stretch to the bottom of the page (so that I can fit several other div's inside it) and then for the content column to sit to the left of it. I did have the content div next to it, until I put the container in and now cant fix it!

    Ive looked through websites and books i've bought and I have all the basics that they have in, so I can only believe that its something to do with the container or the extras ive put in!

    I'm not sure how much of the code you need so I'll just post it all, and please dont laugh at the content as I'm using a topic that I love to keep me interested!

    Code:
    body {
    margin: 0px;
    padding: 0px;
    font-size: 11pt;
    font-family: Verdana, Calibri, Arial, sans-serif;
    background-color: #ffffff;
    color: #222222;
    }
    
    h1 {
    font-size: 18pt;
    font-family: Times New Roman, Verdana, sans-serif;
    background-color: #cccccc;
    padding: 0px;
    margin: 0px;
    }
    
    h2 {
    font-size: 12pt;
    font-family: Verdana, Calibri, Arial, sans-serif;
    color: #444444;
    }
    
    a:link, a:visited {
    color: #ffffff;
    text-decoration: none;
    }
    
    #title {
    height: 120px;
    background-color: #000000;
    padding: 0px;
    margin: 0px;
    }
    
    #nav {
    float: left;
    background-color: #000000;
    width: 100%;
    border-top: 1px solid white;
    border-bottom: 1px solid white;
    padding: 0px;
    margin: 0px;
    }
    
    #nav ul {
    list-style: none;
    display: inline;
    color: #ffffff;
    padding: 0px;
    }
    
    #nav li {
    display: inline;
    padding: 6px 10px 6px 10px;
    margin: 0px;
    border-right: 1px solid white;
    line-height: 30px;
    }
    
    #sidebar-container {
    float: left;
    width: 160px;
    margin: 0px;
    padding: 0px;
    display: inline;
    height: 100%;
    }
    
    #sidebar {
    padding: 0px;
    margin: 0px;
    width: 160px;
    background-color: #000000;
    color: #ffffff;
    }
    
    #sidebar ul {
    list-style: none;
    margin: 0px;
    padding: 0px;
    }
    
    #sidebar li {
    padding: 10px;
    }
    
    #content {
    float: left;
    padding: 10px;
    margin: 0px;
    displai: inline;
    height:100%;
    }
    Code:
    <?xml version="1.0" encoding="UTF-8"?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:land="en">
    <head>
    <title>Index Page</title>
    <link rel="stylesheet" type="text/css" href="Layout.css" />
    </head>
    
    <body>
    <div id="title">
    </div>
    <div id="nav">
    <ul>
    <li><a href="/Warhammer40,000Index.html">Warhammer 40,000</a>
    <li><a href="/WarhammerFantasyIndex.html">Warhammer Fantasy</a>
    <li><a href="/MalifauxIndex.html">Malifaux</a>
    <li><a href="/WarmachineIndex.html">Warmachine</a>
    <li><a href="/FlamesofWar.html">Flames of War</a>
    </ul>
    </div>
    
    <h1><center>Hyper-active Gamer<br />
    Established 2003</center></h1>
    
    <div id="sidebar-container">
    <div id="sidebar">
    <ul>
    <li>Selection 1
    <li>Selection 2
    <li>Selection 3
    <li Selection 4
    </ul>
    </div>
    </div>
    <div id="content">
    <h2> Title for main</h2>
    <p> Write here, Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here.Write here, Write here,Write here,Write here,Write here,Write here,Write here,Write hereWrite here, Write here,Write here,Write here,Write here,Write here,Write here,Write hereWrite here, Write here,Write here,Write here,Write here,Write here,Write here,Write hereWrite here, Write here,Write here,Write here,Write here,Write here,Write here,Write here</p> 
    </div>
    </body>
    </html>
    Sorry for how basic this is but ive spent a few hours on it now and it's driving me crazy! Anyone who could show me the fix and explain why I failed would be much appreciated.

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,484
    Thanks
    23
    Thanked 636 Times in 635 Posts
    If you google two column layout you will find all kinds of templates for different situations.
    In your code you should be aware that <li> needs a closing tag </li> and that <center> is no longer valid. I added text-align: center; to your H1 and H2 definitions.

    Your left side nav is inside of two div's. You should combine them. What I did was to rename some divs and made a contain div for everything, much like the body tag. Then placed two div inside it. Below is just the main part of the page with the css definitions to show what I did. I made a page width in the main div and gave widths to the divs inside of it.

    Hope this helps, but be aware there are are better ways to handle widths and heights. What I used places limits on the page.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <style type="text/css">
    body {
    margin: 0px;
    padding: 0px;
    font-size: 11pt;
    font-family: Verdana, Calibri, Arial, sans-serif;
    background-color: #ffffff;
    color: #222222;
    }
    h1 {
    font-size: 18pt;
    font-family: Times New Roman, Verdana, sans-serif;
    text-align: center;
    background-color: #cccccc;
    padding: 0px;
    margin: 0px;
    }
    h2 {
    font-size: 12pt;
    font-family: Verdana, Calibri, Arial, sans-serif;
    text-align: center;
    color: #444444;
    }
    #container {
    width: 800px;
    height: 400px;
    }
    #sidebar {
    float: left;
    width: 160px;
    height: 100%;
    background-color: #000000;
    color: #ffffff;
    }
    #main {
    width: 620px;
    float: right;
    margin: 10px;
    }
    </style>
    </head>
    <body>
    <div id="container">
    <div id="sidebar">
    	<ul>
    		<li>Selection 1</li>
    		<li>Selection 2</li>
    		<li>Selection 3</li>
    		<li>Selection 4</li>
    	</ul>
    </div>
    
    <div id="main">
    <h2> Title for main</h2>
    <p> Write here, Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here,Write here.Write here, Write here,Write here,Write here,Write here,Write here,Write here,Write hereWrite here, Write here,Write here,Write here,Write here,Write here,Write here,Write hereWrite here, Write here,Write here,Write here,Write here,Write here,Write here,Write hereWrite here, Write here,Write here,Write here,Write here,Write here,Write here,Write here</p>
    </div>
    </div>
    </body>
    </html>

  • Users who have thanked sunfighter for this post:

    Static_uk (09-15-2011)

  • #3
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    You should also know that a div's natural behavior is to stretch vertically to accommodate whatever content is placed inside it. Of course if you assign a hard height rule then that's changing the natural behavior.
    Teed

  • #4
    New to the CF scene
    Join Date
    Sep 2011
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Great, so basically i need to place it in a container and then ensure i give ach div inside an actual value! Brilliant, I can keep moving foraward.

    Also I have looked at loads of templates but I was seeing if i could mix fluid and fixed values in this two column format. For now I'll keep it simple though :P

    Cheers


  •  

    Posting Permissions

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