Sun, 2010-03-14 19:44
ok so here is the code:
<div style="position: absolute; background: blue;top: 25px; height:500; width: 1800px;overflow:hidden;margin-left: auto; margin-right: auto;"> <div style="position: absolute; width:800; height:400px; background: red;"> <div style="position: absolute; background: green; width: 100px; height: 330px; left:25px"> menu </div> <div style="position: absolute; background: green; width: 500px; height: 330px; left:145px"> main </div> <div style="position: absolute; background: green; width: 100px; height: 330px; left:670px"> options </div> </div> </div>
I made a small example of the site. If you run the code then you will notice that the site will be contained in a red box which is aligned to the left in the blue box which represents the background. I would like the red box to be centered and have tried to use margin-left: auto; margin-right: auto; as in the code above and text-align: center;. none of this is working so I assume that I am doing something wrong. If anyone can help me center the red block in the blue block, it would be highly appreciated.
Thank you,
-Alex
Sun, 2010-03-14 20:01
#1
Why Oh Why with the
Why Oh Why with the position:absolute?
Lose all those positional properties simply set widths and your auto margins.
Sun, 2010-03-14 20:37
#2
Ok I removed the position
Ok I removed the position absolute part but the margin auto code is still not working correctly
<div style="background: blue;top: 25px; height:500; width: 1800px;overflow:hidden; margin-left: auto; margin-right: auto;"> <div style="width:800; height:400px; background: red;"> <div style="position: absolute; background: green; width: 100px; height: 330px; left:25px"> menu </div> <div style="position: absolute; background: green; width: 500px; height: 330px; left:145px"> main </div> <div style="position: absolute; background: green; width: 100px; height: 330px; left:670px"> options </div> </div> </div>
Sun, 2010-03-14 21:36
#3
alex3oo2 wrote: Ok I removed
Ok I removed the position absolute part
No you didn't, I still count three pos:abs
Sun, 2010-03-14 22:14
#4
shrugging and wondering why
Lose all
Then lets see how things stack up, and while at it ensure you declare units with all values, and move those inline styles to embedded styles while testing.
Edit/ ought to add that the three inner elements will need to be floated to force them to sit side by side.