Member Avatar for ZeroEddy

Hi guys one problem I have been having lately is when I create a template for a website my container div does not surround all of the elements inside it. The only way I can get it to do so is to give it a height but I dont want this. I want it to adjust according depending if the browser is adjusted. By giving it a specific height I cannot do this. It will work for divs inside the container which contain text. Below is my code if anyone could help me.

<html>
<head>
<script type="text/javascript">
    var myWidth = 0, myHeight = 0;
    if( typeof( window.innerWidth ) == 'number' ) {
        myWidth = window.innerWidth; myHeight = window.innerHeight;
    } else if( document.documentElement && ( document.documentElement.clientWidth ||document.documentElement.clientHeight ) ) {
        myWidth = document.documentElement.clientWidth; myHeight = document.documentElement.clientHeight;
    } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
        myWidth = document.body.clientWidth; myHeight = document.body.clientHeight;
    }
</script>
 <link href="css/main.css" rel="stylesheet" type="text/css"/>

</head>
<body>
<script type="text/javascript">
    document.write('<p>' + myWidth + 'x' + myHeight + '</p>');
</script>
<div id="cont">
<div id="head">
Head
</div><!--end of head div-->
<div id="content">
<div class="cnt">
Content 1
<p>
Random text Random text Random text Random text Random text Random text Random text
Random text Random text Random text Random text Random text Random text Random text
Random text Random text Random text Random text Random text Random text Random text
Random text Random text Random text Random text Random text Random text Random text
</p>
</div><!--end of cnt1 class-->
<div class="cnt">
Content 2
</div><!--end of cnt2 class-->
<div class="cnt">
Content 3
</div><!--end of cnt3 class-->
</div><!--end of content div-->
<div id="sidebar">
Sidebar
</div><!--end of sidebar div-->
</div><!--end of cont div-->
</body>
</html>

<!--Css file-->

*{
    margin:0;
    padding:0;
    text-align:center;
}
#cont{
    width:80%;
    height:400px;;
    margin-left:auto;
    margin-right:auto;
    border:1px solid #000;
    margin-top:10px;
    min-width:500px;
}
#head{
    width:100%;
    border:1px solid #000;
}
#content{
    width:100%;
    border:1px solid #000;
    margin-left:auto;
    margin-right:auto;
}
.cnt{
    width:30%;
    border:1px solid red;
    float:left;
    margin:10px 0px 10px 2%;
    display:inline-block;
}
#sidebar{
    width:100%;
    border:1px solid #000;
    float:left;
}
  • 2 Contributors
  • 1 Reply
  • 236 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by shivendu

Dani AI

Generated

The container is collapsing because its inner boxes are taken out of the normal document flow (floats/absolute positioning). That’s why you added a fixed height — it forces the box to contain children but kills responsive behavior. ’s quick containment tip will make the parent wrap its children, but here are clearer, more maintainable options you can use instead.

A classic, portable fix is a clearfix. Add a small rule and give the container that class; the parent will automatically expand to contain floated children.

.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

Apply it to the container (for example, add class="clearfix" to your container element) and remove the fixed height so it can grow and shrink with content.

Two modern options that avoid floats entirely:

/* flow-root creates a new block formatting context */
#cont { display: flow-root; }

or

/* flexbox layout for columns (remove float on columns) */
#cont { display: flex; flex-wrap: wrap; gap: 2%; }
.cnt  { flex: 0 0 30%; /* remove float */ }

Quick troubleshooting: ensure a proper DOCTYPE, check children for position:absolute (those won’t expand the parent), and remove any fixed height on the container. If you need the simplest fallback for older engines, inserting a clearing element (<div style="clear:both"></div>) at the end of the container will also work.

Member Avatar for shivendu

**Add this property to #cont -
overflow:hidden;
**

You can also apply this property anywhere u wish. It Works

Edited by shivendu
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.