CSS Left, Top and Bottom Frames Layout but with fixed size and centered [Archive]

View Full Version : CSS Left, Top and Bottom Frames Layout but with fixed size and centered

selrahc

12-18-2007, 11:38 PM

1) Script Title:
CSS Left, Top and Bottom Frames Layout
2) Script URL (on DD):
http://www.dynamicdrive.com/style/layouts/item/css-left-top-and-bottom-frames-layout/
3) Describe problem:

I am new to CSS, but seem to have had success working with your scripts - thanks

I have modified the above script so the top and bottom frames span the whole screen. Next I wanted to limit the size of the displayed area to 750 px - so that for wide screens the sections are not too spread out

I have been successful for all by the content section - I can not get it to be positioned in the right place. It seems to be positioned relative to the browser page, rather than the containing div - what am I doing wrong?

I am currently only testing on FF but will eventually need to add the IE hack

Thanks in advance

--Charlie

Here is the code:


<!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" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Dynamic Drive: CSS Left, Top and Bottom Frames Layout</title>
<style type="text/css">

html {
height: 100%;
margin-bottom: 1px;
}

body {
font: normal 80% Arial, Helvetica, sans-serif;
background-color: #5b73ba;
color: #000;
text-align: center;
margin: 0;
overflow: hidden;
width: 100%
height: 100%;
max-height: 100%;
}

#wrapper{
width: 750px;
color: #000;
text-align: left;
margin: 0 auto;
padding: 0;
border: 0;
}

#framecontentTop{
position: absolute;
top: 0;
height: 110px; /*Height of top frame div*/
overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
background-color: navy;
color: white;
width: 750px;
}

#framecontentLeft{
position: absolute;
top: 110px;
bottom: 120px;
width: 200px; /*Width of left frame div*/
height: 100%;
overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
background-color: navy;
color: white;
}

#framecontentBottom{
position: absolute;
top: auto;
bottom: 0;
height: 120px; /*Height of bottom frame div*/
overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
background-color: navy;
color: white;
width: 750px;
}

#maincontent{
position: absolute;
top: 110px; /*Set top value to HeightOfTopFrameDiv*/
left: 200px;
bottom: 120px; /*Set bottom value to HeightOfBottomFrameDiv*/
overflow: auto;
background: #fff;
width: 550px;
}

.innertube{
margin: 15px; /*Margins for inner DIV inside each DIV (to provide padding)*/
}

/*
* html #wrapper{ /*IE6 hack*/
padding: 110px 0 120px 0; /*Set value to (HeightOfTopFrameDiv 0 HeightOfBottomFrameDiv WidthOfLeftFrameDiv)*/
}

* html #maincontent{ /*IE6 hack*/
height: 100%;
width: 100%;
padding: 0 0 0 200px; /*Set value to (HeightOfTopFrameDiv 0 HeightOfBottomFrameDiv WidthOfLeftFrameDiv)*/
}

* html #framecontentTop, * html #framecontentBottom{ /*IE6 hack*/
width: 100%;
}

* html #framecontentLeft{ /*IE6 hack*/
width: 200px;
}
*/
</style>

<script type="text/javascript">
/*** Temporary text filler function. Remove when deploying template. ***/
var gibberish=["This is just some filler text", "Welcome to Dynamic Drive CSS Library", "Demo content nothing to read here"]
function filltext(words){
for (var i=0; i<words; i++)
document.write(gibberish[Math.floor(Math.random()*3)]+" ")
}
</script>

</head>

<body>

<div id="wrapper">
<div id="framecontentTop">
<div class="innertube">

<h1>CSS Left, Top and Bottom Frames Layout</h1>
<h3>Sample text here</h3>

</div>
</div>

<div id="maincontent">
<div class="innertube">

<h1>Dynamic Drive CSS Library</h1>
<p><script type="text/javascript">filltext(255)</script></p>
<p style="text-align: center">Credits: <a href="http://www.dynamicdrive.com/style/">
Dynamic Drive CSS Library</a></p>

</div>
</div>

