Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 4 of 4
  1. #1
    Junior Member
    Join Date
    Feb 2009
    Posts
    3
    Member #
    18419
    Hi,

    I have only just begun web design (I started 5 weeks ago in a degree module) and have been trying to follow good practice and use a CSS layout. The differences between browsers have been difficult but until now I have found a way round them. Any help/advice would be appreciated.

    I have been following the CSS fluid layout approach and thought I had it working in both Firefox and IE (with a small min/max width fix for IE). It seems though that once I started to add content into my two side columns that something went wrong.

    I have tried to remove all the content and go back to basics, but it always shows the same error in IE, the right column gets booted off the right side, and moves down below. The widths are all % based, and add up correctly, as firefox shows, so I am at a loss as to what is causing it. I spent the whole of yesterday and most of the night, attempting to fix it. With no luck at all.

    Here is a link to the website: http://booker.x10hosting.com/

    I have attached my .htm and .css file, in the hope someone could see something I have missed. I will be eternally grateful to anyone who can help me out!

    *fixed* I found an article by chance, detailing how when you float two objects the same direction IE automatically adds a 3 pixel gap, which is why my fluid widths in % never quite added up when it seemed they should.

    The fix is to make a seperate container div for the left column and content box, float one left and one right inside this, so there is no forced 3px gap. Then float the seperate container left and the right column right. This now works perfectly with % widths.

    This is the article that helped me: http://www.kingcosmonaut.de/journal/3col-layout/

    I hope this helps someone else too! Thank you for your help and suggestions guys. It is much appreciated!

  2.  

  3. #2
    WDF Staff smoseley's Avatar
    Join Date
    Mar 2003
    Location
    Boston, MA
    Posts
    9,729
    Member #
    819
    Liked
    205 times
    The problem you're experiencing is due to IE's incorrect treatment of the CSS box model. http://en.wikipedia.org/wiki/File:W3...box_models.png

    What you should doto create a multicolumn liquid layout is something on the order of this (notice the separation of padding and margin styles into two nested divs):

    HTML Code:
    <style>
        #wrapper {
            width: 100%;
        }
        .column {
            width: 200px;
            margin: 0 20px;
        }
        .left {
            float: left;
        }
        .right {
            float: right
        }
        .content {
            padding: 20px;
        }
    </style>
    
    <div id="wrapper">
        <div class="left column">
            <div class="content">
                <h3>Left Column</h3>
            </div>
        </div>
        <div id="main">
            <div class="content">
                <h1>Center Column</h1>
            </div>
        </div>
        <div class="right column">
            <div class="content">
                <h3>Right Column</h3>
            </div>
        </div>
    <div>

  4. #3
    Senior Member
    Join Date
    Jun 2005
    Location
    Atlanta, GA
    Posts
    4,146
    Member #
    10263
    Liked
    1 times
    Also I'm pretty sure IE treats the box model correctly, or at least `more correctly' if you have a doctype to take it out of quirks mode. Before rearranging anything, try putting:

    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    At the very top of your page and see if that helps.

  5. #4
    Junior Member
    Join Date
    Feb 2009
    Posts
    3
    Member #
    18419
    Thank you Shadowfiend and smoseley. I added the doctype in and IE now correctly centers the boxes.

    I think I understand where I might be comming afoul by what you said smoseley. I will have a play and let you know how it goes.

    Thank you both for the suggestions!


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 07:27 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com