dcsimg
www.webdeveloper.com
Results 1 to 6 of 6

Thread: DIV within DIV issue

  1. #1
    Join Date
    May 2006
    Posts
    26

    Exclamation DIV within DIV issue

    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?

  2. #2
    Join Date
    Feb 2005
    Posts
    345
    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.

  3. #3
    Join Date
    May 2006
    Posts
    26

    Code

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

  4. #4
    Join Date
    Mar 2006
    Posts
    227
    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.

  5. #5
    Join Date
    May 2006
    Posts
    26
    Quote Originally Posted by nataliemac
    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.
    Excellent, it worked. Thanks a bunch.

  6. #6
    Join Date
    Mar 2006
    Posts
    227
    You're welcome. :-)

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles