PDA

View Full Version : Fixed positioned Divs inside auto centering container?



TFOH
Jul 14th, 2010, 11:54 AM
Hi guys

my site has 3 columns. Two fixed position divs either side of a centre column that isnt fixed and therefore scrolls. The overflow x is set to hidden. I would like to put all content into an auto centering containing div but keep all other formatting the same (ie the left and right column never scrolls with the center column content) Any ideas on how to achieve what i want? Please let me know if i can be clearer in my explanation. Thanks everyone. :)

here is the link:

www.thefutureofhistory.co.uk (http://www.thefutureofhistory.co.uk)

here is the index page code(I've removed content code from the "mainholder" div:


<!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">
<link rel="icon"
type="image/png"
href="images/tfoh_favicon.png">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>The Future Of History</title>
<link href="mainstyle.css" rel="stylesheet" type="text/css" />




</script>
<script src="Scripts/AC_RunActiveContent.js" type="text/javascript">
</script>
<style type="text/css">

<!--
.style1 {color: #FFFF00}
-->
</style>
</head>
<div id="background"> </div>

<body style=" margin-top: 25px; margin-bottom: 25px; margin-left: auto; margin-right: auto;>






<div id="container">

<div id="indexcontainer2">


<div id="nav">

<div id="saying">
<div id="sayinglogo">
</div>
</div>


<div id="logo"> </div>


<div id="navlinks">




<a href="index.html" span class="navlinkpage">Latest</a><br>
<a href="web.html" span class="navlinks">Web</a><br>
<a href="print.html" span class="navlinks">Print</a><br>
<a href="film.html" span class="navlinks">Film</a><br>
<a href="motion.html" span class="navlinks">Motion</a><br>
<a href="blog.html" span class="navlinks">Blog</a><br>
<a href="honesty.html" span class="navlinks">Honesty</a><br>
<a href="links.html" span class="navlinks">Links</a><br>
</p></div>
</div>


<div id="main">
<div id="mainholder">









</div>

<div id="contact2">

<div id="contactdetail">

<span class="heading2">Email:</span><a href="mailto:[email protected]?subject=Enquiry" span class="contactlinks"><br>[email protected]</a><br>
<span class="heading2">Phone:</span><span class="maintext"><br>07770 855143</span><br>
<span class="heading2">Portfolio:</span><a href="TimDarker_TFOH_portfolio_small.pdf.zip" span class="contactlinks"><br>download 3MB pdf</a><br>
</div>
</div>

</div>
<div id="mainhide"> </div>


</div>
</div>

</body>

//<!-- End of code for body -->//
</html>


here is the external stylesheet css:



@charset "UTF-8";

{ border-style: none;
}

BODY {overflow-x: hidden}

#container {
position: fixed;
width: 1000px;
height:4000px;
top:0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
left: 0px;
top: 0px;

}

#container2 {
width: 1350px;
height:4000px;
top: 25px;
left:25px;
margin-right: 25px;
margin-bottom: 25px;
position: absolute;
left: 0px;
top: 0px;

}

#printcontainer2 {
width: 1350px;
height:10150px;
top: 25px;
left:25px;
margin-right: 25px;
margin-bottom: 25px;
position: absolute;
left: 0px;
top: 0px;
}

#webcontainer2 {
width: 1350px;
height:2125px;
top: 25px;
left:25px;
margin-right: 25px;
margin-bottom: 25px;
position: absolute;
left: 0px;
top: 0px;

}

#filmcontainer2 {
width: 1350px;
height:2350px;
top: 25px;
left:25px;
margin-right: 25px;
margin-bottom: 25px;
position: absolute;
left: 0px;
top: 0px;
}

#blogcontainer2 {
width: 1350px;
height:800px;
top: 25px;
left:25px;
margin-right: 25px;
margin-bottom: 25px;
position: absolute;
left: 0px;
top: 0px;
}

#honestycontainer2 {
width: 1350px;
height:700px;
top: 25px;
left:25px;
margin-right: 25px;
margin-bottom: 25px;
position: absolute;
left: 0px;
top: 0px;
}

#motioncontainer2 {
width: 1350px;
height:1125px;
top: 25px;
left:25px;
margin-right: 25px;
margin-bottom: 25px;
position: absolute;
left: 0px;
top: 0px;
}

