SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Zealot
    Join Date
    Dec 2002
    Posts
    106
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    My [3 equalizing col layout +header +footer]

    I tried to use Paul O'B way which posted here:

    http://www.sitepointforums.com/showthread.php?t=143801

    And actually it is nice way and I got many hints from it , but the only problem with it is that I can't limit the width of the page to be 780px . Every time I resize the browser window the right side goes over the left one and I have to refresh the browser to render the page correctly. My browser is IE 6 SP1 , but may be the problem with my page alignment it is from right to left (dir=rtl) .

    Depending on your help in several questions I asked, I write optimized way to do (3 equalizing col layout +header +footer) at least in my opinion.

    Its works fine with me and fits my requirements, but because I am not an expert it may has some bugs I don't now about it or it could be written on other optimized way . So that your comments are very important to me.

    Kindly check the link:
    http://www.alabduljabbar.net/3columns/index.html


    Thanks to Paul O'B & Gamblingharry and every one help me.



    Barq

  2. #2
    SitePoint Enthusiast Gamblingharry's Avatar
    Join Date
    Apr 2003
    Location
    UK
    Posts
    83
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Changing the container properties like this:
    Code:
    .container{
    	height: 100%;
    	margin: auto;   
    	width: 780px;   /* Page Width*/
    }
    will limit the width to 780px. It should also centre the whole lot, but it wont seem to work on mine for some reason.

    Somebody with more experience should be able to work out why. (I use almost the same layout for my site, and margin: auto; centres the page for me.)

  3. #3
    SitePoint Wizard Dangermouse's Avatar
    Join Date
    Oct 2003
    Posts
    1,024
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    you need to add margin:0 and padding:0 to the body.

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,555
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    HI Barq,

    I'm glad you got some use from my layout

    I'm not sure I understand what you are trying to do?

    If you just want a fixed width of 780px then what gamblingharry said will restrict the width to 780px. The reason margin:auto won't center the layout is because you are working in quirks mode (you haven't got a doctype) so text-align:center in a parent element is needed.

    However if you restrict the layout to 780px then it no longer becomes fluid which seems to defeat the purpose a bit.

    Every time I resize the browser window the right side goes over the left one and I have to refresh the browser to render the page correctly.
    This doesn't happen on my layout (unless the windows very small) it works in ie5, 5.5& 6. Are you talking about a layout that you have tried? -Then you have probably introduced some errors (like not having a doctype dor a start).

    You are not using a doctype so ie6 will be in quirks mode and use the broken box model. Your example does not work in any other browser except ie so you need to decide whether you are going to support them or not before it's too late

    If i've misunderstood the question and you want a fluid page of 100% but you want it to stop when it reaches 780px then you are going to find it difficult. You can use min-width for mozilla browsers but in ie you may have to arrange for some sort of fixed content in the centre to hold the page apart (or use expressions etc).

    Again I think this defeats the purpose of the layout and you may as well just have a fixed width etc.

    Hope that answers some of your questions.

    Paul

  5. #5
    SitePoint Zealot
    Join Date
    Dec 2002
    Posts
    106
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks to you all.

    Actually it may be my bad English language which cause some misunderstood.

    The way that I follow as mentioned above is work with me without any problem and it is easy to resize the width from the container width with no problem.

    But what I am asking for is: is it works on your browsers? especially IE [5, 5.5, 6].

    I got a useful information Paul O'B that I don't know before:

    You are not using a doctype so ie6 will be in quirks mode and use the broken box model. Your example does not work in any other browser except ie so you need to decide whether you are going to support them or not before it's too late
    Actually in Arab countries most of internet users -if not all- are using IE browser because of it Arabic language support.

    But your hint will be useful for me when I plan to design English site.

    Thanks

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,555
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    You might find this link useful for testing. It allows you to load multiple versions of ie (4 , 5, 5.5. & 6) all on the same machine.

    http://www.skyzyx.com/archives/000094.php

    It's great for testing layouts and saves a lot of messing around with different computers etc .

    Paul


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
  •