CODEWITHSUNDEEP
csshtml
Dilukshan Mahendra
Dilukshan Mahendra

Reputation: 3398

Divs sticking out of parent div

I am designing a shopping cart site, where I have several parent divs as well as child divs as follows. The Issue is the divs where I have set to height:auto is not expanding when the child content is growing, No in my case i needed to add another set of (3) item-holders(already it has 3 and fits with the content) inside items div but when I do it jumps out of the parent div. Please help me on this.

My HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>diluks eCommerce - Home</title>
<link href="scripts/style.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div class="container">
  <div class="level1">
    <div class="profile-bar"></div>

  </div>
  <div class="level2">
    <div class="logoarea"><img src="img/logo-bar.png" width="1000" height="100" /></div>

  </div>
  <div class="level3">
    <div class="body-content">
      <div class="side-bar"></div>
      <div class="nav-menu"></div>
      <div class="image-slider"><img src="img/main-img.png" width="785" height="220" /></div>
      <div class="seperate-space">
        <div class="separate-title"><a class="bold-captions">Latest Picks</a></div>


      </div>
<div class="items">
  <div class="item-holder">
        <table align="center" width="256px" cellpadding="0px" cellspacing="0px">
            <tr>
                <td class="item-info" align="center" height="34px">Item name</td>
            </tr>
            <tr>
                <td class="item-info" align="center" height="230px"><img src="img/sunflowers.png" width="256" height="230" /></td>
            </tr>
            <tr>
                <td class="item-info" align="center" height="34px">$30</td>
            </tr>
            <tr>
                <td class="item-info" align="center" height="35px">Button</td>
            </tr>
        </table>
  </div>
  <div class="item-holder">
        <table align="center" width="256px" cellpadding="0px" cellspacing="0px">
            <tr>
                <td class="item-info" align="center" height="34px">Item name</td>
            </tr>
            <tr>
                <td class="item-info" align="center" height="230px"><img src="img/treecard.png" width="256" height="230" /></td>
            </tr>
            <tr>
                <td class="item-info" align="center" height="34px">$30</td>
            </tr>
            <tr>
                <td class="item-info" align="center" height="35px">Button</td>
            </tr>
        </table>
  </div>
  <div class="item-holder">
        <table align="center" width="256px" cellpadding="0px" cellspacing="0px">
            <tr>
                <td class="item-info" align="center" height="34px">Item name</td>
            </tr>
            <tr>
                <td class="item-info" align="center" height="230px"><img src="img/3-flowers.png" width="256" height="230" /></td>
            </tr>
            <tr>
                <td class="item-info" align="center" height="34px">$30</td>
            </tr>
            <tr>
                <td class="item-info" align="center" height="35px">Button</td>
            </tr>
        </table>
  </div>


</div>
    </div>


  </div>
  <div class="level4">
    <div class="footer-area">
      <div class="space-line"></div>
    </div>


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

My CSS Style Sheet

@charset "utf-8";
.container {
    height: auto;
    width: 100%;
}
body{
    margin:0px;
    padding:0px;
    background-color:#F2F2F2;

    }.container .level1 {
    height: 35px;
    width: 100%;

}
.container .level2 {
    height: 100px;
    width: 100%;

}
.container .level3 {
    height: auto;
    width: 100%;
    min-height:685px;
}
.level3 .body-content {
    height: 100%;
    width: 1000px;
    min-height:685px;
    margin:auto;
}
.body-content .side-bar {
    float: left;
    height: 100%;
    width: 200px;
    min-height:685px;
    background-color:#CACACA;

}
.body-content .nav-menu {
    float: left;
    height: 35px;
    width: 800px;

    background-color:#CACACA;
}
.body-content .items {
    float: left;
    height: auto;
    width: 785px;
    min-height:335px;
    padding-left:15px;
    padding-bottom:15px;
    padding-top:15px;
    padding-right:0px;
    position:relative;


}
.logoarea {
    height: 100px;
    width: 1000px;
    margin:auto;
    border-bottom-style:solid;
    border-bottom-width:1px;
    border-bottom-color:#CACACA;
}
.profile-bar {
    height: 35px;
    width: 1000px;
    margin:auto;
    border-bottom-style:solid;
    border-bottom-width:1px;
    border-bottom-color:#666;
}
.image-slider {
    float: left;
    height: 220px;
    width: 785px;
    padding-left:15px;
    padding-bottom:15px;
    padding-top:15px;
    padding-right:0px;

}
.level4 {
    height: auto;
    width: 100%;
    min-height:150px;
}
.space-bar{
    height: 15px;
    width: 100%;
    }
.space-line{
    height: 15px;
    width: 100%;
    border-top-style:solid;
    border-top-width:1px;
    border-top-color:#666;
    }   .footer-area {
    height: auto;
    width: 1000px;
    margin:auto;
    min-height:150px;
}
.seperate-space {
    float: left;
    height: 35px;
    width: 785px;
    padding-left:15px;
}
.separate-title {
    float: left;
    height: 28px;
    width: 780px;
    background-color:#CACACA;

    padding-top:7px;
    padding-left:5px;

}
.items .item-holder {
    float: left;
    height: 335px;
    width: 260px;
}
.item-info{
    font-family:Verdana, Geneva, sans-serif;
    font-size:14px;
    color:#333;
    }
.bold-captions{
    font-family:Verdana, Geneva, sans-serif;
    font-size:16px;
    font-weight:bold;
    color:#333;
    }

JSFiddle Demo

Upvotes: 1

Views: 6491

Answers (3)

ariel
ariel

Reputation: 16150

I think this is what you want: http://jsfiddle.net/bortao/XpSXK/

First had to use clearfix on level3 so the floated content is contained there (your main question).

Then there was a problem with the side bar: it always ended on it's min-height. so setting it to height:100% have no effect. Also, if there is content after this min-height, it would be aligned left below the side bar.

So i brought side-bar outside of body-content to make all content aligned to the right of the side bar.

And finally to make the rest of the side bar the same color, set the background color of level3 to dark (same as side bar), and body-content background light, same as body.

Upvotes: 1

Sarath
Sarath

Reputation: 608

Add float:left to all your level divs 

.level1,.level2,.level3,.level4{
        float:left;
    }

Upvotes: -1

msapkal
msapkal

Reputation: 8346

Add overflow: auto

.container .level3 {
   height: auto;
   width: 100%;
   min-height: 685px;
   overflow: auto;
}

Upvotes: 4

Related Questions