<div id="framecontentLeft">
<div class="innertube">

<h3>Sample text here</h3>

</div>
</div>

<div id="framecontentBottom">
<div class="innertube">

<h3>Sample text here</h3>

</div>
</div>

</div>

</body>
</html>

ddadmin

12-19-2007, 10:09 AM

Hi:
Are you basically looking to just constrict the width of the content container to 750px, but still let the "frames" DIVs span the entire width of the window? If so, try this:


<!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" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Dynamic Drive: CSS Left, Top and Bottom Frames Layout</title>
<style type="text/css">

body{
margin: 0;
padding: 0;
border: 0;
overflow: hidden;
height: 100%;
max-height: 100%;
}

#framecontentLeft{
position: absolute;
top: 0;
left: 0;
width: 200px; /*Width of left frame div*/
height: 100%;
overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
background-color: navy;
color: white;
}

#framecontentTop{
position: absolute;
top: 0;
left: 200px; /*Set left value to WidthOfLeftFrameDiv*/
right: 0;
height: 110px; /*Height of top frame div*/
overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
background-color: navy;
color: white;
}

#framecontentBottom{
position: absolute;
top: auto;
left: 200px; /*Set left value to WidthOfLeftFrameDiv*/
bottom: 0;
right: 0;
height: 120px; /*Height of bottom frame div*/
overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
background-color: navy;
color: white;
}

#maincontent{
position: fixed;
top: 110px; /*Set top value to HeightOfTopFrameDiv*/
left: 200px; /*Set left value to WidthOfLeftFrameDiv*/
width: 750px;
right: 0;
bottom: 120px; /*Set bottom value to HeightOfBottomFrameDiv*/
overflow: auto;
background: #fff;
}

.innertube{
margin: 15px; /*Margins for inner DIV inside each DIV (to provide padding)*/
}

* html body{ /*IE6 hack*/
padding: 110px 0 120px 200px; /*Set value to (HeightOfTopFrameDiv 0 HeightOfBottomFrameDiv WidthOfLeftFrameDiv)*/
}

* html #maincontent{ /*IE6 hack*/
height: 100%;
width: 100%;
}

* html #framecontentTop, * html #framecontentBottom{ /*IE6 hack*/
width: 100%;
}

</style>

<script type="text/javascript">
/*** Temporary text filler function. Remove when deploying template. ***/
var gibberish=["This is just some filler text", "Welcome to Dynamic Drive CSS Library", "Demo content nothing to read here"]
function filltext(words){
for (var i=0; i<words; i++)
document.write(gibberish[Math.floor(Math.random()*3)]+" ")
}
</script>

</head>

<body>

<div id="framecontentLeft">
<div class="innertube">

<h3>Sample text here</h3>

</div>
</div>

<div id="framecontentTop">
<div class="innertube">

<h1>CSS Left, Top and Bottom Frames Layout</h1>
<h3>Sample text here</h3>

</div>
</div>

<div id="framecontentBottom">
<div class="innertube">

<h3>Sample text here</h3>

</div>
</div>

<div id="maincontent">
<div class="innertube">

<h1>Dynamic Drive CSS Library</h1>
<p><script type="text/javascript">filltext(255)</script></p>
<p style="text-align: center">Credits: <a href="http://www.dynamicdrive.com/style/">Dynamic Drive CSS Library</a></p>

</div>
</div>

</body>
</html>

As you can see, "width" needs to be applied to the content container itself, not its wrapper.

selrahc

12-19-2007, 03:05 PM

Hi,

I wanted the content to be 550 px wide and the left column to be 200px wide - the header and footer are 750 px wide. And I wanted the 750 wide panel (including all the sections) to be in the center of the screen. On my FF, all the panels sections except the content section appear in the correct position (in the wrapper), while the content section seems to be positioned relative to the browser page - in this case it is 200px from the left of the browser page, rather than 200 px from the left of the wrapper. Furhter, as the page gets wider, everything moves to the center except the content section. Is this a better explanation?

Thanks for your help

--Charlie