Centering A Div without having to center the content in it

	Centering A Div - without having to center the content in it
	Discussion by MediYama with 19 Replies. Last Update: September 6, 2007, 9:16 pm (View Latest)	Page 1 of 2 pages.

MediYama

I'm now rebuilding my website, and I have come against a problem of which I don't know how to fix it. I am using div tags (of course) but what I want to know is how to center the site, without having the text layout centered. Does anyone know how? I have not found any solutions yet. Thanks in advance.

MediYama

Sun Jul 15, 2007 Reply New Discussion

Sten

ummm...

"nice share" u arent even reading wot ppl write sirat.

i have my whole site centered just with center tags.

but, everything else is in table inside tables inside tables so it doesnt affect them.
but, if u want to center your site like that, u could use margins? the same on both side.

Sun Jul 15, 2007 Reply New Discussion

MediYama

Sten, when I use center tags,

All the text is also centered like this, which I don't want

I want the site to be centered (the background, the boxes) but the text to just be slammed to the left side.

Sun Jul 15, 2007 Reply New Discussion

Sten

Like i said, margins

it will put it all in the middle if you make the left and right margins the same.

Sun Jul 15, 2007 Reply New Discussion

MediYama

Alright, I'll try. Thanks.

Edit: It does what it's supposed to do, but it makes a problem with different resolutions... Any other solution?

Another edit: Solved my problem, thanks anyway!

Sun Jul 15, 2007 Reply New Discussion

.:Brian:.

just use css to set the left and right margin to auto, and you'll be able to center your div (assuming you also have a width set for the div).

An example would be:

CODE

<div id="content" style="width: 745px; margin-left: auto; margin-right: auto;">the content here</div>

So if centering your site, you would put your website inside of that.

Hope this helps, if it doesn't I would recommend posting a link to either your website, or an example of an attempt at what you are doing, so we can take a look at the code, and provide more specific help.

Sun Jul 15, 2007 Reply New Discussion

TavoxPeru

QUOTE (MediYama)

If you want to center horizontally your div or any other block element you can use achieve this with:

CODE

<div style="width:10em;margin:0 auto">div content</div>

Best regards,

Mon Jul 16, 2007 Reply New Discussion

MediYama

Well I fixed it already, using margin: 0 auto; in the css file.

Mon Jul 16, 2007 Reply New Discussion

Sten

oh yeah, woops, forgot to say!

margins dont work too well in other resolutions. i had that problem once when i was making a website for school for an assignment or something.

anyway, u fixed it and thats wot counts

Mon Jul 16, 2007 Reply New Discussion

.:Brian:.

auto margins will work fine in other resolutions....it is when you have margins set so that they are not auto or not percentage values that you run into problems.

Mon Jul 16, 2007 Reply New Discussion

pyost

What was mentioned above is the best solution to the problem, but it doesn't work in all browsers - to be more precise, it doesn't work in Internet Explorer. In order to overcome this, you must have a div with text-align: center around the div you want to center. Using only this wouldn't work in Firefox or Opera, but Internet Explorer has no problem with it. However, this would make the text in the main div centered, so you have to use text-align: left in that one

Tue Jul 17, 2007 Reply New Discussion

Sten

One thing i REALLY hate is hoe everything works in firefox but not internet explorer.
its really annoying, especially on my site, i have about 10 tables inside eachother just to make it work in internet explorer.
Firefox actually like knows what people want (well the rendering engine does anyway) but internet explorer... doesnt.

Tue Jul 17, 2007 Reply New Discussion

TavoxPeru

QUOTE (Sten)

It is because internet explorer do not support completely the W3C standards as the others browsers do, as far i know the browser that supports almost completely the standards is Opera following by the Gecko browsers like Firefox.

Best regards,

Tue Jul 17, 2007 Reply New Discussion

pyost

It is (almost) always possible to create such code that will behave the same in both Internet Explorer and Firefox. What's more, when these two display the same thing, you can count on Opera doing so, too. When I am coding a HTML/CSS template, I use Firefox for preview, only. When I am completely satisfied with the outcome, I turn to tweaking the code for other browsers. For beginners, this will probably be a useless method, but once you learn how Internet Explorer deals with different code, you will start avoiding automatically, which will leave little to be altered when you fire up Internet Explorer

Thu Jul 19, 2007 Reply New Discussion

Sten

My brother uses Opera on his tv.

some things dont work on it. the main problem i found is that with multiple iframes on the site, even if you use names and target a link to a particular iframe, it will just show it in the first iframe on the site.

thats wot i hate about opera.

Thu Jul 19, 2007 Reply New Discussion