CODEWITHSUNDEEP
htmlcss
RAJ ARYAN
RAJ ARYAN

Reputation: 1

left and right div's height is not increasing when the content of center div is increased

Left and right div's height is not increasing when the content of center div is increased. I want the left and and right div also increased when the content overflows its height. 

<! DOCTYPE html>
  <html>

<head>

<style>


.header
{
background-color:grey;
margin-top:20px;
margin-left:20px;
margin-right:20px;
height:100px;
width:97%;
border:2px dotted green;
display:table;
}


.left
{clear:both;
background-color:grey;
margin-top:20px;
margin-left:10px;
float:left;
margin-right:10px;
height:100%;
width:10%;
display:table;
border:2px dotted green;

}


.center
{
background-color:grey;
margin-top:20px;
margin-bottom:10px;
margin-left:10px;
float:left;
height:100%;
width:75%;
display:table;
border:2px dotted green;
}

.right
{
background-color:grey;
margin-top:20px;
margin-bottom:10px;
margin-left:10px;
float:right;
height:100%;
width:10%;
display:table;
border:2px dotted green;
}



.footer
{
background-color:white;
border:2px dotted green;
margin-left:20px;
margin-right:20px;
height:50px;
width:97%;
display:table;
}



</style>

<title> Login </title>

</head>

<body text="black">


<div class="header">
HEADER

</div>


<div class="container">
<div class="left">
home<br>
profile<br>
services<br>

</div>

<div class="center">



What is HTML

HTML is an acronym which stands for Hyper Text Mark Up Language. Let's see what is Hyper Text and what is Mark Up Language?

Hyper Text: Hyper Text simply means "Text within Text". A text has a link within it, is a hypertext. Every time when you click on a word which brings you to a new webpage, you have clicked on a hypertext.

Markup language: A markup language is a programming language that is used make text more interactive and dynamic. It can turn a text into images, tables, links etc.
The word Markup refers to the symbol or Sequence of characters added to the ordinary text to define the structure of the text. It can also specify links to other documents.

An HTML document is made of many HTML tags and each HTML tag contains different content.
HTML is an acronym which stands for Hyper Text Mark Up Language. Let's see what is Hyper Text and what is Mark Up Language?

  <p>  Hyper Text: Hyper Text simply means "Text within Text". A text has a link within it, is a hypertext. Every time when you click on a word which brings you to a new webpage, you have clicked on a hypertext.</p>

 <p>   Markup language: A markup language is a programming language that is used make text more interactive and dynamic. It can turn a text into images, tables, links etc.</p>
The word Markup refers to the symbol or Sequence of characters added to the ordinary text to define the structure of the text. It can also specify links to other documents.

   <p> An HTML document is made of many HTML tags and each HTML tag contains di

HTML is an acronym which stands for Hyper Text Mark Up Language. Let's see what is Hyper Text and what is Mark Up Language?</p>

Hyper Text: Hyper Text simply means "Text within Text". A text has a link within it, is a hypertext. Every time when you click on a word which brings you to a new webpage, you have clicked on a hypertext.

Markup language: A markup language is a programming language that is used make text more interactive and dynamic. It can turn a text into images, tables, links etc.
The word Markup refers to the symbol or Sequence of characters added to the ordinary text to define the structure of the text. It can also specify links to other documents.

An HTML document is made of many HTML tags and each HTML tag contains di

HTML is an acronym which stands for Hyper Text Mark Up Language. Let's see what is Hyper Text and what is Mark Up Language?

Hyper Text: Hyper Text simply means "Text within Text". A text has a link within it, is a hypertext. Every time when you click on a word which brings you to a new webpage, you have clicked on a hypertext.

Markup language: A markup language is a programming language that is used make text more interactive and dynamic. It can turn a text into images, tables, links etc.
The word Markup refers to the symbol or Sequence of characters added to the ordinary text to define the structure of the text. It can also specify links to other documents.

An HTML document is made of many HTML tags and each HTML tag contains di

HTML is an acronym which stands for Hyper Text Mark Up Language. Let's see what is Hyper Text and what is Mark Up Language?

Hyper Text: Hyper Text simply means "Text within Text". A text has a link within it, is a hypertext. Every time when you click on a word which brings you to a new webpage, you have clicked on a hypertext.

Markup language: A markup language is a programming language that is used make text more interactive and dynamic. It can turn a text into images, tables, links etc.
The word Markup refers to the symbol or Sequence of characters added to the ordinary text to define the structure of the text. It can also specify links to other documents.

An HTML document is made of many HTML tags and each HTML tag contains di


HTML is an acronym which stands for Hyper Text Mark Up Language. Let's see what is Hyper Text and what is Mark Up Language?

Hyper Text: Hyper Text simply means "Text within Text". A text has a link within it, is a hypertext. Every time when you click on a word which brings you to a new webpage, you have clicked on a hypertext.

Markup language: A markup language is a programming language that is used make text more interactive and dynamic. It can turn a text into images, tables, links etc.
The word Markup refers to the symbol or Sequence of characters added to the ordinary text to define the structure of the text. It can also specify links to other documents.

