Layout Problems (Div beginner)

deno · 08-02-2008, 03:13 PM

Hi all

I'm trying to get my head around using DIV tags to layout my pages so I can move away from using frames.

What i'm trying to do is get a layout like this:

http://www.gep.co.uk/iq/test08/index3.html

Where my boxes are aligned as such and always resize to be centered in the screen.

But when i'm using DIV I get the following:

http://www.gep.co.uk/iq/test08/index.html

As I said, i'm new to this and should probably start reading up on it a little so if anyone has any good resources I could check out that would really be appreciated.

Thanks

Dene

deno · 08-02-2008, 04:04 PM

I have a perfect example of what i'm hoping to achieve:

http://www.feederweb.com/

Thanks

Dene

Havox · 08-02-2008, 04:47 PM

Alright for this you'll have to put your entire page in a wrapper div.

The HTML should look something like.

HTML Code:

<body>
<div id="page_wrapper">SITE CONTENT GOES HERE.</div>
</body>

And your CSS is going to look like

Code:

#page_wrapper     { width:300px; margin-left: auto; margin-right: auto; }

You want to set a width for your wrapper div, which would be the width of your site. And then the margin-left: auto; and margin-right: auto; center it for you. Hope this helps.

deno · 08-02-2008, 04:50 PM

Yeah, that makes lots of sense, i'll give it a go.

Thank you!!!

Dene

smashwebs · 08-04-2008, 06:28 PM

Quote:

Originally Posted by Havox

Alright for this you'll have to put your entire page in a wrapper div.

The HTML should look something like.

HTML Code:

<body>
<div id="page_wrapper">SITE CONTENT GOES HERE.</div>
</body>

And your CSS is going to look like

Code:

#page_wrapper     { width:300px; margin-left: auto; margin-right: auto; }

You want to set a width for your wrapper div, which would be the width of your site. And then the margin-left: auto; and margin-right: auto; center it for you. Hope this helps.

+1....that should center it for you!

08-02-2008, 03:13 PM	#1 (permalink)
deno New Member Join Date: Aug 2008 Posts: 5	Layout Problems (Div beginner) Hi all I'm trying to get my head around using DIV tags to layout my pages so I can move away from using frames. What i'm trying to do is get a layout like this: http://www.gep.co.uk/iq/test08/index3.html Where my boxes are aligned as such and always resize to be centered in the screen. But when i'm using DIV I get the following: http://www.gep.co.uk/iq/test08/index.html As I said, i'm new to this and should probably start reading up on it a little so if anyone has any good resources I could check out that would really be appreciated. Thanks Dene

08-02-2008, 04:47 PM	#3 (permalink)
Havox New Member Join Date: Jul 2008 Posts: 17	Alright for this you'll have to put your entire page in a wrapper div. The HTML should look something like. HTML Code: <body> <div id="page_wrapper">SITE CONTENT GOES HERE.</div> </body> And your CSS is going to look like Code: #page_wrapper { width:300px; margin-left: auto; margin-right: auto; } You want to set a width for your wrapper div, which would be the width of your site. And then the margin-left: auto; and margin-right: auto; center it for you. Hope this helps.

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

08-02-2008, 04:04 PM	#2 (permalink)
deno New Member Join Date: Aug 2008 Posts: 5	I have a perfect example of what i'm hoping to achieve: http://www.feederweb.com/ Thanks Dene

08-02-2008, 04:50 PM	#4 (permalink)
deno New Member Join Date: Aug 2008 Posts: 5	Yeah, that makes lots of sense, i'll give it a go. Thank you!!! Dene