2 replies [Last post]
ikerson
ikerson's picture
Offline
newbie
Last seen: 12 years 28 weeks ago
Timezone: GMT-4
Joined: 2010-04-08
Posts: 7
Points: 10

I am creating a draft two column floating CSS/HTML template page. Everything was fine until I started to break up the unorder lists into smaller lists and titling them with header tags in the right column. Now the right column is overflowing into the container when it reaches the bottom of the left column. This happens in all my browsers: Chrome, IE 8, Opera, Firefox, Safari. I have tried the following:

1) Expanding the width of the container to leave space between columns.
2) Reducing the width of the right column, unordered lists, list items, and headers in right column.
3) Checking for missing closing tags on divs and a whole missing div.
4) Clearing floats with "float : auto" in the container and right column divs. (The best I could do is make the overflowing tags disappear with "float : hidden".)
5) Running code through Tidy and CSS validator.

I guess there is a simple fix I'm overlooking.

Below is a link to a sample page, a picture of the page, and the code. Thanks for your help in advance!

Sample Page: http://www.westchesterenglish.com/NewWCE.html

Picture of page:
//www.westchesterenglish.com/images/sampleoverflowpage.jpg

<!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" xml:lang="en" lang="en">
<head>
<title>New WCE V2</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
 
body { 
font : 76%/160% Tahoma, Verdana, Arial, sans-serif; 
color : #5a1c46; 
text-align : center; }
 
div#container { 
width : 783px; 
margin : 0 auto; 
padding : 0; 
text-align : left;}
 
#navlist {
padding: 3px 0 0 0;
margin-left: 0;
border-bottom: 1px solid #778;
font: bold 12px Verdana, sans-serif;
}
 
#navlist li {
list-style: none;
margin: 0;
display: inline;
}
 
#navlist li a {
padding: 3px 0.5em;
margin-left: 3px;
border: 1px solid #778;
border-bottom: none;
background: #DDE;
text-decoration: none;
}
 
#navlist li a:link { color: #448; }
#navlist li a:visited { color: #667; }
 
#navlist li a:hover {
color: #000;
background: #AAE;
border-color: #227;
}
 
#navlist li a#current {
background: white;
border-bottom: 1px solid white;
}
 
div#content { 
width : 100%; 
background-color : #c898ae;
overflow: auto; 
}
 
div#content_main { 
float : left; 
width : 540px;
margin : 0; 
padding : 0; 
background-color : #fff; 
}
 
#content_sub div {
float : right; 
width : 240px; 
margin : 0; 
padding : 0; 
background-color : #cfddff; 
}
 
#content_sub_item div {
float : right; 
width : 100%; 
margin : 0; 
padding : 0; 
}
 
#content_sub h1 { 
width : 100%; 
color: #000; 
background: #3366CC;
font-size: 1.5em; 
height: 2em;
margin : 0;
padding : 0;
text-indent: 10px
}
 
#content_sub ul {
float : right;
list-style-type : none; 
width : 100%; 
margin : 0; 
padding : 0; }
 
#content_sub li { 
 
float : right; 
width : 100%; 
background : #cfddff;
margin : 0;
padding : 0;
}
 
/*li#one a, li#two a, li#three a, li#four a, li#five a, li#six a  { padding-bottom : 160px; }
Keep to set individual li styles in the future*/
 
#content_sub li a {display : block; 
text-align : left; }
#content_sub li a:link {text-decoration : none;}
#content_sub li a:hover {background : #6699FF;}
 
div#site_info { width : 100%; }
 
div#site_info ul, div#site_info li {
display : inline;
margin : 0;
padding : 0;
list-style-type : none; }
 
div#site_info ul {
margin : 0;
padding : 0 0 20px 10px;
border-bottom : 1px solid #000; }
 
div#site_info a:hover {
border-bottom : 4px solid #90305c;
padding-bottom : 2px; }
 
div#site_info a:link {
float : left;
line-height : 14px;
font-weight : bold;
margin : 0 10px 4px 10px;
text-decoration : none; }
 
p { margin : 0 1em; padding : .5em 0; }
 
</style>
 
</head>
 
<body>
 
<div id="container">
 
<div id="navcontainer">
 
<ul id="navlist">
<li id="active"><a href="#" id="current">Item one</a></li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
<li><a href="#">Item four</a></li>
<li><a href="#">Item five</a></li>
<li><a href="#">Item six</a></li>
<li><a href="#">Item seven</a></li>
<li><a href="#">Item eight</a></li>
</ul>
</div>
 
<div id="content">
  <div id="content_main">
    <h1>content_main</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>
  <div id="content_sub">
    <div id="content_sub_item">
      <h1>content_sub 1</h1>
      <ul id="content_sub">
        <li id="one"><a href="#">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.  Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</a></li>
      </ul>
    </div>
    <div id="content_sub_item">
      <h1 id="content_sub">content_sub 2</h1>
      <ul id="content_sub">
        <li id="two"><a href="#">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</a></li>
      </ul>
    </div>
    <div id="content_sub_item">
      <h1 id="content_sub">content_sub 3</h1>
      <ul id="content_sub">
        <li id="three"><a href="#">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</a></li>
      </ul>
    </div>
    <div id="content_sub_item">
      <h1 id="content_sub">content_sub 4</h1>
      <ul id="content_sub">
        <li id="four"><a href="#">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</a></li>
      </ul>
    </div>
    <div id="content_sub_item">
      <h1 id="content_sub">content_sub 5</h1>
      <ul id="content_sub">
        <li id="five"><a href="#">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.  Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</a></li>
      </ul>
    </div>
    <div id="content_sub_item">
      <h1 id="content_sub">content_sub 6</h1>
      <ul id="content_sub">
        <li id="six"><a href="#">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.  Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</a></li>
      </ul>
    </div>
  </div>
</div>
<div id="site_info">
  <ul id="site_info">
  	<li id="site_info">
    <li><a id="site_info" href="#">site_info</a></li>
    <li><a id="site_info" href="#">link 2</a></li>
    <li><a id="site_info" href="#">link 3</a></li>
    <li><a id="site_info" href="#">link 4</a></li>
    <li><a id="site_info" href="#">link 5</a></li>
    <li><a id="site_info" href="#">link 6</a></li>
    <li><a id="site_info" href="#">link 7</a></li>
    <li><a id="site_info" href="#">link 8</a></li>
    <li><a id="site_info" href="#">link 9</a></li>
    <li><a id="site_info" href="#">link 10</a></li>
  </ul>
</div>
</body>
</html>

Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 5 years 21 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

You should start here -

all ยป http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

demiurgen
Offline
Enthusiast
Last seen: 5 years 22 weeks ago
Timezone: GMT+2
Joined: 2005-04-13
Posts: 55
Points: 11

First of all, you cannot use

First of all, you cannot use an id more than once per page. Use classes instead. Second, i wouldn't use list like this. Just use a div, like you have, and have a header and some paragraphs inside it.
This won't fix your problem though...

Try setting the div that contains the floating elements to overflow:hidden.
Or try creating a footer div that is set to clear:both.