Forum Moderators: not2easy
Today I undertook to get rid of tables in my layout.
I was doing OK until I added another 'block'? [is this the correct term?] that caused the browser to use a scroll bar.
All my previous efforts came to nought when the 'blocks' re=positioned themselves.
My code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Div Attempt</title>
<style>
body
{
text-align:center;
max-width:1200px;
margin:auto;
}
#div1
{
width:1200px;
height:20px;
margin-left: auto ;
margin-right: auto ;
z-index:1;
left:0; top:0;
background-color:#eeeeee;
border-color:#000000;
border:none;
font-family: Arial, Serif, Verdana;
color: Gray;
}
#div_Left_Header
{
width:150px;
height:150px;
position:absolute;
top:20px;
left:auto;
z-index:1;
background-color:#dddddd;
border:none;
font-family: Arial, Serif, Verdana;
color: Black;
}
#div_Inner_Left_Header
{
width:150px;
height:150px;
position:absolute;
top:20px;
left:218px;
z-index:1;
background-color:#dddddd;
border:none;
font-family: Arial, Serif, Verdana;
color: Black;
}
#div_Center_Header
{
width:750px;
height:150px;
position:absolute;
top:20px;
left:368px;
margin:auto;
z-index:1;
background-color:#dddddd;
border:none;
font-family: Arial, Serif, Verdana;
color: Black;
}
#div_Right_Header
{
width:150px;
height:150px;
position:absolute;
top:20px;
left:1118px;
margin:auto;
z-index:1;
background-color:#dddddd;
border:none;
font-family: Arial, Serif, Verdana;
color: Black;
}
.headerFont
{
vertical-align:middle;
font-family: Arial, Serif, Verdana;
color: Gray;
}
#menu1
{
width:200px;
height:50px;
position:absolute;
top:170px;
left:auto;
margin:auto;
z-index:1;
background-color:#eeeeee;
border:none;
font-family: Arial, Serif, Verdana;
color: Black;
}
#menu2
{
width:200px;
height:50px;
position:absolute;
top:220px;
left:auto;
margin:auto;
z-index:1;
background-color:#eeeeee;
border:none;
font-family: Arial, Serif, Verdana;
color: Black;
}
#menu3
{
width:200px;
height:50px;
position:absolute;
top:270px;
left:auto;
margin:auto;
z-index:1;
background-color:#eeeeee;
border:none;
font-family: Arial, Serif, Verdana;
color: Black;
}
#menu4
{
width:200px;
height:50px;
position:absolute;
top:320px;
left:auto;
margin:auto;
z-index:1;
background-color:#eeeeee;
border:none;
font-family: Arial, Serif, Verdana;
color: Black;
}
#menu5
{
width:200px;
height:50px;
position:absolute;
top:370px;
left:auto;
margin:auto;
z-index:1;
background-color:#eeeeee;
border:none;
font-family: Arial, Serif, Verdana;
color: Black;
}
#menu6
{
width:200px;
height:50px;
position:absolute;
top:420px;
left:auto;
margin:auto;
z-index:1;
background-color:#eeeeee;
border:none;
font-family: Arial, Serif, Verdana;
color: Black;
}
#menu7
{
width:200px;
height:50px;
position:absolute;
top:470px;
left:auto;
margin:auto;
z-index:1;
background-color:#eeeeee;
border:none;
font-family: Arial, Serif, Verdana;
color: Black;
}
#menu8
{
width:200px;
height:50px;
position:absolute;
top:520px;
left:auto;
margin:auto;
z-index:1;
background-color:#eeeeee;
border:none;
font-family: Arial, Serif, Verdana;
color: Black;
}
#menu9
{
width:200px;
height:100px;
position:absolute;
top:570px;
left:auto;
margin:auto;
z-index:1;
background-color:#eeeeee;
border:none;
font-family: Arial, Serif, Verdana;
color: Black;
}
</style>
</head>
<body>
<div id="div1">
Testing
</div>
<div id="div_Left_Header">
<h4 class="headerFont">
Left Header
</h4>
</div>
<div id="div_Inner_Left_Header">
<h4 class="headerFont">
Inner Left Header
</h4>
</div>
<div id="div_Center_Header">
<h4 class="headerFont">
Center Header
</h4>
</div>
<div id="div_Right_Header">
<h4 class="headerFont">
Right Header
</h4>
</div>
<div id="menu1">
<h4 class="headerFont">
Menu1
</h4>
</div>
<div id="menu2">
<h4 class="headerFont">
Menu2
</h4>
</div>
<div id="menu3">
<h4 class="headerFont">
Menu3
</h4>
</div>
<div id="menu4">
<h4 class="headerFont">
Menu4
</h4>
</div>
<div id="menu5">
<h4 class="headerFont">
Menu5
</h4>
</div>
<div id="menu6">
<h4 class="headerFont">
Menu6
</h4>
</div>
<div id="menu7">
<h4 class="headerFont">
Menu7
</h4>
</div>
<div id="menu8">
<h4 class="headerFont">
Menu8
</h4>
</div>
<!--
<div id="menu9">
<h4 class="headerFont">
Menu9
</h4>
</div>
-->
</body>
</html>
If this syntax dosen't cause a vertical scroll bar then either resize your browser vertically or uncomment "menu9".
What you will notice ( without any scroll bar required ) is that all 'blocks'? are aligned and awaiting real content.
However, the moment a scroll bar is required ( either horizonally or vertically ) then except for the "Left Header" all 'blocks'? on that level move to the right ~ completely destroying my efforts.
So where do I go to understand how to fix this one ? ( I've searched here but get lost in some of the postings as they may be a little above me at present ~ still I have to learn sometime. )
Regards SnapafunFrank
So I can move on for now but the issue here is still containing the layout centrally upon resizing the browser window and without the layout breaking apart.
Then to center your page you can create a container with a defined width (em's, pixels or percent) with the margins set like: margin:0 auto; - this enables the margins to automatically define themselves, pushing the container into the center.
