Centering a webpage

**pritmadlani** · 03-30-2008, 07:04 PM

Hi,

I am building a website and would like to make it liquid. The website address is:

http://www.cse.dmu.ac.uk/~p04283218/mainframe9/

Can anyone point me in the right direction as to how I would do this please.

Thanks.

**joder** · 03-30-2008, 07:55 PM

Hope this is what you are looking for
http://matthewjamestaylor.com/blog/p...-left-menu.htm

If not, let me know and I will try to find what you are looking for.

**pritmadlani** · 03-30-2008, 09:29 PM

Thank you for your reply - I will definitely try that coding tomorrow. If it doesn't work - I will get back to you.

Thanks again - appreciate it.

**larry007** · 03-31-2008, 08:24 AM

To center a website, u should use cellpadding or The margin button in the page properties. it should probably be the solution to the problem.

**LadynRed** · 03-31-2008, 09:42 AM

Or maybe you should try READING THE STICKIES ??
http://www.webmaster-talk.com/css-fo...r-website.html

**yangyang** · 03-31-2008, 10:54 AM

How about this:

HTML:
<div id="wrapper">
</div>
CSS:
body {
text-align:center;
}
#wrapper {
text-align:left;
margin:0 auto;
width:100%;
}

**wayfarer07** · 01:25 PM

I fell asleep one night after doing coding, and woke up dreaming about centered, flexible, rounded corner wrapper windows, that could hold multiple items. Here is what I came up with: http://wayfarerweb.com/mockups/ebay_ui/ You are free to study my layout, if you wish. I believe there is one less layer of extra markup than is normally required for these type of layouts. I'm sure this is more extensive than what you need, but it is still an interesting study

**joder** · 03-31-2008, 01:35 PM

A fluid layout is more than centering.

Lackofheart: No good using deprecated tags and CSS is for layout.

**JamesStern** · 03-31-2008, 04:40 PM

place everythign insde of a container DIV, specifiy it's width to 100%; or even easier Display: Block;

follow this with placing margin attributes in the body tag something like

Code:

<body><div id="container">website layout and content</div></body>

Code:

body { margin: 20px 15px 10px 15px; }
#container { display: block; width: 100%; }

**LadynRed** · 03-31-2008, 09:11 PM

Quote:

place everythign insde of a container DIV, specifiy it's width to 100%; or even easier Display: Block;

There is no point in setting display:block, a div IS a already a block-level element !

The width 100% isn't really necessary either, since the div will take up ALL the width if you don't specify something less than 100%.

**wayfarer07** · 04-01-2008, 12:46 AM

Quote:

There is no point in setting display:block, a div IS a already a block-level element !

lol...

**vectorialpx** · 05:41 AM

in it's initial form, the div is a block element but it can be set as display:inline

and display:block is just an assurance that it will be SURE a block. But, why 100%?

to center a div I make something like this :

.main_div {
width:980px; margin:0 auto; background-color:#09f; /*

*/
}

edit // a fluid layout means you don't need a div... the entire page is yours but... this is not to nice for the design. You can use floats for columns

**joder** · 04-01-2008, 10:48 AM

Quote:

Originally Posted by vectorialpx

edit // a fluid layout means you don't need a div... the entire page is yours but... this is not to nice for the design. You can use floats for columns

That is incorrect. A fluid layout is one that doesn't used fixed width. They resize with the browser or window size.

**wayfarer07** · 04-01-2008, 12:56 PM

Here is an example of a a liquid (or fluid) layout: http://www.ojos-de-dios.com. Resize your browser's window to see how it reacts. Liquid layouts have a reputation for being somewhat more difficult than fix-width layouts, and suffer from some limitations, mainly IE6's lack of support for the min-width property. However, they are still very useful.

Centering a liquid layout is mostly the same as centering one of fixed-width.

May we move on to the next subject?

**LadynRed** · 04-01-2008, 02:17 PM

Quote:

in it's initial form, the div is a block element but it can be set as display:inline

and display:block is just an assurance that it will be SURE a block.

If there is nothing in the CSS to set it to an inline element, then setting it to display:block is just extraneous and unnecessary code.

**vectorialpx** · 04-01-2008, 07:20 PM

Quote:

is just extraneous and unnecessary code.

yes... I must agree

but it is nothing incorrect...

**LadynRed** · 04-02-2008, 10:24 AM

I didn't say it was incorrect, I said it was POINTLESS, and also NOT the solution to the OP's problem.