Thu, 2011-12-01 11:02
Dear Sir,
I have following codes
<html><style type="text/css"> html { padding:0;margin:0 auto; } body { padding:0;margin:0 auto; } #content { position:absolute; width:500px;height:600px; color:red;background:#e3eeff; padding:10px;border:1px solid green; } #div_left { position:absolute; width:200px;height:400px;left:20px;top:20px; color:yellow;background:#e3eeff; padding:10px;border:1px solid orange; } #div_right { position:absolute; width:200px;height:400px;left:250px;top:20px; color:red;background:#e3eeff; padding:10px;border:1px solid blue; } </style> <body><div id="content"><div id="div_left">This is left div</div><div id="div_right">This is right div</div></div></body></html><html> <style type="text/css"> html { padding:0;margin:0 auto; } body { padding:0;margin:0 auto; } #content { position:absolute; width:500px;height:600px; color:red;background:#e3eeff; padding:10px;border:1px solid green; } #div_left { position:absolute; width:200px;height:400px;left:20px;top:20px; color:yellow;background:#e3eeff; padding:10px;border:1px solid orange; } #div_right { position:absolute; width:200px;height:400px;left:250px;top:20px; color:red;background:#e3eeff; padding:10px;border:1px solid blue; } </style> <body> <div id="content"> <div id="div_left">This is left div</div> <div id="div_right">This is right div</div> </div> </body> </html>
My question is how to display my content div in center (page center) with all screen resolutions i.e
1024x768
1152x864
1280x600
1280x700
1280x768
1280x790 and so on
Please help
Thu, 2011-12-01 11:18
#1
First, absolute positioning
First, absolute positioning has gotchas that the inexperienced are going to stir up. That is probably the most difficult layout method to implement, and the most fragile. Changes in the content almost always require changing all the offset values. Do yourself a favor; forget you ever heard of the position property. Learn the other more robust layout methods first.
Go to the CSS Layout Generator, and let it develop a layout for you. Once you get a start on a more sane method, we can help you over any rough spots.
cheers,
gary
Wed, 2011-12-07 19:10
#2
Aligning div center
Absolute position is not necessary for #content div, instead use margin:0px auto;
Here is the full explanation of align div in the center.
thanks,
Thu, 2011-12-08 05:35
#3
Vertical centre an element of unknown height and width
Hi,
See below simple codes.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Vertical centre an element of unknown height and width</title> <style type="text/css"> html, body{margin:0; padding:0; height:100%; font:12px Arial, Helvetica, sans-serif; color:#666;} .wrapper{display:table; height:100%; width:100%;} .outer{display:table-cell; line-height:100%; vertical-align:middle;} .content{margin:0 auto; width:460px; background:#e3eeff; padding:20px; line-height:22px; overflow:hidden;} .left-sec, .right-sec{border:1px solid green; padding:7px 10px; float:left; width:198px;} .left-sec{margin:0 20px 0 0;} </style> </head> <body> <div class="wrapper"> <div class="outer"> <div class="content"> <div class="left-sec"> Left content here <br />Left content here <br />Left content here <br />Left content here <br />Left content here <br />Left content here <br />Left content here </div> <div class="right-sec"> Right content here <br />Right content here <br />Right content here <br />Right content here <br />Right content here <br />Right content here <br />Right content here </div> </div> </div> </div> </body> </html>