Divs extending past Div wrapper

**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?

Code:

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;
}

HTML Code:

<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

Originally Posted by Girard Ibanez

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

Code:

clear: left;

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

Code:

#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.

HTML Code:

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

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

Mike

Thread: Divs extending past Div wrapper

Thread Tools

Search Thread

Divs extending past Div wrapper

Bookmarks

Bookmarks

Posting Permissions