Have a layout that uses several DIVs to divide up screen. DIVs are defined in header of the html page.
In the body I have the divs placed in the body section....
<body>
<div id='header'></div>
<div id='menu'></div>
...
I would like to have text after these div placements that will not be overlapped by these divs. I don't want to put this text into a new div. Can this be done?Yes. If the DIVs are not absolutely positioned it should be really easy. You could add padding or margins in the body tag to move the content over and down if need be.Is it possible to do it if my divs are absolutely positioned?Here is some working code. The #header DIV does not need to be absolutely positioned. The #mainContent and #menu DIVs are absolutely positioned, but only need the be told how far left they should be placed.
Absolutely positioned elements are, by default, positioned according to their containing block. The problem with this sort of layout is that you cannot have a footer span the entire width of the screen. You'd have to position the footer absolutely and specify how far down the page it should be placed. You can do this, but only if you know that one column (menu or mainContent) will be longer than the other. But this works just fine.
<!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" xml:lang="en" lang="en">
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css" media="screen">
<!--
body {
padding: 0;
margin: 0;
}
/* This rule just makes things look nicer for this example.
You can delete this whole style declaration if you want. */
body p {
margin: 0;
padding: 1em 0;
}
#header {
background-color: #fcc;
}
#menu {
position: absolute;
left: 0;
width: 25%;
background-color: #cff;
}
#mainContent {
position: absolute;
left: 25%;
width: 75%;
background-color: #ffc;
}
-->
</style>
</head>
<body>
<div id="header">
<p>header</p>
</div>
<div id="mainContent">
<p>Main Content</p>
</div>
<div id="menu">
<p>Left hand menu</p>
</div>
</body>
</html>
In the body I have the divs placed in the body section....
<body>
<div id='header'></div>
<div id='menu'></div>
...
I would like to have text after these div placements that will not be overlapped by these divs. I don't want to put this text into a new div. Can this be done?Yes. If the DIVs are not absolutely positioned it should be really easy. You could add padding or margins in the body tag to move the content over and down if need be.Is it possible to do it if my divs are absolutely positioned?Here is some working code. The #header DIV does not need to be absolutely positioned. The #mainContent and #menu DIVs are absolutely positioned, but only need the be told how far left they should be placed.
Absolutely positioned elements are, by default, positioned according to their containing block. The problem with this sort of layout is that you cannot have a footer span the entire width of the screen. You'd have to position the footer absolutely and specify how far down the page it should be placed. You can do this, but only if you know that one column (menu or mainContent) will be longer than the other. But this works just fine.
<!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" xml:lang="en" lang="en">
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css" media="screen">
<!--
body {
padding: 0;
margin: 0;
}
/* This rule just makes things look nicer for this example.
You can delete this whole style declaration if you want. */
body p {
margin: 0;
padding: 1em 0;
}
#header {
background-color: #fcc;
}
#menu {
position: absolute;
left: 0;
width: 25%;
background-color: #cff;
}
#mainContent {
position: absolute;
left: 25%;
width: 75%;
background-color: #ffc;
}
-->
</style>
</head>
<body>
<div id="header">
<p>header</p>
</div>
<div id="mainContent">
<p>Main Content</p>
</div>
<div id="menu">
<p>Left hand menu</p>
</div>
</body>
</html>