An HTML document is made of many HTML tags and each HTML tag contains di

HTML is an acronym which stands for Hyper Text Mark Up Language. Let's see what is Hyper Text and what is Mark Up Language?

Hyper Text: Hyper Text simply means "Text within Text". A text has a link within it, is a hypertext. Every time when you click on a word which brings you to a new webpage, you have clicked on a hypertext.

Markup language: A markup language is a programming language that is used make text more interactive and dynamic. It can turn a text into images, tables, links etc.
The word Markup refers to the symbol or Sequence of characters added to the ordinary text to define the structure of the text. It can also specify links to other documents.

An HTML document is made of many HTML tags and each HTML tag contains di

HTML is an acronym which stands for Hyper Text Mark Up Language. Let's see what is Hyper Text and what is Mark Up Language?

Hyper Text: Hyper Text simply means "Text within Text". A text has a link within it, is a hypertext. Every time when you click on a word which brings you to a new webpage, you have clicked on a hypertext.

Markup language: A markup language is a programming language that is used make text more interactive and dynamic. It can turn a text into images, tables, links etc.
The word Markup refers to the symbol or Sequence of characters added to the ordinary text to define the structure of the text. It can also specify links to other documents.

An HTML document is made of many HTML tags and each HTML tag contains di


</div>

<div class="right">
RIGHT
</div>


</div><div class="footer">
Footer
</footer>



</body>

</html>

Upvotes: 0

Views: 83

Answers (2)

Dustin Poissant
Dustin Poissant

Reputation: 3418

I think you got your display: table and display: table-cell styles confused. table-cells should be contained within tables which means you should give you .container class a display of table and the .left, .center, .right a display of table-cell. Figuring out the margins/paddings to give yourself the gap between elements, as you seem to want to do, may require nesting a set of divs within your elements with display properties of block or inline-block to give you the ability to add margins/paddings.

Here is a quick markup you should use as a starting point.

http://codepen.io/dustinpoissant/pen/bNRYwr?editors=110

HTML

<header>
  <h2>Header</h2>
</header>
<div class="container">
  <div class="left">
    <p>home<br>
    profile<br>
    services</p>
  </div><!-- .left -->
  <div class="center">
    <h2>What is HTML</h2>
    <p>HTML is an acronym which stands for Hyper Text Mark Up Language. Let's see what is Hyper Text and what is Mark Up Language?</p>
    <p>Hyper Text: Hyper Text simply means "Text within Text". A text has a link within it, is a hypertext. Every time when you click on a word which brings you to a new webpage, you have clicked on a hypertext.</p>
    <p>Markup language: A markup language is a programming language that is used make text more interactive and dynamic. It can turn a text into images, tables, links etc.</p>
    <p>The word Markup refers to the symbol or Sequence of characters added to the ordinary text to define the structure of the text. It can also specify links to other documents.</p>
    <p>An HTML document is made of many HTML tags and each HTML tag contains different content.</p>
    <p>HTML is an acronym which stands for Hyper Text Mark Up Language. Let's see what is Hyper Text and what is Mark Up Language?</p>
    <p>Hyper Text: Hyper Text simply means "Text within Text". A text has a link within it, is a hypertext. Every time when you click on a word which brings you to a new webpage, you have clicked on a hypertext.</p>
    <p>Markup language: A markup language is a programming language that is used make text more interactive and dynamic. It can turn a text into images, tables, links etc.</p>
    <p>The word Markup refers to the symbol or Sequence of characters added to the ordinary text to define the structure of the text. It can also specify links to other documents.</p>
    <p>An HTML document is made of many HTML tags and each HTML tag contains... </p>
  </div><!-- .center -->
  <div class="right">
    <p>RIGHT</p>
  </div><!-- .right -->
</div><!-- .container -->
<footer>
  <p>FOOTER</p>
</footer>

CSS

header {
  display: block;
  background-color: grey;
  height: 100px;
  border: 2px dotted green;
}
.container {
  display: table;
}
.left, .right {
  display: table-cell;
  width: 20%;
  height: 100%;
  vertical-align: top;
  border: 2px dotted green;
  background-color: grey;
}
.center {
  display: table-cell;
  width: 60%;
  height: 100%;
  vertical-align: top;
  border: 2px dotted green;
  background-color: grey;
}
footer {
  display: block;
  background-color: white;
  border:2px dotted green;
  height:50px;
}

I hope this helps you understand the use of display: table; vs display: table-cell;

Another answer might be to use an actual <table>.

Or you can use jQuery to do something like this:

$(document).ready(function(){
  $(".center").on("resize", function(){
    $(".left, .right").height( $(".center").height() );
  });
});

This will force the sides to always match the height of the center. The disadvantage of this approach is when the sides are taller than the center the sides heights will, as expected, still match the height of the center causing an overflow.

Upvotes: 0

Aabha Pandey
Aabha Pandey

Reputation: 905

You need to put display:table-cell on left, center, right div. And you cannot use FLOAT with display property. With Float display won't work. So remove float:left from all around.

No need to put height:100% on left, center, right divs. height:100% works only with the outermost div which is just inside the body.

Upvotes: 1

Related Questions