www.webdeveloper.com
Results 1 to 4 of 4

Thread: 3 column layout teaser

  1. #1
    Join Date
    Mar 2004
    Posts
    4

    Question 3 column layout teaser

    Hi

    Thanks for all the help on my previous question but now I am being baffled by another problem.

    If you look here you will see I am trying to create a page with a header, 3 columns and then a footer

    http://www.d-media.co.uk/demo/index.htm

    ...but the righthand column is sliding to the left, under the centre column until it hits the lefthand one.

    Now the annoying thing is I have got the three column layout on its own to work fine and just as I want*

    http://www.d-media.co.uk/demo/3colTest.htm

    I can't work out why in the first page it now wants to slide left.

    The stylesheet for all this is here

    http://www.d-media.co.uk/demo/siteSyles.css

    * this is all looking at the pages in IE6 - due to the nature of the final site (an intranet) the client has specifically stated that other browsers are not a concern - bad I know but they're the ones paying

    Any help greatly appreciated

  2. #2
    Join Date
    Oct 2003
    Posts
    235
    either reduce the width on .righthandColumn or float it right. although floating it right will keep it below the main content container until you reduce the width to make room for it to fit in the space to the right.

  3. #3
    Join Date
    Mar 2004
    Posts
    4
    OK - completely removing a width declaration for the righthand column seems to work. I don't get why though.

    The three columns widths are set to be 60% + 22% + 18% which = 100% so how can it be too wide??

    And why does it work in the first example but not the 2nd?

    Explanations greatly appreciated as always.

    Cheers

  4. #4
    Join Date
    Feb 2004
    Location
    Middlesbrough Country: England
    Posts
    150
    You need to wrap the 3 columns in another layer with a width of 100% and make sure the borders are set to none and padding and margins are set to 0 for the wrapping layer.

    PHP Code:
    +-------------------------+
    | +-----+ +-----+ +-----+ |
    | |     | |     | |     | |
    | +-----+ +-----+ +-----+ |
    +-------------------------+ 

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles