CODEWITHSUNDEEP
css
Raghuveer
Raghuveer

Reputation: 797

cannot apply css successfully 

body{
    background:#eff3f6;
  border: 1px solid #C3D4DB;
}
.content{margin-top:1px;
margin-right:200px;
margin-left:200px;
background:#fefefe;}
.box
{
    background:#fefefe;
    border: 1px solid #C3D4DB;
    border-top:1px;
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    border-radius:5px;
    -moz-box-shadow:rgba(0,0,0,0.15) 0 0 1px;
    -webkit-box-shadow:rgba(0,0,0,0.15) 0 0 1px;
    box-shadow:rgba(0,0,0,0.15) 0 0 1px;
    color:#444;
    font:normal 12px/14px Arial, Helvetica, Sans-serif;
    margin:0 auto 30px ;
    overflow:hidden;
}

I applied the content selector to the parent <div> class and box selector to the child <div> class. Now its applied correctly. But whenever the content exceeds about some amount the whole body content will be dis appeared. So which property I need to take care?

Upvotes: 0

Views: 113

Answers (1)

frontendzzzguy
frontendzzzguy

Reputation: 3242

You could remove overflow: hidden or add in height: auto like the example below to expand the .box div to cover all of its contents.

.box {
    background:#fefefe;
    border: 1px solid #C3D4DB;
    border-top:1px;
    -webkit-border-radius:5px;
       -moz-border-radius:5px;
            border-radius:5px;
    -webkit-box-shadow:rgba(0,0,0,0.15) 0 0 1px;
       -moz-box-shadow:rgba(0,0,0,0.15) 0 0 1px;
            box-shadow:rgba(0,0,0,0.15) 0 0 1px;
    color:#444;
    font:normal 12px/14px Arial, Helvetica, Sans-serif;
    margin:0 auto 30px ;
    overflow:hidden;
    height: auto; /* This will expand the height of the container to contain all of its contents */
    }

Upvotes: 1

Related Questions