#linkcontainer2 {
width: 1350px;
height:752px;
top: 25px;
left:25px;
margin-right: 25px;
margin-bottom: 25px;
position: absolute;
left: 0px;
top: 0px;
}


#indexcontainer2 {
width: 1000px;
height:1500px;
top: 25px;
left:25px;
margin-right: auto;
margin-left: auto;
margin-bottom: 25px;
position: absolute;
left: 0px;
top: 0px;
}




#background {
width: 1700px;
height:4000px;
position: fixed;
left: 0px;
top: 0px;
background-image: url(images/tile1.gif);


}



#body {
position:fixed;
background-image: url(images/tile1.gif);
}


#nav {
position:fixed;
left:25px;
top:25px;
height: 125px;
width: 175px;
background-color: #000000;
margin: 0px;
padding-left: 25px;
padding-right: 25px;
z-index: 2;
}


#navlinks {
position: absolute;
left:0px;
top:137px;
height: 475px;
width: 175px;
background-color: #000000;
margin: 0px;
padding-left: 25px;
padding-right: 25px;
padding-top: 25px;
}

#navlinks2 {
position: absolute;
left:0px;
top:137px;
height: 1500px;
width: 175px;
background-color: #000000;
margin: 0px;
padding-left: 25px;
padding-right: 25px;
padding-top: 25px;
}



#logo {
position:absolute;
left:25px;
top:25px;
width:175px;
height:85px;
background-image: url(images/tfoh_logo175.gif);
}

#mainhide {
position:fixed;
left:250px;
top:0px;
height: 25px;
width: 825px;
margin: 0px;
z-index: 0;
background-image: url(images/tile1.gif);

}

#bottomhide {
position:fixed;
left:250px;
bottom:0px;
height: 25px;
width: 1300px;
margin: 0px;
z-index: 0;
background-image: url(images/tile1.gif);

}

#main {
position: absolute;
top:0px;
height: 7000px;
width: 704px;
background-color: #000000;
margin: 0px;
padding-top: 25px;
padding-left: 25px;
padding-right: 25px;
z-index: 0;
margin-left: 265px;
}

#mainholder {
position: absolute;
left:0px;
top:0px;
height: 10930px;
width: 704px;
background-color: #000000;
margin: 0px;
padding-top: 25px;
padding-left: 25px;
padding-right: 25px;
z-index: 0;
}

#mainhonesty {
position: absolute;
left:265px;
top:25px;
height: 637px;
width: 704px;
background-color: #000000;
margin: 0px;
padding-left: 25px;
padding-right: 25px;
z-index: 0;
}

#mainfilm {
position: absolute;
left:265px;
top:25px;
height:2325px;
width: 704px;
background-color: #000000;
margin: 0px;
padding-left: 25px;
padding-right: 25px;
z-index: 0;
}

#mainprint {
position: absolute;
left:265px;
top:25px;
height: 10100px;
width: 704px;
background-color: #000000;
margin: 0px;
padding-left: 25px;
padding-right: 25px;
z-index: 0;
}

#mainweb {
position: absolute;
left:265px;
top:25px;
height: 2900px;
width: 704px;
background-color: #000000;
margin: 0px;
padding-left: 25px;
padding-right: 25px;
z-index: 0;
}

#mainmotion {
position: absolute;
left:265px;
top:25px;
height: 1125px;
width: 704px;
background-color: #000000;
margin: 0px;
padding-left: 25px;
padding-right: 25px;
z-index: 0;
}

#mainblog {
position: absolute;
left:265px;
top:25px;
height: 2375px;
width: 704px;
background-color: #000000;
margin: 0px;
padding-left: 25px;
padding-right: 25px;
z-index: 0;
}

#mainlinks {
position: absolute;
left:265px;
top:25px;
height: 637px;
width: 704px;
background-color: #000000;
margin: 0px;
padding-left: 25px;
padding-right: 25px;
z-index: 0;
}






#saying {
position:fixed;
left:1034px;
top:25px;
height: 125px;
width: 175px;
background-color: #000000;
padding-left: 25px;
padding-right: 25px;
z-index: 2;

}

