PDA

View Full Version : Help expanding Container when left col expands!!



nmb1106
Sep 16th, 2009, 01:23 AM
Alright this is bugging the hell out of me. I want to display my homework pages with behaviors and layers in Dreamweaver. I got the behaviors working and all that good stuff. When I overflow my middle column the container div expands. But when I overflow my left column it doesn't expand the container, rather it just spills over it. I have this working in my old site and tried using that css but that was old and I did the coding differently, I'm not sure why that css won't work with this site. Here's my css, please help me pick out the solution.


@charset "utf-8";

body {
margin: 0;
padding: 0;
font: 100% Verdana, Arial, Helvetica, sans-serif;
text-align: center;
color: #000000;
}


#container {
width: 46em;
background: #FFFFFF;
margin: 0 auto;
border: 1px solid #000000;
text-align: left;
}

#header {
background: #000066;
padding: 0 10px;
background-image: url(file:///C|/0mySite/images/class.png);
background-repeat: no-repeat;
}

#header a{
text-decoration: none;
color: #FFFFFF;
}

#header h1 {
margin: 0;
color: #FFFFFF;
padding: 10px 0;
}

#header h3{
margin: 0;
color: #FFFFFF;
padding: 10px 0;
}

#left_column {
float: left;
width: 11em;
background: #FFFFFF;
padding: 10px 0;
overflow:hidden;
margin: 0 auto;
}

#right_column {
float: right;
width: 11em;
background: #FFFFFF;
padding: 10px 0;
}


#right_column ul li{
list-style-type: none;
}


#left_column h3, #left_column p, #right_column p, #right_column h3 {
margin-left: 12px;
margin-right: 12px;
}

#left_column ol li{
list-style-type: none;
margin: 0 auto;
;
}

#left_column a{
text-decoration: none;
}

#left_column a:hover{
text-decoration:underline;
}

#mainContent {
border: solid;
border-color: #000;
border-width: 0 0px 0 0px;
margin: 0 12em 0 12em;
}


#mainContent a{
color: #000000;
font-weight: bold;
}

#mainContent a:hover{
color: #000033;
font-weight: bold;
}

#footer {
padding: 0 10px;
background-color:#000066;
text-align: center;
}

#footer p {

margin: 0;
padding: 10px 0;
color: #FFFFFF;
text-align:center;
}

#topnav ul {
background-color: #000000;
}

#topnav li {
list-style-type: none;
display: inline;
}

#topnav a {
margin-right: 5%;
margin-left: 5%;
text-decoration: none;
color: #FFFFFF;
}

#topnav a:hover {
color: #FFFFFF;
background-color: #666666;
}


Thank you very much, any help appreciated. Were supposed to be reviewing this before we start doing drupal sites and I'm not really sure why I even want to put this in, its not required I just prefer, less loading time for users the better.

zip_000
Sep 16th, 2009, 08:01 PM
It would be helpful if you posted the html and/or a link.

nmb1106
Sep 16th, 2009, 08:09 PM
Sorry didn't know if you needed it.
Here it is:

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

<body>
<div id="container">
<!--<a href="../index.html" title="My CS340 Home Page"> -->
<div id="header">
<a href="../index.html" title="My CS340 Home Page"><h1>&nbsp;</h1>
<h1>Nolan Brassard</h1>
</a>


<div id="topnav">
<ul>
<li><a href="../index.html" title="My CS340 Home Page">Home</a> </li>
<li>|</li>
<li><a href="projects.html" title="My CS340 Projects">Projects</a></li>
<li>|</li>

<li><a href="homework.html" title="My CS340 Homework">Homework</a></li>
<li>|</li>
<li><a href="aboutme.html" title="My CS340 About Me">About Me</a></li>
</ul>
<!--- end #topnav --></div>
<!-- end #header --> </div>

<div id="left_column">

<h3>Most Recent</h3>
<!-- end #left_column --></div>

<div id="right_column">
<h3>Next Project</h3>
<!-- end #rigth_column --></div>

<div id="mainContent">
<h3>Projects will be posted here!</h3>

<h4>List of projects</h4>
<ol>
<li>First Project</li>

<li>Second Project</li>
<li>Third Project</li>
</ol>
<!-- end #mainContent --></div>

<div id="footer">
<p>Nolan Brassard - [email protected]</p>
<!-- end #footer --></div>

<!-- end #container --></div>
</body>

</html>