Divs extending past Div wrapper [Archive]

Girard Ibanez

05-11-2007, 12:24 AM

From the code below, if the paragraph text in the caption70L div is long, the caption70L div will extend past the pagewidth div but the pagewidth div will not extend. The caption70L div will just over lap the pagewidth div.

Is there a way for the captionL70 div to push the pagewidth div like it would when the <p> tags pushes the pagewidth div?

body {
margin: 0.5em 0;
padding: 0;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
color: #000;
background: #a8a8a8 url(image_themes/bg.gif) center center repeat-y;
}

#pagewidth {
width: 52em;
border: solid #cacaca 0.0625em;
text-align: left;
margin: 0 auto;
padding: 0;
background-color: #e8e8e8;
color: #000;
}

#leftcol {
margin: 0;
padding:0 0.2em 0 0.5em;
width: 10em;
float: left;
background: #e8e8e8;
}

#maincol {
margin: 0;
padding: 0 0.5em 0 0.3em;
width: 40.2em; /
float: left;
background-color: #e8e8e8;
color: #000;
}

.caption70L {
padding: 0;
margin: 0.5em 0.7em 0 0.7em;
background: #e0e0e0;
border: 0.0625em solid #999;
float: left;
width:70px;
}

.caption70L p {
color: #555555;
font-size: 0.687em;
padding: 0.2em 0.3em 0.3em 0.7em;
margin: 0;
}

<head>
</head>
<body>

<div id="pagewidth">
<div id="leftcol"> </div>

<div id="maincol">
<p> this is a paragraph text </p>
<p> this is another paragraph text </p>

<div id"caption70L>
<img src="images/guam_flag.gif" alt="Guam Flag" title="Guam Flag" width="70" height="46" />
<p>This is a picture of the Island of Guam</p>
</div>

</div>
</div>
</body>

mwinter

05-11-2007, 04:31 PM

Is there a way for the captionL70 div to push the pagewidth div like it would when the <p> tags pushes the pagewidth div?

Associate the CSS declaration

clear: left;

with last non-floated child of "pagewidth". If there isn't one (such as in your posted code), create one.

#maincol {
margin: 0;
padding: 0 0.5em 0 0.3em;
width: 40.2em; /

Is that slash a copy-and-paste error, or an actual feature of the style sheet. If yes, it shouldn't be.

<img src="images/guam_flag.gif" ... />

It's best to avoid serving XHTML silliness on the Web. Use HTML.

Mike