Hello, I am very new to web development in general. I am trying to develop a master page for a tutorial that I am creating. I have tried different solutions to correct the overlap, but the same result occurs every time.

My web page shows up fine in IE7 and FF 3.5.7 with my screen resolution at 1152x864, but if I change the size of my resolution or browser window, my divs over lap in the middle of the screen. I am using VS web developer as my editor. The yellow borders are just for my reference, the gray borders are the actual borders that are suppose to appear to separate the sections.

My css

html,#container {
position:relative;
width:100%;
height:100%;
background-color:#000;
margin:0;
}

#chapterheader {
position:absolute;
top:0;
left:0;
width:45.6%;
height:30px;
z-index:9;
border:3px solid #cccbcb;
margin:auto;
padding:10px;
}

#sectionheader {
position:absolute;
top:53px;
left:0;
width:45.6%;
height:30px;
z-index:8;
border:3px solid #cccbcb;
margin:auto;
padding:10px;
}

#mainheader {
position:absolute;
top:0;
right:0;
width:50%;
height:83px;
z-index:10;
border:3px solid #cccbcb;
margin:auto;
padding:10px;
}

#text {
position:absolute;
top:105.5px;
left:0;
width:25%;
height:450px;
z-index:7;
border:3px solid #cccbcb;
overflow:auto;
padding:10px;
}

#graphics {
position:absolute;
top:105.5px;
right:0;
width:70.75%;
height:450px;
z-index:5;
border:3px solid #cccbcb;
padding:10px;
}

#maintitle {
position:inherit;
top:10px;
left:10px;
color:#fff;
font:24pt sans-serif;
border:solid 1px #FF0;
margin:0;
padding:0;
}

#mainsubtitle {
position:inherit;
top:65px;
left:10px;
color:#fff;
font:16pt sans-serif;
border:solid 1px #FF0;
margin:0;
padding:0;
}

#chaptertitle,#sectiontitle {
position:inherit;
top:12px;
left:10px;
color:#fff;
font:16pt sans-serif;
border:solid 1px #FF0;
margin:0;
padding:0;
}

#image, #text1 {
position: relative;
top: 50%;
width: auto;
color: #fff;
font: 16pt sans-serif;
border: solid 1px #FF0;
}

my html

<%@ Page Language="VB" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">


    
</script>

     
    

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link href="StyleSheet.css" rel="stylesheet" type="text/css" />
</head>

<body>
  <div id="container" align="center">
    
    <div id="chapterheader">
        <div id="chaptertitle">Chapter Title</div>
    </div>
    <div id="sectionheader">
       <div id="sectiontitle">Section Title</div>
    </div>
    <div id="mainheader">
         <div id="maintitle">Main Title</div>
         <div id="mainsubtitle">Sub Title</div>
    </div>
    
    <div id="text">
    <div id="text1">TEXT GOES HERE</div>
    </div>
    <div id="graphics">
    <div id="image">IMAGE GOES HERE</div>
    </div>
    
  </div>
</body>
</html>

Hi Sammer

You are probably getting the overlap because your over use of absolute positioning. This takes each div element out of the natural flow of the document. It is better to use the document flow to position your divs.

Here is the css code for your site using a liquid layout

/* CSS Document */

body {
    width:100%;
    height:100%;
    background-color:#000;
    margin:0;
    color: #fff;
}

/* main layout */
#header,#navmenu,#content {
	overflow: hidden;
	border: solid 1px #ccc;
}

#wrapper {
    margin: 0 auto;
	padding: 0;
    text-align: left;
}

/* fixes for safari and opera */
#wrapper,#header { width: 100%; }
#content { float: left; }
#content { width: 100%; }
/* end fixes for safari and opera */
/* end main layout */

