Results 1 to 4 of 4

Thread: Why is there a space between my columns?

  1. #1
    Join Date
    Nov 2009
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Why is there a space between my columns?

    Hi ya

    This is really puzzling me big time. Im quite new to CSS, Can any one help me?

    I have made a little web page which has two columns with liquid height. But...there is a space between the columns???
    Do you know how to remove the space without fixing the width of both columns?

    One other thing, why does the right column extend to the right hand side even though I have not set a width? (I want it to do this I just don't understand why it does)

    Thanking you profusely in advance.


    Here is the code I am using:

    <html>
    <head>
    <style>

    html,body { height:100%; margin:0; text-align:center; font:12px arial; }

    #container { width:850px; height:100%; background:yellow; }
    #header { width:100%; height:100px; background:#00aeed; }
    #main { width:100%; height:75%;}
    #navigation { float:left; width:200px; height:100%; background:#49bdef; }
    #content { height:100%; background:#8dcff4; }
    #footer { clear:both; height:27px; background:#d4ecfb; padding:6px; }

    </style>
    </head>
    <body>

    <div id='container'>
    <div id='header'>Header with fixed height and 100% width of the container div</div>

    <div id='main'>
    <div id='navigation'>Liquid Height and fixed width</div>
    <div id='content'>Liquid height and liquid width</div>
    </div>

    <div id='footer'>Footer with fixed height and 100% width of container</div>

    </div>


    </body>
    </html>

  2. #2
    Join Date
    Sep 2008
    Location
    Seattle, WA
    Posts
    135
    Thanks
    1
    Thanked 11 Times in 11 Posts

    Default

    I don't see any gaps and I tested in FF and IE8.

  3. #3
    Join Date
    Nov 2009
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Hi

    Try setting your document type. For example:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

  4. #4
    Join Date
    Sep 2008
    Posts
    56
    Thanks
    0
    Thanked 6 Times in 6 Posts

    Default

    Hi,

    You have align the text into center in the body tag. That's why the second column content comes in the center. Just align it to left will solve the column spacing problem.

    You have define the float left in your left column but you haven't define the float property in the right column. That will create problem when you adding the content.

    Below is the corrected code.
    ----------------------------------------------------------------------
    <html>
    <head>
    <style>

    html,body { height:100%; margin:0; text-align:center; font:12px arial; }

    #container { width:850px; height:100%; background:yellow; }
    #header { width:100%; height:100px; background:#00aeed; }
    #main { width:100%; height:75%;}
    #navigation {
    float:left;
    width:200px;
    height:100%;
    background:#49bdef;
    clear:right;
    position: relative;
    }
    #content {
    height:100%;
    background:#8dcff4;
    clear:none;
    position: relative;
    margin-left: 200px;
    text-align: left;
    }
    #footer { clear:both; height:27px; background:#d4ecfb; padding:6px; }

    </style>
    </head>
    <body>

    <div id='container'>
    <div id='header'>Header with fixed height and 100% width of the container div</div>

    <div id='main'>
    <div id='navigation'>Liquid Height and fixed width</div>
    <div id='content'>Liquid height and liquid width</div>
    </div>

    <div id='footer'>Footer with fixed height and 100% width of container</div>

    </div>
    ---------------------------------------------------

    Hope this helps,
    Cheers

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
  •