CODEWITHSUNDEEP
htmlcsslayout
jaquar c
jaquar c

Reputation: 31

The height of the container for two panel layout in HTML

The outer container for two panel layout does not stretch vertically.

The <DIV> with id container is surrounding two DIVs of two panels:

When sidebar is longer than content the outer container does not stretch.

<!DOCTYPE html>
<html>
<head>
 <title>Example</title>
 <meta charset="utf-8">
 <style>
 #container {
   width: 600px;
   border: 1px solid blue;
 }

 #content {
   border: 2px dashed red;
   margin-left: 220px;
   margin-right: 10px;
 }

 #sidebar {
   float: left;
   border: 2px dashed green;
   width: 200px;
   margin-right: 10px;
   margin-left: 10px;
 }
 </style>
</head>
<body>
 <div id="container">
  <div id="sidebar">
   Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
   Proin nibh augue, suscipit a, scelerisque sed, lacinia in, mi. 
   Cras vel lorem. Etiam pellentesque aliquet tellus. 
  </div>
  <div id="content">
   Article with some content. Article with some content. Article with some content. 
  </div>
 </div>
</body>
</html>

so-example-html-two-panel-outer-container-not-stretched

Upvotes: 0

Views: 98

Answers (2)

Shubham Khatri
Shubham Khatri

Reputation: 281646

Use overflow css attribute for the container. That will auto adjust its height. Documentation on overflow.

Use code below. 

<!DOCTYPE html>
<html>
<head>
 <title>Example</title>
 <meta charset="utf-8">
 <style>
 
 #content {
   border: 2px dashed red;
   margin-left: 220px;
   margin-right: 10px;
 }

 #sidebar {
   float: left;
   border: 2px dashed green;
   width: 200px;
   margin-right: 10px;
   margin-left: 10px;
 }
 #container {
   width: 600px;
   overflow: hidden;
   border: 1px solid blue;
 }

 </style>
</head>
<body>
 <div id="container">
  <div id="sidebar">
   Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
   Proin nibh augue, suscipit a, scelerisque sed, lacinia in, mi. 
   Cras vel lorem. Etiam pellentesque aliquet tellus. 
  </div>
  <div id="content">
   Article with some content. Article with some content. Article with some content. 
  </div>
 </div>
</body>
</html>

Upvotes: 1

AnatPort
AnatPort

Reputation: 748

set both divs to be inline-block. they will automatically be next to one another, no need for float:left for the left div, or margin-left for the right div.

#content {
border: 2px dashed red;
margin-right: 10px;
display: inline-block;
width: 350px;
vertical-align:top;
}

#sidebar {
border: 2px dashed green;
width: 200px;
margin-right: 10px;
margin-left: 10px;
display: inline-block;
}

here is a fiddle

Upvotes: 0

Related Questions