I have 4 layout DIVs, I want them to be in the centre of the page horizontally, but I cant work out how to do it.<br />
<br />
I attached a diagram of what the DIVs look like<!--content-->You'll have to use css positioning.<br />
<br />
<style type="text/css"><br />
<!--<br />
.left{<br />
position:absolute;<br />
left:0px;<br />
top:auto;<br />
margin:0px;<br />
width:30px<br />
}<br />
.right{<br />
position:absolute;<br />
left:30px;<br />
top:auto<br />
margin:0;<br />
width:auto;<br />
}<br />
--><br />
</style><br />
...<br />
<div class="left">...</div><br />
<div class="right">...</div><br />
<div class="left">...</div><br />
<div class="right">...</div><br />
I hope this helps.<br />
<br />
Peace,<br />
Ed<br />
<edit>Check out thus link! <!-- m --><a class="postlink" href="http://www.brainjar.com/css/positioning/default.asp">http://www.brainjar.com/css/positioning/default.asp</a><!-- m --></edit><!--content-->I don't think I explained my self right<br />
<br />
<!-- m --><a class="postlink" href="http://www.adam.com.au/pickled/david/test.htm">http://www.adam.com.au/pickled/david/test.htm</a><!-- m --><br />
<br />
I want the DIVs like they are now, but in the centre horizontally of the browser window.
<!--content-->You'll have to play with margins.<br />
body {margin:0 auto;}<br />
will produce a centered thing much the same as the depreciated <center> tag.<br />
body {margin:auto 0;}<br />
will center the page vertically I think.<br />
Sorry I misunderstood.<br />
Peace,<br />
Ed<!--content-->Doesn't work...<!--content-->try placing a <div style="margin-left:auto; margin-right:auto;">...</div> around all your content.<br />
<!--content-->I am just going to use tables... divs are too much of a head**** <!--content-->do you have a url, or could you attch the html, i wouldn't mind having a crack at it <!--content-->Originally posted by Banana-King <!-- m --><a class="postlink" href="http://www.adam.com.au/pickled/david/test.htm">http://www.adam.com.au/pickled/david/test.htm</a><!-- m --> <!--content-->doh! 
it is saturday after all, and i have been in the sun I'll go have a look at it now<!--content-->ok, first off you can't do that using absolute positioning, i changed it to float:left and added 2 more parent div's,have a look: (i used text-align:center, you can also change to margin:auto if you like <br />
<br />
<br />
<BODY><br />
<div style="width:100%;height:100%;text-align:center;"><br />
<div style="width:800px;"><br />
<DIV id=Corner <br />
style="Z-INDEX: 1; WIDTH: 140px; HEIGHT: 140px; BACKGROUND-COLOR: #cc9900;float:left;margin:5px;">1</DIV><br />
<DIV id=Title <br />
style="Z-INDEX: 1; WIDTH: 590px; HEIGHT: 140px; BACKGROUND-COLOR: #cc9900; text-align: center;float:left;margin:5px;">2</DIV><br />
<DIV id=Menu <br />
style="FONT-SIZE: 16px; Z-INDEX: 1; WIDTH: 140px; TOP: 160px; HEIGHT: 300px; BACKGROUND-COLOR: #cc9900; TEXT-ALIGN: center;float:left;margin:5px;">3</DIV><br />
<DIV id=Main <br />
style="Z-INDEX: 1; OVERFLOW: visible; WIDTH: 590px; TOP: 160px; HEIGHT: 300px; BACKGROUND-COLOR: #eeeeff;float:left;margin:5px;">Hello</DIV><br />
<div><br />
</div><br />
</BODY></HTML><!--content-->It works Thanks!<br />
<br />
The auto thing for margin works in Opera, but not in IE, but the text-align works in IE, but not in opera<!--content-->ok, try this instead, and change text-align:left to center in your body css, :<br />
<br />
<br />
<BODY><br />
<br />
<div style="width:800px;margin:0px auto;"><br />
<DIV id=Corner <br />
style="Z-INDEX: 1; WIDTH: 140px; HEIGHT: 140px; BACKGROUND-COLOR: #cc9900;float:left;margin:5px;">1</DIV><br />
<DIV id=Title <br />
style="Z-INDEX: 1; WIDTH: 590px; HEIGHT: 140px; BACKGROUND-COLOR: #cc9900; text-align: center;float:left;margin:5px;">2</DIV><br />
<DIV id=Menu <br />
style="FONT-SIZE: 16px; Z-INDEX: 1; WIDTH: 140px; TOP: 160px; HEIGHT: 300px; BACKGROUND-COLOR: #cc9900; TEXT-ALIGN: center;float:left;margin:5px;">3</DIV><br />
<DIV id=Main <br />
style="Z-INDEX: 1; OVERFLOW: visible; WIDTH: 590px; TOP: 160px; HEIGHT: 300px; BACKGROUND-COLOR: #eeeeff;float:left;margin:5px;">Hello</DIV><br />
<div><br />
<br />
</BODY></HTML><!--content-->It's alright... I just used both and they are centered in both browsers<br />
eg:<br />
<body><br />
<div style="width:100%;height:100%;text-align:center;"><br />
<div style="width:780px;margin:0 auto;"><br />
<div id="Corner" <br />
style="Z-INDEX: 1; WIDTH: 140px; HEIGHT: 140px; BACKGROUND-COLOR: #cc9900;float:left;margin:5px;">1</div><br />
<div id="Title" <br />
style="Z-INDEX: 1; WIDTH: 590px; HEIGHT: 140px; BACKGROUND-COLOR: #cc9900; text-align: center;float:left;margin:5px;">2</div><br />
<div id="Menu" <br />
style="FONT-SIZE: 16px; Z-INDEX: 1; WIDTH: 140px; TOP: 160px; HEIGHT: 300px; BACKGROUND-COLOR: #cc9900; TEXT-ALIGN: center;float:left;margin:5px;">3</div><br />
<div id="Main" <br />
style="Z-INDEX: 1; OVERFLOW: visible; WIDTH: 590px; TOP: 160px; HEIGHT: 300px; BACKGROUND-COLOR: #eeeeff;float:left;margin:5px;">Hello</div><br />
</div><br />
</div><br />
</body><!--content-->Originally posted by Banana-King <br />
It works Thanks!<br />
<br />
The auto thing for margin works in Opera, but not in IE, but the text-align works in IE, but not in opera <br />
how is that possible? margins don't work in opera, well haven't tried the lasest version, but opera6 margins didn't work.<!--content-->I have 7.11<!--content-->
<br />
I attached a diagram of what the DIVs look like<!--content-->You'll have to use css positioning.<br />
<br />
<style type="text/css"><br />
<!--<br />
.left{<br />
position:absolute;<br />
left:0px;<br />
top:auto;<br />
margin:0px;<br />
width:30px<br />
}<br />
.right{<br />
position:absolute;<br />
left:30px;<br />
top:auto<br />
margin:0;<br />
width:auto;<br />
}<br />
--><br />
</style><br />
...<br />
<div class="left">...</div><br />
<div class="right">...</div><br />
<div class="left">...</div><br />
<div class="right">...</div><br />
I hope this helps.<br />
<br />Peace,<br />
Ed<br />
<edit>Check out thus link! <!-- m --><a class="postlink" href="http://www.brainjar.com/css/positioning/default.asp">http://www.brainjar.com/css/positioning/default.asp</a><!-- m --></edit><!--content-->I don't think I explained my self right<br />
<br />
<!-- m --><a class="postlink" href="http://www.adam.com.au/pickled/david/test.htm">http://www.adam.com.au/pickled/david/test.htm</a><!-- m --><br />
<br />
I want the DIVs like they are now, but in the centre horizontally of the browser window.
<!--content-->You'll have to play with margins.<br />body {margin:0 auto;}<br />
will produce a centered thing much the same as the depreciated <center> tag.<br />
body {margin:auto 0;}<br />
will center the page vertically I think.<br />
Sorry I misunderstood.
<br />Peace,<br />
Ed<!--content-->Doesn't work...<!--content-->try placing a <div style="margin-left:auto; margin-right:auto;">...</div> around all your content.<br />
<!--content-->I am just going to use tables... divs are too much of a head**** <!--content-->do you have a url, or could you attch the html, i wouldn't mind having a crack at it <!--content-->Originally posted by Banana-King <!-- m --><a class="postlink" href="http://www.adam.com.au/pickled/david/test.htm">http://www.adam.com.au/pickled/david/test.htm</a><!-- m --> <!--content-->doh! it is saturday after all, and i have been in the sun I'll go have a look at it now<!--content-->ok, first off you can't do that using absolute positioning, i changed it to float:left and added 2 more parent div's,have a look: (i used text-align:center, you can also change to margin:auto if you like <br /><br />
<br />
<BODY><br />
<div style="width:100%;height:100%;text-align:center;"><br />
<div style="width:800px;"><br />
<DIV id=Corner <br />
style="Z-INDEX: 1; WIDTH: 140px; HEIGHT: 140px; BACKGROUND-COLOR: #cc9900;float:left;margin:5px;">1</DIV><br />
<DIV id=Title <br />
style="Z-INDEX: 1; WIDTH: 590px; HEIGHT: 140px; BACKGROUND-COLOR: #cc9900; text-align: center;float:left;margin:5px;">2</DIV><br />
<DIV id=Menu <br />
style="FONT-SIZE: 16px; Z-INDEX: 1; WIDTH: 140px; TOP: 160px; HEIGHT: 300px; BACKGROUND-COLOR: #cc9900; TEXT-ALIGN: center;float:left;margin:5px;">3</DIV><br />
<DIV id=Main <br />
style="Z-INDEX: 1; OVERFLOW: visible; WIDTH: 590px; TOP: 160px; HEIGHT: 300px; BACKGROUND-COLOR: #eeeeff;float:left;margin:5px;">Hello</DIV><br />
<div><br />
</div><br />
</BODY></HTML><!--content-->It works
Thanks!<br /><br />
The auto thing for margin works in Opera, but not in IE, but the text-align works in IE, but not in opera
<!--content-->ok, try this instead, and change text-align:left to center in your body css, :<br /><br />
<br />
<BODY><br />
<br />
<div style="width:800px;margin:0px auto;"><br />
<DIV id=Corner <br />
style="Z-INDEX: 1; WIDTH: 140px; HEIGHT: 140px; BACKGROUND-COLOR: #cc9900;float:left;margin:5px;">1</DIV><br />
<DIV id=Title <br />
style="Z-INDEX: 1; WIDTH: 590px; HEIGHT: 140px; BACKGROUND-COLOR: #cc9900; text-align: center;float:left;margin:5px;">2</DIV><br />
<DIV id=Menu <br />
style="FONT-SIZE: 16px; Z-INDEX: 1; WIDTH: 140px; TOP: 160px; HEIGHT: 300px; BACKGROUND-COLOR: #cc9900; TEXT-ALIGN: center;float:left;margin:5px;">3</DIV><br />
<DIV id=Main <br />
style="Z-INDEX: 1; OVERFLOW: visible; WIDTH: 590px; TOP: 160px; HEIGHT: 300px; BACKGROUND-COLOR: #eeeeff;float:left;margin:5px;">Hello</DIV><br />
<div><br />
<br />
</BODY></HTML><!--content-->It's alright... I just used both and they are centered in both browsers
<br />eg:<br />
<body><br />
<div style="width:100%;height:100%;text-align:center;"><br />
<div style="width:780px;margin:0 auto;"><br />
<div id="Corner" <br />
style="Z-INDEX: 1; WIDTH: 140px; HEIGHT: 140px; BACKGROUND-COLOR: #cc9900;float:left;margin:5px;">1</div><br />
<div id="Title" <br />
style="Z-INDEX: 1; WIDTH: 590px; HEIGHT: 140px; BACKGROUND-COLOR: #cc9900; text-align: center;float:left;margin:5px;">2</div><br />
<div id="Menu" <br />
style="FONT-SIZE: 16px; Z-INDEX: 1; WIDTH: 140px; TOP: 160px; HEIGHT: 300px; BACKGROUND-COLOR: #cc9900; TEXT-ALIGN: center;float:left;margin:5px;">3</div><br />
<div id="Main" <br />
style="Z-INDEX: 1; OVERFLOW: visible; WIDTH: 590px; TOP: 160px; HEIGHT: 300px; BACKGROUND-COLOR: #eeeeff;float:left;margin:5px;">Hello</div><br />
</div><br />
</div><br />
</body><!--content-->Originally posted by Banana-King <br />
It works
Thanks!<br /><br />
The auto thing for margin works in Opera, but not in IE, but the text-align works in IE, but not in opera
<br />how is that possible? margins don't work in opera, well haven't tried the lasest version, but opera6 margins didn't work.<!--content-->I have 7.11<!--content-->