Layout problem…

@FangMay 05.2006 — #The basics:

&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd"&gt;
 &lt;html lang="en"&gt;
 &lt;head&gt;
 &lt;title&gt;Basic center page with elements position:absolute&lt;/title&gt;
 &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt;
 &lt;style type="text/css"&gt;
 html, body {
 margin:0;
 text-align:center;
 } 
 #container {
 position:relative; /* parent of absolute positioned contents */
 margin:0 auto;
 width:80%; /* change to required width */
 text-align:left;
 }
 #contents { /* any element here is centered */
 border:1px solid red;
 }
 &lt;/style&gt;
 &lt;/head&gt;
 &lt;body&gt;
 &lt;div id="container"&gt;
 &lt;div id="contents"&gt;
 &lt;p&gt;contents&lt;/p&gt;
 &lt;/div&gt;
 &lt;/div&gt;
 &lt;/body&gt;
 &lt;/html&gt;

It does mean you will have to change the [I]left[/I] values of all absolutely positioned elements and some background image have to be placed outside of [I]#container[/I].

Design and implement, not implement and re-design.

In the majority on cases absolutely positioned elements can be replaced by static (default) elements in a correctly implemented css layout.

Layout problem…

2 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

Layout problem…

2 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

2 Comments(s) _↴

Also in #CSS _↴