6 {{ upvoteCount | shortNum }}
6 {{ upvoteCount | shortNum }}

Making a fixed width site...a fluid site

by luxifia
5 replies
  • WEB DESIGN
    • |
Hello,
I have completely finished coding a site, but I am getting a scroll bar at the bottom. Is there an easy fix to make resize per the user's screen? Right now it is set up to be 1024px wide. Not sure what I should do. Any help is greatly appreciated.
#fixed #fluid #making #site #sitea #width
  • Profile picture of the author andrejvasso
    Stop making new threads but answer to your old ones if its almost the same topic

    If your layout is not too complex, it shouldnt be a huge problem to set the width from 1020px to 90% or 100% (do not forget about margin:auto if you want the site to appear in the middle of the screen). However, you should know that you might also have to change the width for all elements inside yur main div, which can be a bit complex, if your site has no nice and clean code and is not commented well.

    p.s. post a link to your site
    {{ DiscussionBoard.errors[3877279].message }}
  • Profile picture of the author Mkj
    Fluid width sites can be a bit of a pain to be honest - well in my opinion. Very hard to code a site so that it looks good at 800px width AND say 1600px width. I find the best compromise is to code the site for 1024 browser width and leave it at that. Scroll bars will appear for 800x600 viewers but not many surfers use such a resolution now. Above 1024 the site will still look ok. A maximum width for 1024 width screen is around 960px so that the scroll bars do not appear. Experiment with your design until the scroll bars disappear.
    {{ DiscussionBoard.errors[3877298].message }}
    • Profile picture of the author andrejvasso
      Originally Posted by Mkj View Post

      Fluid width sites can be a bit of a pain to be honest - well in my opinion. Very hard to code a site so that it looks good at 800px width AND say 1600px width. I find the best compromise is to code the site for 1024 browser width and leave it at that. Scroll bars will appear for 800x600 viewers but not many surfers use such a resolution now. Above 1024 the site will still look ok. A maximum width for 1024 width screen is around 960px so that the scroll bars do not appear. Experiment with your design until the scroll bars disappear.
      Exactly. Mkj gave you a wonderful advice: the magical 960px width As I have already said, making a fluid website can be a pain in the ass if you dont have some experience with it. And for a fixed width, the only true number is 960 (at least for now - will ofc change in the future)
      {{ DiscussionBoard.errors[3877347].message }}
  • Profile picture of the author xtrapunch
    Fluid layout might not be the best option. If someone has a wide screen, the text may run too long in each row. It will make reading difficult in this case. There can be issues with placement and optimization of ads.
    Signature
    >> Web Design, Wordpress & SEO - XtraPunch.com <<
    Web Design & SEO Agency | Serving World Wide from New Delhi, India

    {{ DiscussionBoard.errors[3877906].message }}
    • Profile picture of the author ronc0011
      When building a fluid site you need to set a "wrapper" div that holds everything and float it. Then all your other divs, header, leftColumn, middleColumn etc should also be floated when using floats all widths must be set in "%" you can set min-width in px. You must also allow for any margins, padding, and borders. Using a min-width value on the "wrapper" or "header" div can stop the window from shrinking too far and causing the divs to stack. After that it's just a matter of tweaking the values to get rid of the scroll bar at the bottom.

      To stop the text from spreading all the way across the screen or div you can set a width value on your "p" tags.

      I build everything in a fluid layout. Or I should say I used to build everything in a fluid layout. Not so much since I started using Wordpress. It's not really an issue.
      {{ DiscussionBoard.errors[3878238].message }}

Trending Topics