SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member aliceslipped's Avatar
    Join Date
    Dec 2008
    Location
    Massillon, OH
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Need Help With Fluid Layout/Floats

    Okay, so I am making a really simple website and I want it to be fluid. The person I am making it for wants it to be three column. I am having some serious issues, though, and it's driving me crazy.

    I originally used percentages. Well, then I made the search bar and if it got too small it looked weird, so I just gave it a fixed width. I figured if the right sidebar had a fixed width, I could make the left sidebar and the main content div be fluid. I originally just gave them a % width, and a min and max width using px.

    My computer has a 1280x800 resolution and it still only looks fine if my browser is all the way open. If I move one of the sides just a little to make the browser window small, the center div disappears. I had this problem at first with the right sidebar, but I moved it to the top of the html document, before my left floats and it stayed, but now the center one disappears.

    This is only partially finished, so most links don't work, the search bar doesn't work yet, content is not done, etc. I just want to get the initial layout done!
    Does anyone know what I can do to fix this? I am tempted to just give in and make it fixed width.

    Also, the person I am making it for uses a smaller resolution and IE6, so it needs to look good for that, too! I am going crazy trying to figure this out, and I don't want to move on with the site (which I said I'd have done next Friday) until it's fixed; of course, my go-to person for CSS help is on vacation...can anyone help?

    I uploaded the site here:
    http://kumori.zettozonbi.com/webdesi...therIndex.html
    (web development) blogging:
    never before have so many people had so little to say to so few
    {Lindsey Campbell
    ; Web Design & Development; SEO; Awesome;}

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,338
    Mentioned
    465 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by aliceslipped View Post
    If I move one of the sides just a little to make the browser window small, the center div disappears.
    No, it just drops down. There are better ways to structure this, though three-column fluid layouts (with fixed sides) are not so easy with CSS. Here are some nice examples, though:

    http://www.alistapart.com/articles/negativemargins/
    http://www.pmob.co.uk/temp/min-max-3col.htm

    http://www.alistapart.com/articles/holygrail/
    http://www.alistapart.com/d/holygrail/example_1.html

    http://www.savio.no/examples/three-column-layout-7.asp
    http://www.pmob.co.uk/temp/3colfixedtest_sourcenone.htm
    http://ago.tanfa.co.uk/css/layouts/c...ayout-ap1.html

  3. #3
    SitePoint Member aliceslipped's Avatar
    Join Date
    Dec 2008
    Location
    Massillon, OH
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yeah, by "disappears" I meant fell down, I just worded it wrong.

    And thanks, I will look at those.
    (web development) blogging:
    never before have so many people had so little to say to so few
    {Lindsey Campbell
    ; Web Design & Development; SEO; Awesome;}

  4. #4
    SitePoint Member aliceslipped's Avatar
    Join Date
    Dec 2008
    Location
    Massillon, OH
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I wanted to say thanks, again. That article from A List Apart was just what I needed.
    (web development) blogging:
    never before have so many people had so little to say to so few
    {Lindsey Campbell
    ; Web Design & Development; SEO; Awesome;}

  5. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,338
    Mentioned
    465 Post(s)
    Tagged
    8 Thread(s)
    Great!


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
  •