PDA

View Full Version : Need help with my sites fixed div positioning layout.


aquamat
12-17-2010, 12:08 PM
Hi there,

I have created a new site at http://www.matthewdthornton.com/Biography.html but as you can probably tell, the layout is all messed up, especailly when you reduce the browser size, as the site never centers.
I currently have all the css 'inline' so you can see all the code.
What i am trying to do is make the main frame of the site fixed, so the header, footer, and side bars stay fixed, and only the text moves in the middle. The only way I can think how to do this is what I have done, but that means the site never centers, and looks awfull if viewed on a small or large screen.
Hopefully someone can suggest something as i like the idea of the design, just don't know how to make it work.

Thanks for your help in advance.

Matt

Corrosive
12-17-2010, 12:38 PM
Hi Matt

Take the fixed positioning out of the divs and use natural or relative positioning. Then you can use the overflow CSS rule to make your middle content scroll as you need to. That's the only way I can think of doing it.

aquamat
12-17-2010, 12:47 PM
Hi Corrosive,
Thanks for the help, i will have a go at that; it does sound like it will work.

Cheers

Matt

Corrosive
12-17-2010, 12:50 PM
No problem. Whilst you are doing it look at methods for styling scrollbars because the default ones (particularly on Windows) can be a bit intrusive/ugly in a design.

aquamat
12-17-2010, 09:48 PM
Hi Corrosive,

I have had a go at the new styling, and i put up an example page:

http://www.matthewdthornton.com/example.html

There are a few things i still need to do. Firstly, is there a way to make the content div only the size of the browser? Because at the moment, its set to 400px height, so that makes the scroll bar on the far right.
Also, when thats sorted, can i make the scroll bar for the content move over so it is where the scroll bar usually is (where the main page scroll bar currently is)?

Hope that makes sense, as at the moment, there are two scroll bars rather than one...and the one i want is in the wrong place :)

Cheers again

Matt

Corrosive
12-18-2010, 06:54 AM
Firstly, is there a way to make the content div only the size of the browser? Because at the moment, its set to 400px height, so that makes the scroll bar on the far right.

That is a hard thing to judge. Basically on my Chrome browser it does all fit so no scrollbar but, if you use IE for instance, there is usually lost of options for toolbars etc that make the viewport smaller. Not sure you'll ever get it perfect for all.

Also, when thats sorted, can i make the scroll bar for the content move over so it is where the scroll bar usually is (where the main page scroll bar currently is)?

Hope that makes sense, as at the moment, there are two scroll bars rather than one...and the one i want is in the wrong place :)

Not sure, I know what you mean but have never done it myself. Just keep experimenting and Googling to see if you can. If you find out then come back with the answer cos I'd like to know :)

aquamat
12-18-2010, 09:01 AM
Hi Corrosive,

I think i have done it!!!
Page at: http://www.matthewdthornton.com/example.html

Basically what I did, was follow you advice on making everything relative, then gradually make all the elements i needed fixed, but keeping the body and container relative. It seems to work on firefox and IE, although when you make the screen very narrow, the text is still the only thing that moves so if there is anything i can do to fix that, that would help.
Other than that, i just need to add a background. I have left the css inline so you can still see it.
Thanks for your help.
Matt

Corrosive
12-18-2010, 09:16 AM
Looks like that works well. Good skills :)