CODEWITHSUNDEEP
htmlcss
user1236473
user1236473

Reputation:

div content overflowing outside of another div

Before, all this is my page, and I was in the middle of creating a layout, using css @media query, for detecting and adjusting the page, depending on the pixel of the browser....

All was going fine, but if you see:

<div id='x'>
    <h1>I am content </h1>
    <h1>I am content </h1>
    <h1>I am content </h1>
    <h1>I am content </h1>
    <h1>I am content </h1>
    <h1>I am content </h1>
    <h1>I am content </h1>
</div>

You will notice, it has overflown of the parent div which is <div id='sep'></div> ONLY, when viewed from desktop.

You can check the source code of the page, or here is the full code:

<html>
<head><style>
body{margin:0px; padding:0px;}
#a{height:150px; background-color:#ffffff; border-bottom:1px solid #CCC;}
#x{min-height:350px; margin-top: 10px; background-color:#CCC;}
#y{min-height:30px; margin-top: 10px; background-color:#CCC;}

@media all and (min-width:700px){

#b{width:100%;  min-height:400px;}
    #sep{width:960px; margin:auto;}
    #x{width:65%; float:left;}
    #y{width:32%; float:right; }
#c{background-color:#656565; height:80px;}
.for-mob{display:none;}
.for-desc{background-color:green;}
}
@media all and (max-width:700px){
.for-mob{background-color:green;}
.for-desc{display:none;}
#b{width:100%; min-height:400px; }
#x{width:100%; display:block; }
#y{width:100%; display:block; }
#c{background-color:#656565; height:100px;}

}
</style></head>


<body>

<div id='a'> <h1>I am header </h1>
</div> 

<div id='b'>
<div id='sep'>

    <div id='x'>
    <h1>I am content </h1>
    <h1>I am content </h1>
    <h1>I am content </h1>
    <h1>I am content </h1>
    <h1>I am content </h1>
    <h1>I am content </h1>
    <h1>I am content </h1>
    </div>
    <div id='y'>
    <h1>I am sidebar </h1>
    </div>
</div> 
</div> 
<div class='for-desc'><h1>If you shrink the browser, I become invisible</h1> </div>
<div class='for-mob'><h1>If you maximize the browser, I become invisible</h1></div>

<div id='c'>
<h1> I am a simple footer </h1>
</div> 
</body>

Upvotes: 0

Views: 345

Answers (2)

Explosion Pills
Explosion Pills

Reputation: 191749

Apply a clearfix to the non-floated div that contains the floated divs (either #b or #sep).

#sep:after {
    content:"";
    display:table;
    clear:both;
}

Gleaned from http://www.css-101.org/articles/clearfix/latest-new-clearfix-so-far.php

Upvotes: 0

Ejaz
Ejaz

Reputation: 8872

As you've not specified any height for #sep, it implies that you want it to expand with content. You can add overflow: hidden to it to make it expand 

#sep {
  margin: auto;
  overflow: hidden;
  width: 960px;
}

State your requirement in the question if this answer doesn't answer your question :)

Upvotes: 1

Related Questions