.header-left
{
    float: left;
    width: 45%;
}
.chapter
{
    width:100%;
    height:30px;
    padding: 10px;
    border:3px solid #cccbcb;
}
.section
{
    width:100%;
    height:30px;
    padding: 10px;
    border:3px solid #cccbcb;
}
.maintitle
{
    float: right;
    width:50%;
    height:86px;
    padding: 10px;
    border:3px solid #cccbcb;
}
.text-left
{
    float: left;
    width: 25%;
    height:450px;
    padding: 10px;
    border:3px solid #cccbcb;
}
.text-left h2
{
    position: relative;
    top: 50%;
    width: 100%;
    text-align: center;
    font-weight:lighter;
    border: solid 1px #ffff00;
}
.graphics-right
{
    float: right;
    width: 68.3%;
    height:450px;
    padding: 10px;    
    border:3px solid #cccbcb;
}
.graphics-right h2
{
    position: relative;
    top: 50%;
    width: 100%;
    text-align: center;
    font-weight:lighter;
    border: solid 1px #ffff00;
}
/*elements*/
h1 { margin: 0; padding: 3px; }
h2 { margin: 0; padding: 3px; }

and the html

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Liquid CSS Layout</title>
<link type="text/css" rel="stylesheet" href="styles/style.css" />
</head>

<body>
<div id="wrapper">
	<!--header section-->
	<div id="header">
	    <div class="header-left">
	        <div class="chapter">Chapter</div>
	        <div class="section">Section</div>
	    </div>
	    <div class="maintitle">
	        <h1>Main Title</h1>
	        <h2>Sub Title</h2>
	    </div>
	</div>
    <!--end header section-->   
    
    <!--content section-->
    <div id="content">
        <div class="text-left">
            <h2>TEXT GOES HERE</h2>
        </div>
        <div class="graphics-right">
            <h2>IMAGE GOES HERE</h2>
        </div>
    </div>
    <!--end content section-->
</div>
</body>
</html>

Hope this helps

Thank you for your help Cragdo. Using the information you provided about taking the div out of the document flow helped me develop a new css to prevent that. Now my divs do re-size when the browser or screen resolution are re-sized.

I am thinking now though that my question should have been how do I prevent the divs from overlapping on a screen or browser re-size yet maintain the dimensions that I gave them, so that the user must scroll the page?

Hi Sammer,

Do you mean the user would have to scroll horizontally left and right?

It is very bad practice to develop like this as it doesn't adhere to web standards. Also, although users will scroll vertically all day they will more than likely hit the back button if the have to scroll vertically and they won't be back.

As you are new in web development you should read up on web standards to make things easier for yourself and your users in the future.

You can read about web standards here http://www.webstandards.org

Hope this helps

remove all the defined height:s
when the page is resized text may wrap on second lines and disappear behind div boundaries
a liquid layout sets only width and allows the height to be set by the browser
if two elements of diferent sizes are required to occupy the same vertical space, you enclose them in another element as a wrapper

wrapper dimensioned 100%, is wrong, some browsers restrict that to of screen height, others to 100% of logical document height **edit I dont know how to do it 'right' how to make it the same size in different browsers **

www.w3schools.com css tutorials

as craigdo wrote, users do not scroll sideways, they leave
mice have scroll wheels that move vertically

The only way to make that happen is to make everything resize, even the font. That is hard to do.

I don't normally make a page scroll horizontally, but those with forms in them just about have to, or you will not be able to enter the data. And many images blur into illegibility when resized.

Hi Sammer,

To answer your question though. You can make your divs fixed width by changing the percentages to pixels but when you do that you should make sure that the total width of your html body doesn't exceed around 760 pixels including padding.

This will ensure that people with 800x600 resolution can use your site too.

Personally, I hate doing this as I find it restrictive and much prefer to use a liquid design to fit all resolutiuons using percentages but each to their own and all that.

Your totally right about the defined heights. they are just there as there was no content in the vanilla version. I use this method to make sure everthing looks OK and should be removed when filling with content.

I should have mentioned that. Soz

Do you mean the user would have to scroll horizontally left and right?

