Making a fixed width site...a fluid site

Get Started
1

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.

Thank you,
Kim

2

Probably not. You likely have to redesign from the ground up unless your html was written in a viewport neutral manner.

I currently maintain, as a volunteer, a site designed by someone else to be fixed width, and much as I would like to make it flexible I have decided it will be a lot easier to redesign it from the ground up than to make it flexible on the current code base. As I am too lazy to redesign it will stay the way it is for the forseeable future, alas.

3

Do you have a link to a live site? or at least some HTML and CSS code that we can help you with?

Most times, people use width: 100% for html, and for body, and then may make a wrapper inside of that that is fixed width (commonly 960px).

There are obviously other ways to do this, but using % should get rid of MOST issues.

4

I do have a live site, it is
www.ramcoi.com/optextest

username: optex
password: testing

Thank you for all your help

5

You should make body width: auto, and wrap width: 1024px.

This still gives you a small sidebar, which probably is because of your table based layout (just say no!), an easy fix (which shouldn’t be permanent) would be to add overflow-x hidden to html tag, but this will only work in modern browsers (IE9, Chrome, Safari, Firefox) because it’s CSS3.

You should also move all of your CSS from inline styles to an external stylesheet, as well as employ a CSS reset.

6

Thank you for your help. I hate table-based layouts as well, but I am a little rusty on my coding :slight_smile: I am a graphic designer by trade. Web is not my forte. I made the width auto and the wrap 1024, but now my page is not centered within the browser :frowning:

Also, I am not sure what a CSS reset is :slight_smile:

Thank you so much for all your help.

7

make sure to also add margin: 0 auto on the wrap to center it.

8

Thank you so much :slight_smile:

9

No problem. If I get a chunk of free time I will try to get a better fix for you.

I would definitely google: CSS reset, and just basic CSS and float based layouts.