Quick CSS question regarding a container div?

It's 5am in the morning and I'm probably too tired to see what's wrong with my code, but I'm trying to make columns by floating the main content div and subcontent div to the left.

Problem is if I float either of them, the container collapses and the background color for the container disappears.

Here is the code, thanks for any help.

------------------------------

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitiona...

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Untitled Document</title>

<style type="text/css">

html {

background:#DBF0F4;

}

html,body {

margin: 0;

}

#header {

background: #009;

width:1228px;

margin:0 auto;

height:234px;

}

#memories {

position:relative;

top:45px;

left:0;

}

#container {

width:1228px;

margin: 0 auto;

background-color: #fff;

border: 1px solid black;

height: 100%;

}

#mainContent{

width: 450px;

}

#mainContent h3,p {

font-family:Verdana, Geneva, sans-serif;

color:#999;

}

#newsone {

margin:10px;

padding:5px;

border-bottom: 1px solid #999;

}

#newstwo {

margin:10px;

padding:5px;

}

#subContent {

width: 300px;border: 1px solid black;

}

#newsthree {

margin:10px;

padding:5px;

}

</style>

</head>

<body>

<div id="header">

<!--TEXT VIVALDI FOR BUTTONS-->

</div>

<div id="container">

<div id="mainContent">

<div id="newsone">

<h3> Clashes, blasts for 3rd day in besieged Bangkok </h3>

<p>BANGKOK – Thai troops clashed with protesters for a third day in Bangkok on Saturday, as streets in the center of the Asian metropolis became battlegrounds and authorities struggled to contain Red Shirt demonstrators demanding the prime minister's resignation.</p>

<p>Explosions and street fighting have killed 16 people and wounded nearly 160 since the government attempted Thursday to seal off the 1-square-mile (3-square-kilometer) zone the Red Shirts have occupied in one of the capital's most upscale areas.</p>

<p>The spiraling violence, which has shifted from street to street over three days, has raised concerns that Thailand — a longtime tourism magnet that promotes its easygoing culture as the "Land of Smiles" — was teetering toward instability because of the two-month-long political crisis.</p>

<p>The army says its troop are not shooting to kill, but protesters during a lull in clashes Saturday crawled along sidewalks to slowly drag away corpses of three people near the city's Victory Monument traffic circle. They told an Associated Press photographer that army snipers had shot all three in the head.</p>

<p>On Friday, encircling troops used tear gas, rubber bullets and live rounds on demonstrators and the protesters in turn set fire to tires and a police bus.</p>

</div>

<div id="newstwo">

<h3> Clashes, blasts for 3rd day in besieged Bangkok </h3>

<p>BANGKOK – Thai troops clashed with protesters for a third day in Bangkok on Saturday, as streets in the center of the Asian metropolis became battlegrounds and authorities struggled to contain Red Shirt demonstrators demanding the prime minister's resignation.</p>

<p>Explosions and street fighting have killed 16 people and wounded nearly 160 since the government attempted Thursday to seal off the 1-square-mile (3-square-kilometer) zone the Red Shirts have occupied in one of the capital's most upscale areas.</p>

<p>The spiraling violence, which has shifted from street to street over three days, has raised concerns that Thailand — a longtime tourism magnet that promotes its easygoing culture as the "Land of Smiles" — was teetering toward instability because of the two-month-long political crisis.</p>

<p>The army says its troop are not shooting to kill, but protesters during a lull in clashes Saturday crawled along sidewalks to slowly drag away corpses of three people near the city's Victory Monument traffic circle. They told an Associated Press photographer that army snipers had shot all three in the head.</p>

<p>On Friday, encircling troops used tear gas, rubber bullets and live rounds on demonstrators and the protesters in turn set fire to tires and a police bus.</p>

</div>

<div id="subContent">

<div id="newsthree">

<h3> Clashes, blasts for 3rd day in besieged Bangkok </h3>

<p>BANGKOK – Thai troops clashed with protesters for a third day in Bangkok on Saturday,

3 Answers

Relevance
  • 4 years ago

    Untested suggestion... Try changing the height of the three boxes to 90%. If that works, then you had a conflict with box height and available pixels due to your use of -30 pixels for layout purposes. If that's not it, leave boxes at 90% and set container height to 100% rather than 800px. I forget whether height is relative to screen or to any container. If to screen, you have a height conflict in your CSS. Any chance the boxes are inheriting the "left" setting from container? Good luck.

    • Login to reply the answers
  • 10 years ago

    Add the following line of code before <div id="subContent">

    <br style="clear:both" />

    • Login to reply the answers
  • 10 years ago

    you should have something like this:

    <div id="container">

    <div id="mainContent">

    ...

    </div>

    <div id="subContent">

    ...

    </div>

    <div style="clear:left"></div>

    </div>

    • Login to reply the answers
Still have questions? Get your answers by asking now.