#sayinglogo {
position:absolute;
left:25px;
top:25px;
width:175px;
height:97px;
background-image: url(images/saying175.gif);
}


#contact {
position:fixed;
left:1034px;
top:162px;
height: 3869px;
width: 175px;
background-color: #000000;
margin: 0px;
padding-left: 25px;
padding-right: 25px;
}

#contact2 {
position:fixed;
left:1034px;
top:162px;
height: 500px;
width: 175px;
background-color: #000000;
margin: 0px;
padding-left: 25px;
padding-right: 25px;
}

#contactdetail {
position: absolute;
left:0px;
top:25px;
height: 50px;
width: 200px;
background-color: #000000;
margin: 0px;
padding-left: 25px;
}





.links {
font-family: Arial, Helvetica, sans-serif;
color: #000000;
font-size: 20px;
font-weight: bold;
text-decoration: none;
}

.heading1 {
font-family: Arial, Helvetica, sans-serif;
color: #FFFF00;
font-size: 24px;
font-weight: bold;
}

.heading2 {
font-family: Arial, Helvetica, sans-serif;
color: #FFFF00;
font-size: 12px;
font-weight: bold;
}

.maintext {
font-family: Arial, Helvetica, sans-serif;
color: #FFFFFF;
font-size: 12px;
}

.honesty {
font-family: Arial, Helvetica, sans-serif;
color: #FFFFFF;
font-size: 14px;
}


a.contactlinks {
font-family: Arial, Helvetica, sans-serif;
color: #FFFFFF;
font-size: 12px;
text-decoration: none;
}

a:hover.contactlinks {
color: #FFFFFF;
font-size: 12px;
text-decoration: underline;
}

a.navlinks {
font-family: Arial, Helvetica, sans-serif;
color: #FFFFFF;
font-size: 24px;
font-weight: bold;
line-height: 20px;
text-decoration: none;
}

a:hover.navlinks {
color: #FFFF00;
font-size: 24px;
padding-left: 10px;
}
a.navlinkpage {
font-family: Arial, Helvetica, sans-serif;
color: #FFFF00;
font-size: 24px;
font-weight: bold;
line-height: 20px;
text-decoration: none;

}




a.typelinks {
font-family: Arial, Helvetica, sans-serif;
color: #999999;
font-size: 12px;
font-weight: bold;
}

a:hover.typelinks {
color: #FFFFFF;
font-size: 12px;
text-decoration: underline;
}



p.border
{
border-style:solid;
border-color:#FFFFFF;
border-width:2px;
}




Thanks again for helping :)

mbaker
Jul 14th, 2010, 01:27 PM
I've been playing around with this for too long, so have not got to a conclusion.

However the following may assist others looking at this. I've put all of the html and css into one file with a base tag to pull in the images. I've also corrected lots of invalid xhtml and removed redundant code.

It would probably be a very good idea to do this entirely without absolutely positioned divs.


<!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>
<base href="http://www.thefutureofhistory.co.uk/" /> <!-- delete this base tag from production pages -->
<link rel="icon"
type="image/png"
href="images/tfoh_favicon.png" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>The Future Of History</title>

<script src="Scripts/AC_RunActiveContent.js" type="text/javascript">
</script>
<style type="text/css">
<!--
.style1 {color: #FFFF00}

body {overflow-x: hidden;}

#indexcontainer2 {
top: 25px;
left:25px;
margin-right: auto;
margin-left: auto;
margin-bottom: 25px;
position: absolute;
left: 0px;
top: 0px;
}

#background {
width: 100%;
height:100%;
position: fixed;
left: 0px;
top: 0px;
background-image: url(images/tile1.gif);
}

#nav {
position:fixed;
left:25px;
top:25px;
height: 125px;
width: 175px;
background-color: #000000;
margin: 0px;
padding-left: 25px;
padding-right: 25px;
z-index: 2;
}

#navlinks {
position: absolute;
left:0px;
top:137px;
height: 475px;
width: 175px;
background-color: #000000;
margin: 0px;
padding-left: 25px;
padding-right: 25px;
padding-top: 25px;
}

#logo {
position:absolute;
left:25px;
top:25px;
width:175px;
height:85px;
background-image: url(images/tfoh_logo175.gif);
}

