DIV within DIV issue

@walman05Jun 28.2006

I have a DIV that is acting as the background for content (background color and borders attached) and I want to put another DIV with an image in it into it. But the image DIV overflows outside of the bottom of the background DIV, put is still half way in it. The image DIV is within the background DIV. I want the image DIV to stop jumping outside of the background DIV. Any ideas on how I can absolutely solve this problem?

to post a comment

CSS

@jogolJun 28.2006 — #post your code... html & css... maybe it´s just that you have set width and height for the outer div that are just not enough for the img.

@walman05authorJun 28.2006 — #<div id="maincontent">

<h1>Location</h1>

<p>Our location and contact information:

<div class="location_map"><img src="images/location_map.gif" width="400" height="555"></div>

<div class="location_text">

<p>400 Ann Arbor Rd. W.<br>

Plymouth, MI 48170</p>

<p>(734) 459-3500</p>

</div>

</div>

CSS:

#maincontent {

width: 665px;

margin-top: 12px;

margin-left: 10px;

margin-bottom: 10px;

padding-left: 15px;

padding-right: 10px;

border: 1px solid #143434;

background-color: #FFFFFF;

font-family: Verdana, Arial, Helvetica, sans-serif;

font-size: 11px;

font-style: normal;

font-weight: normal;

color: #143B3F;

padding-top: 6px;

padding-bottom: 6px;

line-height: 17px;

clear: both;

overflow: visible;

}

.location_map {

float: left;

width: 400px;

border: 1px solid black;

overflow: visible;

}

.location_text {

float: left;

width: 230px;

padding: 10px 5px 10px 15px;

}

@nataliemacJun 28.2006 — #You need to clear your floats that are nested in your div.

One way to do that is to insert a <p> inside your #maincontent div after your floated divs that has no padding or margin, a small font size and clear set to both.

@walman05authorJun 28.2006 — #You need to clear your floats that are nested in your div.

One way to do that is to insert a <p> inside your #maincontent div after your floated divs that has no padding or margin, a small font size and clear set to both.[/QUOTE]

Excellent, it worked. Thanks a bunch.

@nataliemacJun 28.2006 — #You're welcome. :-)

DIV within DIV issue

5 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

DIV within DIV issue

5 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

5 Comments(s) _↴

Also in #CSS _↴