I've got some rather ugly code that I'll be cleaning up (promise), but I am having trouble getting an internal container div to lengthen to meet the height of the two divs inside. 'Height: auto' doesn't work. I can't set it as a fixed pixelated height since the 'leftmain' div is fluid. I know that I could set this as a three-column layout, but I have other layouts that will have two fluid columns that need to generate one height for the 'rightmain'.
Also, I can't get my 'copyright' div to reposition itself based on the height of the other columns.
Cheers.
/*
This is the file that controls all of the styling for each webpage.
If you plan to make any changes, please make a back-up copy of this file to prevent any Snafus.
Comments are added to help direct.
Good luck.
--Callie.
*/
/*-----------------------------------------------------------------------------------------------------------------*/
/* Sets the width of the content and background color */
body {
background-color: #508184;
font-size: 10px;
}
div#container{
width: 800px;
margin: 0 auto;
}
/*-----------------------------------------------------------------------------------------------------------------*/
/* Header section for committee logo */
div#logo {
position:relative;
width: 800px;
height: 112px;
background-image: url(header2.gif);
text-indent: -9000px;
}
/*-----------------------------------------------------------------------------------------------------------------*/
/* main section width, features, etc. */
div#main {
width: 800px;
background: #508184;
}
/* floating right column (basically the main fluid content). If you have to edit something, edit this. */
div#mainpage {
position: absolute;
margin-top: -1px;
margin-left: 204px;
width: 594px;
background-color: #E8E8D0;
font-family:Arial, Helvetica, sans-serif;
height: auto;
}
div#leftmain {
position: absolute;
width: 390px;
background-color: #E8E8D0;
margin-left:0px;
}
div#topnav {
width: 390px;
padding-left: 150px;
position: relative;
margin-top: 3px;
}
div#topnav a {
color:#8B181B;
}
div#news {
margin-top: 20px;
width: 390px;
margin-left: 3px;
background-image: url(components/newsbg.gif);
background-position:top;
background-repeat:repeat-y;
}
div#news p {
padding-right: 20px;
padding-left: 20px;
font-size: 110%;
}
div#newsinclude {
width: 370px;
margin-left: 20px;
}
div#newsinclude a {
color:#8B181B;
}
div#rightmain {
width: 196px;
height: 455px;
background-color:#e8e8d0;
position: absolute;
margin-left: 397px;
padding-right: 3px;
}
/*-----------------------------------------------------------------------------------------------------------------*/
/* floating left column includes the nav bar and all content below. Editing could result in a world of pain. */
div#pagelinks {
position: absolute;
margin-top: -1px;
width: 200px;
background-color: #CCCC99;
}
div#emailsignup {
width: 200px;
font-family: Arial, Helvetica, sans-serif;
background-color: #8B181B;
color: #E8E8D0;
}
div#emailsignup p {
padding-right: 10px;
padding-left: 10px;
margin-top: 0px;
text-align: center;
font-size: 110%;
}
div#emailsignup form {
position:relative;
margin-top: -8px;
}
div#contact-left {
width: 200px;
font-family: Arial, Helvetica, sans-serif;
background-color: #CCCC99;
}
div#contact-left p {
text-align: center;
padding-left: 10px;
padding-right: 10px;
font-size: 110%;
margin-top: 0px;
margin-bottom: 0px;
}
/*------------------------------------------------------------------------------------------*/
/* Bottom header and disclaimer. Do what you will. */
div#copyright {
position: absolute;
margin-top: 5px;
clear: both;
}
div#copyright p {
font-family: Arial, Helvetica, sans-serif;
font-size: 110%;
color: #000000;
text-align: center;
margin-left: 100px;
margin-right: 100px;
}
/*------------------------------------------------------------------------------------------*/
/* Form customization stuff. */
input.name {
background-color: #E8E8D0;
border-color: #660000;
border-width: 1px;
font-family:Arial, Helvetica, sans-serif;
font-size: 11px;
padding-left: 5px;
margin-left: 10px;
color:#666666;
vertical-align:middle;
}
input.emailaddress {
position: relative;
margin-top: 3px;
background-color: #E8E8D0;
border-color: #660000;
border-width: 1px;
font-family:Arial, Helvetica, sans-serif;
font-size: 11px;
padding-left: 5px;
color:#666666;
vertical-align:middle;
margin-left: 10px;
height: 16px;
width: 97px;
}
input.search {
position: absolute;
margin-top: 3px;
background-color: #ffffff;
border-color: #660000;
border-width: 1px;
font-family:Arial, Helvetica, sans-serif;
font-size: 11px;
padding-left: 5px;
color:#666666;
vertical-align:middle;
height: 16px;
width: 97px;
}
input.buttonred {
position: absolute;
margin-top: 3px;
vertical-align: middle;
}
/*------------------------------------------------------------------------------------------*/
/* General layout tags. Again, editing will result in design havoc. */
img.top {
vertical-align: top;
}
img.bottom {
vertical-align: bottom;
}
img.margin-top {
position: relative;
margin-top: 10px}
img.calendar {
margin-left: 9px;
margin-top: 4px;
}
img.webcast1 {
position: absolute;
top: 36px;
}
img.webcast2 {
position: absolute;
top:173px;
}
img.chairtitle {
position: absolute;
top:236px;
}
img.chairpic {
position: absolute;
top:276px;
}
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Index 2</title>
<link rel="stylesheet" href=http://www.webdeveloper.com/forum/archive/index.php/"style.css" type="text/css">
</head>
<body>
<div id="container">
<div id="logo">U.S. House of Representatives Committee on International Relations
</div>
<div id="pagelinks">
<?php include ("includes/leftnav.inc"); ?>
<img class="bottom" src=http://www.webdeveloper.com/forum/archive/index.php/"roundedges/roundbottombeige.gif">
<div id="emailsignup">
<img class="top" src=http://www.webdeveloper.com/forum/archive/index.php/"roundedges/roundtopred.gif">
<p>Sign up to receive Committee weekly schedules and press releases.</p>
<?php include ("includes/emailsignup.inc"); ?>
<img class="bottom" src=http://www.webdeveloper.com/forum/archive/index.php/"roundedges/roundbottomred.gif">
</div>
<div id="contact-left">
<img src=http://www.webdeveloper.com/forum/archive/index.php/"roundedges/roundtopbeige.gif" class="top">
<p><?php include ("includes/leftaddress.inc"); ?></p>
<img src=http://www.webdeveloper.com/forum/archive/index.php/"roundedges/roundbottombeige.gif" class="bottom">
</div>
</div>
<div id="mainpage">
<div id="leftmain">
<div id="topnav">
<?php include("includes/topnav.inc"); ?>
</div>
<div id="news">
<img src=http://www.webdeveloper.com/forum/archive/index.php/"titles/newstitle.gif">
<div id="newsinclude">
<?php include("includes/newsmain.inc"); ?>
</div>
<img src=http://www.webdeveloper.com/forum/archive/index.php/"components/newsbgbottom.gif" class="bottom">
</div>
<img src=http://www.webdeveloper.com/forum/archive/index.php/"calendars/feb06.gif" class="calendar">
</div>
<div id="rightmain">
<?php include("includes/search.inc"); ?>
</div>
<img src=http://www.webdeveloper.com/forum/archive/index.php/"roundedges/roundbottomcenter.gif" class="bottom" width=596>
</div>
<div id="copyright">
</div>
</div>
</body>
</html>Ditch the position:absolute.where? everywhere?I took it out of the leftmain and rightmain, but now my mainpage is too tall.You said your problem was with your copyright div so that's what I was refering to. If you'll put that on the Internet and give us a URL then you'll get more feedback.
Ok, I found a page by looking up your other posts but I don't know if it's the latest. Doesn't look like it to me.
Also, I can't get my 'copyright' div to reposition itself based on the height of the other columns.
Cheers.
/*
This is the file that controls all of the styling for each webpage.
If you plan to make any changes, please make a back-up copy of this file to prevent any Snafus.
Comments are added to help direct.
Good luck.
--Callie.
*/
/*-----------------------------------------------------------------------------------------------------------------*/
/* Sets the width of the content and background color */
body {
background-color: #508184;
font-size: 10px;
}
div#container{
width: 800px;
margin: 0 auto;
}
/*-----------------------------------------------------------------------------------------------------------------*/
/* Header section for committee logo */
div#logo {
position:relative;
width: 800px;
height: 112px;
background-image: url(header2.gif);
text-indent: -9000px;
}
/*-----------------------------------------------------------------------------------------------------------------*/
/* main section width, features, etc. */
div#main {
width: 800px;
background: #508184;
}
/* floating right column (basically the main fluid content). If you have to edit something, edit this. */
div#mainpage {
position: absolute;
margin-top: -1px;
margin-left: 204px;
width: 594px;
background-color: #E8E8D0;
font-family:Arial, Helvetica, sans-serif;
height: auto;
}
div#leftmain {
position: absolute;
width: 390px;
background-color: #E8E8D0;
margin-left:0px;
}
div#topnav {
width: 390px;
padding-left: 150px;
position: relative;
margin-top: 3px;
}
div#topnav a {
color:#8B181B;
}
div#news {
margin-top: 20px;
width: 390px;
margin-left: 3px;
background-image: url(components/newsbg.gif);
background-position:top;
background-repeat:repeat-y;
}
div#news p {
padding-right: 20px;
padding-left: 20px;
font-size: 110%;
}
div#newsinclude {
width: 370px;
margin-left: 20px;
}
div#newsinclude a {
color:#8B181B;
}
div#rightmain {
width: 196px;
height: 455px;
background-color:#e8e8d0;
position: absolute;
margin-left: 397px;
padding-right: 3px;
}
/*-----------------------------------------------------------------------------------------------------------------*/
/* floating left column includes the nav bar and all content below. Editing could result in a world of pain. */
div#pagelinks {
position: absolute;
margin-top: -1px;
width: 200px;
background-color: #CCCC99;
}
div#emailsignup {
width: 200px;
font-family: Arial, Helvetica, sans-serif;
background-color: #8B181B;
color: #E8E8D0;
}
div#emailsignup p {
padding-right: 10px;
padding-left: 10px;
margin-top: 0px;
text-align: center;
font-size: 110%;
}
div#emailsignup form {
position:relative;
margin-top: -8px;
}
div#contact-left {
width: 200px;
font-family: Arial, Helvetica, sans-serif;
background-color: #CCCC99;
}
div#contact-left p {
text-align: center;
padding-left: 10px;
padding-right: 10px;
font-size: 110%;
margin-top: 0px;
margin-bottom: 0px;
}
/*------------------------------------------------------------------------------------------*/
/* Bottom header and disclaimer. Do what you will. */
div#copyright {
position: absolute;
margin-top: 5px;
clear: both;
}
div#copyright p {
font-family: Arial, Helvetica, sans-serif;
font-size: 110%;
color: #000000;
text-align: center;
margin-left: 100px;
margin-right: 100px;
}
/*------------------------------------------------------------------------------------------*/
/* Form customization stuff. */
input.name {
background-color: #E8E8D0;
border-color: #660000;
border-width: 1px;
font-family:Arial, Helvetica, sans-serif;
font-size: 11px;
padding-left: 5px;
margin-left: 10px;
color:#666666;
vertical-align:middle;
}
input.emailaddress {
position: relative;
margin-top: 3px;
background-color: #E8E8D0;
border-color: #660000;
border-width: 1px;
font-family:Arial, Helvetica, sans-serif;
font-size: 11px;
padding-left: 5px;
color:#666666;
vertical-align:middle;
margin-left: 10px;
height: 16px;
width: 97px;
}
input.search {
position: absolute;
margin-top: 3px;
background-color: #ffffff;
border-color: #660000;
border-width: 1px;
font-family:Arial, Helvetica, sans-serif;
font-size: 11px;
padding-left: 5px;
color:#666666;
vertical-align:middle;
height: 16px;
width: 97px;
}
input.buttonred {
position: absolute;
margin-top: 3px;
vertical-align: middle;
}
/*------------------------------------------------------------------------------------------*/
/* General layout tags. Again, editing will result in design havoc. */
img.top {
vertical-align: top;
}
img.bottom {
vertical-align: bottom;
}
img.margin-top {
position: relative;
margin-top: 10px}
img.calendar {
margin-left: 9px;
margin-top: 4px;
}
img.webcast1 {
position: absolute;
top: 36px;
}
img.webcast2 {
position: absolute;
top:173px;
}
img.chairtitle {
position: absolute;
top:236px;
}
img.chairpic {
position: absolute;
top:276px;
}
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Index 2</title>
<link rel="stylesheet" href=http://www.webdeveloper.com/forum/archive/index.php/"style.css" type="text/css">
</head>
<body>
<div id="container">
<div id="logo">U.S. House of Representatives Committee on International Relations
</div>
<div id="pagelinks">
<?php include ("includes/leftnav.inc"); ?>
<img class="bottom" src=http://www.webdeveloper.com/forum/archive/index.php/"roundedges/roundbottombeige.gif">
<div id="emailsignup">
<img class="top" src=http://www.webdeveloper.com/forum/archive/index.php/"roundedges/roundtopred.gif">
<p>Sign up to receive Committee weekly schedules and press releases.</p>
<?php include ("includes/emailsignup.inc"); ?>
<img class="bottom" src=http://www.webdeveloper.com/forum/archive/index.php/"roundedges/roundbottomred.gif">
</div>
<div id="contact-left">
<img src=http://www.webdeveloper.com/forum/archive/index.php/"roundedges/roundtopbeige.gif" class="top">
<p><?php include ("includes/leftaddress.inc"); ?></p>
<img src=http://www.webdeveloper.com/forum/archive/index.php/"roundedges/roundbottombeige.gif" class="bottom">
</div>
</div>
<div id="mainpage">
<div id="leftmain">
<div id="topnav">
<?php include("includes/topnav.inc"); ?>
</div>
<div id="news">
<img src=http://www.webdeveloper.com/forum/archive/index.php/"titles/newstitle.gif">
<div id="newsinclude">
<?php include("includes/newsmain.inc"); ?>
</div>
<img src=http://www.webdeveloper.com/forum/archive/index.php/"components/newsbgbottom.gif" class="bottom">
</div>
<img src=http://www.webdeveloper.com/forum/archive/index.php/"calendars/feb06.gif" class="calendar">
</div>
<div id="rightmain">
<?php include("includes/search.inc"); ?>
</div>
<img src=http://www.webdeveloper.com/forum/archive/index.php/"roundedges/roundbottomcenter.gif" class="bottom" width=596>
</div>
<div id="copyright">
</div>
</div>
</body>
</html>Ditch the position:absolute.where? everywhere?I took it out of the leftmain and rightmain, but now my mainpage is too tall.You said your problem was with your copyright div so that's what I was refering to. If you'll put that on the Internet and give us a URL then you'll get more feedback.
Ok, I found a page by looking up your other posts but I don't know if it's the latest. Doesn't look like it to me.