#mainhide {
position:fixed;
left:250px;
top:0px;
height: 25px;
width: 825px;
margin: 0px;
z-index: 0;
background-image: url(images/tile1.gif);

}

#main {
position: absolute;
top:0px;
background-color: #000000;
margin: 0px;
padding-top: 25px;
padding-left: 25px;
padding-right: 25px;
z-index: 0;
margin-left: 265px;
}

#mainholder {
position: absolute;
left:0px;
top:0px;
width: 704px;
background-color: #000000;
margin: 0px;
padding-top: 25px;
padding-left: 25px;
padding-right: 25px;
z-index: 0;
}

#saying {
position:fixed;
left:1034px;
top:25px;
height: 125px;
width: 175px;
background-color: #000000;
padding-left: 25px;
padding-right: 25px;
z-index: 2;

}

#sayinglogo {
position:absolute;
left:25px;
top:25px;
width:175px;
height:97px;
background-image: url(images/saying175.gif);
}

#contact2 {
position:fixed;
left:1034px;
top:162px;
height: 500px;
width: 175px;
background-color: #000000;
margin: 0px;
padding-left: 25px;
padding-right: 25px;
}

#contactdetail {
position: absolute;
left:0px;
top:25px;
height: 50px;
width: 200px;
background-color: #000000;
margin: 0px;
padding-left: 25px;
}

.heading1 {
font-family: Arial, Helvetica, sans-serif;
color: #FFFF00;
font-size: 24px;
font-weight: bold;
}

.heading2 {
font-family: Arial, Helvetica, sans-serif;
color: #FFFF00;
font-size: 12px;
font-weight: bold;
}

.maintext {
font-family: Arial, Helvetica, sans-serif;
color: #FFFFFF;
font-size: 12px;
}

a.contactlinks {
font-family: Arial, Helvetica, sans-serif;
color: #FFFFFF;
font-size: 12px;
text-decoration: none;
}

a:hover.contactlinks {
color: #FFFFFF;
font-size: 12px;
text-decoration: underline;
}

a.navlinks {
font-family: Arial, Helvetica, sans-serif;
color: #FFFFFF;
font-size: 24px;
font-weight: bold;
line-height: 20px;
text-decoration: none;
}

a:hover.navlinks {
color: #FFFF00;
font-size: 24px;
padding-left: 10px;
}
a.navlinkpage {
font-family: Arial, Helvetica, sans-serif;
color: #FFFF00;
font-size: 24px;
font-weight: bold;
line-height: 20px;
text-decoration: none;

}

-->
</style>
</head>
<body>
<div id="background"> </div> <!-- end of background -->

<div id="indexcontainer2">

<div id="nav">

<div id="saying">
<div id="sayinglogo">
</div> <!-- end of sayinglogo -->
</div> <!-- end of saying -->

<div id="logo"> </div> <!-- end of logo -->

<div id="navlinks">

<a href="index.html" class="navlinkpage">Latest</a><br/>
<a href="web.html" class="navlinks">Web</a><br/>
<a href="print.html" class="navlinks">Print</a><br/>
<a href="film.html" class="navlinks">Film</a><br/>
<a href="motion.html" class="navlinks">Motion</a><br/>
<a href="blog.html" class="navlinks">Blog</a><br/>
<a href="honesty.html" class="navlinks">Honesty</a><br/>
<a href="links.html" class="navlinks">Links</a><br/>
</div> <!-- end of navlinks -->
</div> <!-- end of nav -->

<div id="main">
<div id="mainholder">

<p class="heading1">Main content here.</p>
<p class="maintext">.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/></p>

</div> <!-- end of mainholder -->

<div id="contact2">

<div id="contactdetail">

<span class="heading2">Email:</span><a href="mailto:[email protected]?subject=Enquiry" class="contactlinks"><br/>[email protected]</a><br/>
<span class="heading2">Phone:</span><span class="maintext"><br/>07770 855143</span><br/>
<span class="heading2">Portfolio:</span><a href="TimDarker_TFOH_portfolio_small.pdf.zip" class="contactlinks"><br/>download 3MB pdf</a><br/>
</div> <!-- end of contactdetail -->
</div> <!-- end of contact2 -->