Yes that is what I meant. After having a look at the W3C website and seeing how they have the site set up to only vertically scroll. I understand what you mean by having the text scroll only vertically. I am use to scrolling horizontally on re-sized websites and thought that it was alright to set mine up the same way.

So having played with my code I think that I have it laid out the way that I would like it to appear for the master page.

Is there a way to center the container divs on the page?

I have used the nested divs inside of the headers, because it was the only way that I was getting the header's border to line up with the image div's border on the the right side.

I have used the clear: both as a separator to ensure that the text div does not float itself to the right of the section div. I know that there is a space that appears in IE7, but that is not a real big issue for me as long as the two headers, once all the titles have been entered are the same height.

Here is my new code
CSS

body {
background-color:#000;
border:solid 3px #FF0;
text-align:center;
padding:5px;
}

.clear {
clear:both;
}

.headerleft {
float:left;
width:40%;
border:3px solid #CCC;
color:#FFF;
}

.chapter {
border-bottom:3px solid #CCC;
color:#FFF;
padding:10px;
}

.section {
border-top:3px solid #CCC;
margin-top:-3px;
color:#FFF;
padding:10px;
}

.headerright {
float:left;
width:56%;
border:solid 3px #CCC;
margin-left:-3px;
color:#FFF;
}

.maintitle {
float:left;
color:#FFF;
padding:10px;
}

.text {
float:left;
width:25%;
height:450px;
border:solid 3px #CCC;
margin-top:-3px;
color:#FFF;
overflow:auto;
}

.image {
float:left;
width:71%;
height:450px;
border:solid 3px #CCC;
margin-left:-3px;
margin-top:-3px;
color:#FFF;
overflow:hidden;
}

HTML

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>

<!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 runat="server">
    <title></title>
    <link href="StyleSheet.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <div class="headerleft">
        <div class="chapter">
        1
        </div>
        <div class="section">
        2
        </div>       
    </div>
    
    <div class="headerright">
        <div class="maintitle">
        3
        </div>
    </div>
    
    <div class="clear"></div>
    
    <div class="text">
    4
    </div>
    
    <div class="image">
    5
    </div>
    
    <div class="clear"></div>
       
</body>
</html>

To center your containers you use:

margin: 0 auto;

It doesn't have to be 0 for the top and bottom margins just as long as the left and right margins are marked as auto.

To fix any layout problems you have you can make another stylesheet for IE7 and below and call it say ie7.css. Then you place this line od code in between the head tags.

<!--[if lt IE 8]>
<link rel="stylesheet" type="text/css" href="styles/ie7.css" />
<![endif]-->

Hope this helps

To center your containers you use:

margin: 0 auto;

It doesn't have to be 0 for the top and bottom margins just as long as the left and right margins are marked as auto.

Gave the above coding a try and neither FF or IE wanted to center the divs. So to make the divs appear to be centered on the page I used a fixed % on the left margin to center the divs as closely as I could to the center of the page.

To fix any layout problems you have you can make another stylesheet for IE7 and below and call it say ie7.css. Then you place this line od code in between the head tags.

<!--[if lt IE 8]>
<link rel="stylesheet" type="text/css" href="styles/ie7.css" />
<![endif]-->

Have not tried the above, but I am wondering if I have to create a whole new css just for IE so that it lines up correctly and that the above code goes into the page header to check which browser is being ran to run the appropriate css.

Hope this helps

You have been extremely helpful thank you.

Hi Sammer,

margin: 0 auto; should work but it won't center divs that have been floated. If you want to center more than 1 div give them a wrapper and center the wrapper with margin: 0 auto. You should also make sure that you have text-align: center in your body for fixing IE.

You don't have to create a whole new css file for IE. Just copy and rename your original file to ie.css and re-jig this file for IE. IT will probably only be padding and the likes that you will need to change as it is a problem with IE rendering things like padding that are the problem.

Cheers