SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Aug 2006
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Hlp me with fluid 2col any order source

    I have struggled with a 2 col any order source, after the model of onetruelayout. The layout works in IE 6.x and FF 1.6.
    View my site

    Both divs are floated left inside pw and wrapper divs.

    You will see the markup and the css there.
    I have been told by css gurus to change the width of the leftnav from width: 21% to a fixed width of 200px.

    However, what value should I then put in the width for the content div if I make the width of the leftnav fixed rather then fluid? Don't know if this makes sense but my overall goal is to keep the anyorder source, and the fluid layout. However as the leftnav will contain only navigation that div could work in a fixed width. But I am not sure how I can get the content to use the rest of the space available inside the pw div if I change the leftnav width.

    1: How can I keep the layout fluid, yet have a fixed width of 200px on the leftnav? (Look to bottom of post to see if my assumptions are correct)

    2: Will changing these values affect the margin-left, and if so what values will I need to give each left-margin after changing width?

    3: Also if people could be so kind to look at the site with other browsers then IE 5.x / 6.x and FF 1.5 / 1.6 to see if they spot any erors I would be very happy.

    4: The whitespace between the divs are made of white borders. I have given them a width of .3em. Will the .3em (width of border) reflect the font-size in css or font-size in users browser? What I am getting at is that I wonder if .3 em is a given width like one can say about px or a fluid width like precentage, or is it other things the come to play when a browser will render page? So should I stick to em or use px? Pls tell me if the are known problems doing it like this.

    What I assume will work:
    Code:
    #content{
    float: left;
    /*width:79.5%;*/Will browsers set width correct themself?
    margin-left: 204px;
    background-color: #A0AFCB;
    border-left: .3em #fff solid;}
    Code:
    #leftnav{
    float: left;
    width: 200px;
    margin-left: -100.3%;
    background-color: #b7c9e9;}
    I have checked my markup, and it is valid

    Thankfull for all help

  2. #2
    SitePoint Member
    Join Date
    Aug 2006
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thx for the help, this is great!

    I tried to look into the css to apply some padding to the text in #incontent, but I saw then it was already there:

    #incontent{
    padding:1em .8em 2em 1em;
    background-color: #A0AFCB;}
    But even if the padding is allready there it does not show up in FF or IE. How do I make that happend? There must be another setting that is "over-riding" the values for the #incontent div in the css?

    The inleftnav seems to work perfectly, it gives a white border, and yet the incontent padding does not work. Strange.

    Otherwise thx, this is excactly what I was looking for. Thx for taking the time to help me out.

  3. #3
    SitePoint Member
    Join Date
    Aug 2006
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by all4nerds
    Hello

    ?

    I have set all default paddings and margins to 0
    *{padding:0;margin:0;}

    you now have to adjust them to your needs ?

    Also all content in container content needs a right margin as wide as the left float
    Yes I see that now, but still the inleftnav shows up with padding. Do not understand.

    I thought it was safest to apply padding to inner divs rather then the divs that control layout. So the default padding/margin should be overcome when I set another value directly for a div?

  4. #4
    SitePoint Member
    Join Date
    Aug 2006
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thx for the help, it was great.
    Now I got it working.

  5. #5
    SitePoint Member
    Join Date
    Aug 2006
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thx for all your help, amazing. This works wonderfull on all browsers I have had the chance to test so far. Even in Mac it renders nicely. Will do some more testing with odd browsers like
    older opera and some linux browsers tomorrow. Hopefully the results will be just as uplifting. ;-)

    I am now going to make a 3column based on your post as well, but that is for later this week.

    Btw, I enjoyed your onecol-3colum mouseover. Neet.


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
  •