Two divs in same line inside one big div

Hi,

I’m trying to set up a template with two smaller divs on the same horizontal line inside one larger div tag. The problem I am having is that if I use the “float: left, float: right” commands to do this, the bigger div box doesn’t size to fit the content of the smaller boxes since these boxes are now floating above the box. Is there a way to set div boxes on the same line without using tables, or will I have to set up tables to do something like this?

Thank you!

Hi,
Please post the code you are currently using with the floats, or post a link to your page if it is online.

Floats should do what you are wanting. It sounds like you may have some width problems, hard to say without seeing the code.

Absolutely. The site isn’t live, so I’ll post pictures with the code.

Here is the code with floats:
(in css)
Content {
width: 980px;
height: auto;
padding: 20 20 20 20;
background-color: #00fcff }

#package_update {
width: 680;
height: 500;
float: left;
background-color: #aaaaaa }

#previous_update {
width: 280;
height: 500;
float: right;
background-color: #ffcc00 }

(in index)
<div id=content>

<div id=package_update></div>
<div id=previous_update></div>

</div>

Here is what it looks like.

As you can see, the two “package” boxes are there, but the background for the div tag that they are in do not line up. Meanwhile, if I take the float tags out, the background will stretch to the height of the two package boxes, but the two boxes will not lay on the same line (pictured below).

Any help is appreciated, thanks!

Hi,
You just needed to contain your floats in the parent div. Floats are removed from the normal page flow and you must force the parent to enclose them.

overflow:hidden; applied to the parent is the easiest way to do that.

You were also missing the px values on your width/height rules.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Demo Layout</title>

<style type="text/css">
body {
    margin:0;
    padding:0;
    font: 100&#37;/1.3 arial,helvetica,sans-serif;
}
#content {
    width: 980px;
    margin:0 auto;
    padding: 20px;
    overflow:hidden;/*contain child floats*/
    background: #00fcff; 
}
#package_update {
    width: 680px;
    height: 500px;
    float: left;
    background: #aaaaaa;
}

#previous_update {
    width: 280px;
    height: 500px;
    float: right;
    background: #ffcc00;
}
</style>

</head>
<body>

<div id="content">
    <div id="package_update"></div>
    <div id="previous_update"></div>
</div>

</body>
</html>


Thanks! You’re the best.