[SOLVED] Centering Layout

[Warptweet]

I have a div that I need to center on the web page horizontal-wise.

I tried float: center; and other things, but none of them are "perfect", and cause differences in other browsers/modems such as widescreens, smallscreens, firefox, IE, it's a total incompatibility issue.

 

Is there a sure-fire way I can center a div that works on all modem screens and internet browsers horizontal-wise?

[MasterACE14]

This is the same thing that annoys me 

 

have you tried?

body { text-align: center; }

 

 

Regards ACE

[cmgmyr]

no, don't use that.

 

use:

#page_wrapper{
margin:0px auto;
width:800px;
}

...just change the width to whatever you need.

[Warptweet]

Thanks.

MasterACE14, your code wasn't what I meant. I could easily center the text using <center></center>, but cmgmyr, your code works, thanks =)

[MasterACE14]

awesome, i can use that code on my website too now 

 

cheers.

[Warptweet]

Alright... new question...

 

I have two divs now.

I place them on my website... the first <div> appears ABOVE the second <div>.

 

How can I make the divs BESIDE each other, connecting?

[MasterACE14]

you mean 2 columns?

 

for the first one set this inside it:

float: left;

 

and the other one:

float: right;

 

that will create the 2 columns, 1 div is the left column, and the other is the right.

 

Regards ACE

[Warptweet]

That overrides the code that horizontally centers my div.

 

Thanks for trying, anyone else know how I can make them side-by-side?

[Aureole]

Set a parent div, for the sake of example make it width:200px; height:100px; margin:0 auto;

 

Make two more divs inside it and each needs to be float:left; width:100px; height:50px; ... that will work.

[Warptweet]

Sorry, doesn't work.

Look here....

 

www.warptweet.com/ultimate

www.warptweet.com/ultimate/style.css

 

Thats the page, and the style.css sheet.

[Aureole]

There isn't even any float:left; in your CSS.  ???

[cmgmyr]

#wrapper{
width:400px;
margin:0px auto;
}

#div1{
width:200px;
float:left;
}

#div2{
width:200px;
float:left;
}

 

<div id="wrapper">
<div id="div1">Something here</div>
<div id="div2">Something else here</div>
</div>

[Warptweet]

Doesn't work  ???

 

www.warptweet.com/ultimate

[bronzemonkey]

It's because your container div's width is set to 100%, i.e., the complete width of the browser window. You need to change the width of the container element as Aureole suggested. Read some css tutorials at w3cschools.