CSS layout HELP!!

rockable · #1 Aug 27th, 2005, 23:01

I am trying to layout my site with CSS, and have managed to get the layout spot on. However, I've realised, as i've set each DIV as position absolute, I can't centre the whole page. I've tried taking off all the position absolute settings, but layout goes to pot.

I want to keep the contentmiddle (body text) section at the top of the body text to help with SEO, but can't work out a way to do this without using position absolute.

any ideas????

Thank you in advance

Dave

The site is: www.winstonsweb.co.uk/div but is totally far from finished!

jpmitchell · #2 Aug 28th, 2005, 05:09

I am not really the best person to help you out as I am just learning CSS myself. So I will let the CSS experts help you solve your problem

However with that said, I have a few suggestions and things I have picked up regarding CSS lately:
- absolute positioning is not good, use rarely
- make sure your site is cross-browser compatible (looks like it looks good in IE, but a few things are off in FireFox)

Good luck, and I can't wait to see how to fix it so I can learn too !

D3mon · #3 Aug 28th, 2005, 09:00

As a long-shot, try adding to your CSS:

#center { position:relative; margin:auto } and removing the (deprecated) <div align="center"> tag from your code.

All your Absolute measurements should then be relative to the parent container (#center) which means everything moves over to the middle nicely.

Absolute/Relative positioning is an 'ideal' that the browsers have yet to catch up to, So I'd repeat the advise given and stick to using Floats for the duration.

RaptorRex · #4 Aug 28th, 2005, 12:43

If I understand your question correctly, I just wrote about this for a how-to I'm putting on my website...so I pasted it below. Notice that there is no position attibute and it works in IE and FF.

* Set text-align: center for the <body>. This code will center all page content.
* Place your page text in a <div> that will be the main section for all your page content
* Set the following styles for the main <div>
o width: 720px - set the size as appropriate for your page
o margin-left: auto; - <div> wants to be centered, so let the browser do it automatically
o maring-right: auto; - <div> wants to be centered, so let the browser do it automatically
o text-align: left; - now set the text to be left aligned within the main <div> block

That should do it. I use it on everything I do.

D3mon · #5 Aug 28th, 2005, 13:29

Hey RaptorRex, don't forget that;

margin-left:auto
margin-right:auto

can be shortened to;

margin:auto

- much quicker to write and less to send to the client.

if you want to add a top and bottom margin of say, 10px write it like:

margin: 10px auto

elliothere · #6 Sep 2nd, 2005, 00:32

This should do the trick:

Code: Select all

body {
text-align: center;
}

div#pagewidth {
position: relative;
margin: 0 auto;
text-align: left;
}

ncrider88 · #7 Sep 5th, 2005, 07:42

Interesting, i had the same problem. Great fixes guys.

RaptorRex · #8 Sep 6th, 2005, 04:16

I should have included this in my original post. Here are the details on setting margins:

http://www.w3.org/TR/CSS1#margin

abhi007 · #9 Sep 22nd, 2005, 07:19

remove align = "center" from your tag.

dont use absolute ,

and use #center { position:relative; margin:auto } in your css.

THis may help you.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
CSS layout	casho	Web Page Design	4	Feb 10th, 2008 13:59
Layout using CSS	Madball	Web Page Design	5	Nov 7th, 2007 09:41
New to CSS Layout	tapster	Web Page Design	15	Oct 15th, 2007 10:18
Fluid layout - IE6 clichés the layout when resizing	cyberseed	Web Page Design	7	Jun 16th, 2007 05:14
What makes a layout a good layout?	Miles Lombardi	Graphics and 3D	4	Jul 26th, 2005 03:22

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
CSS layout HELP!!