</div> <!-- end of main -->
<div id="mainhide"> </div> <!-- end of mainhide -->


</div> <!-- end of indexcontainer2 -->

</body>

<!-- End of code for body -->
</html>

TFOH
Jul 14th, 2010, 01:47 PM
Thanks for looking anyway mbaker. I might try this again not using absolute positioning at all as you suggested. By the way what code needed cleaning up?:confused:

mbaker
Jul 14th, 2010, 05:17 PM
I've added comments to point out errors in your code.

You can find these by using the W3C validator - URL in my sig below.


<!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">
<link rel="icon"
type="image/png"
href="images/tfoh_favicon.png"> <!-- you have declared this xhtml, so this link tag should be self closing (as are the meta and link tags before and after the title) -->
<head> <!-- should appear immediately after the html tag, ie before the above link tag -->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>The Future Of History</title>
<link href="mainstyle.css" rel="stylesheet" type="text/css" />




</script> <!-- you are closing a script that is not open -->
<script src="Scripts/AC_RunActiveContent.js" type="text/javascript">
</script>
<style type="text/css">

<!--
.style1 {color: #FFFF00}
-->
</style>
</head>
<div id="background"> </div> <!-- the only tag that is valid after the closing head tag is the opening body tag -->

<body style=" margin-top: 25px; margin-bottom: 25px; margin-left: auto; margin-right: auto;> <!-- the style attribute is not closed with a double quote -->






<div id="container"> <!-- this tag is likely ignored by most brwosers because it provides the first double quote since the unclosed style attribute above -->

<div id="indexcontainer2">


<div id="nav">

<div id="saying">
<div id="sayinglogo">
</div>
</div>


<div id="logo"> </div>


<div id="navlinks">




<a href="index.html" span class="navlinkpage">Latest</a> <!-- there is no span attribute to any tag --> <br> <!-- br tags are self closing in xhtml -->
<a href="web.html" span class="navlinks">Web</a> <!-- there is no span attribute to any tag --> <br> <!-- br tags are self closing in xhtml -->
<a href="print.html" span class="navlinks">Print</a> <!-- there is no span attribute to any tag --> <br> <!-- br tags are self closing in xhtml -->
<a href="film.html" span class="navlinks">Film</a> <!-- there is no span attribute to any tag --> <br> <!-- br tags are self closing in xhtml -->
<a href="motion.html" span class="navlinks">Motion</a> <!-- there is no span attribute to any tag --> <br> <!-- br tags are self closing in xhtml -->
<a href="blog.html" span class="navlinks">Blog</a> <!-- there is no span attribute to any tag --> <br> <!-- br tags are self closing in xhtml -->
<a href="honesty.html" span class="navlinks">Honesty</a> <!-- there is no span attribute to any tag --> <br> <!-- br tags are self closing in xhtml -->
<a href="links.html" span class="navlinks">Links</a> <!-- there is no span attribute to any tag --> <br> <!-- br tags are self closing in xhtml -->
</p> <!-- you are closing a p that is not open --> </div>
</div>


<div id="main">
<div id="mainholder">









</div>

<div id="contact2">

<div id="contactdetail">

<span class="heading2">Email:</span><a href="mailto:[email protected]?subject=Enquiry" span class="contactlinks"> <!-- there is no span attribute to any tag --> <br> <!-- br tags are self closing in xhtml --> <!-- br tags are self closing in xhtml --> [email protected]co.uk</a><br> <!-- br tags are self closing in xhtml -->
<span class="heading2">Phone:</span><span class="maintext"><br> <!-- br tags are self closing in xhtml --> 07770 855143</span><br> <!-- br tags are self closing in xhtml -->
<span class="heading2">Portfolio:</span><a href="TimDarker_TFOH_portfolio_small.pdf.zip" span class="contactlinks"> <!-- there is no span attribute to any tag --> <br> <!-- br tags are self closing in xhtml --> download 3MB pdf</a><br> <!-- br tags are self closing in xhtml -->
</div>
</div>

</div>
<div id="mainhide"> </div>


</div>
</div>

</body>

//<!-- End of code for body -->// <!-- // is not allowed outside of a tag in an xhtml (or html) document -->
</html>