CODEWITHSUNDEEP
javascripthtmlcssoverflow
Jagadesh
Jagadesh

Reputation: 41

CSS height property value not considered when using overflow element

I am using css in div to display three blocks in a single page. Horizontal scroll can be hidden and vertical scrolling is enabled. The below code is written for this purpose, but the height of 100px given for each div is not considered by the browser. Below is my code: Title1 

  <body>
    <div>
      <div id="div1" style="float: left; width: 355px; height = 100px; border:thin solid black; overflow-y:scroll; overflow-x:hidden; ">
        1111111111111111111 <br>
        1 <br> 1 <br> 1 <br> 1 <br> 1 <br> 1 <br> 1 <br> 
        1 <br> 1 <br> 1 <br> 1 <br> 1 <br> 1 <br> 1 <br>
        1 <br> 1 <br> 1 <br> 1 <br> 1 <br> 1 <br> 1 <br> 
        1 <br> 1 <br> 1 <br> 1 <br> 1 <br> 1 <br> 1 <br>
        1 <br> 1 <br> 1 <br> 1 <br> 1 <br> 1 <br> 1 <br> 
        1 <br> 1 <br> 1 <br> 1 <br> 1 <br> 1 <br> 1 <br>
      </div>

      <div id="div2" style="float: left; width: 605px; height = 100px; border:thin solid black; overflow-y:scroll; overflow-x:hidden; ">
        1111111111111111111 <br>
        1 <br> 1 <br> 1 <br> 1 <br> 1 <br> 1 <br> 1 <br> 
        1 <br> 1 <br> 1 <br> 1 <br> 1 <br> 1 <br> 1 <br>
      </div>

      <div id="div3" style="float: left; width: 360px; height = 100px; border:thin solid black; overflow-y:scroll; overflow-x:hidden; ">
        <div id="div4">
          1111111111111111111 <br>
          1 <br> 1 <br> 1 <br> 1 <br> 1 <br> 1 <br> 1 <br> 
          1 <br> 1 <br> 1 <br> 1 <br> 1 <br> 1 <br> 1 <br>
        </div>
      </div>

      <br style="clear: left;" />
    </div>

</html>

Please help me solve this height problem.

Thanks Jagadesh S

Upvotes: 0

Views: 52

Answers (1)

Bob Shannon
Bob Shannon

Reputation: 648

You're using height = 100px;. This is incorrect syntax. It should be height: 100px;.

<html>
  <head>
    <title> Title1 </title>
  </head>

  <body>
    <div>
      <div id="div1" style="float: left; width: 355px; height: 100px; border:thin solid black; overflow-y:scroll; overflow-x:hidden; ">
        1111111111111111111 <br>
        1 <br> 1 <br> 1 <br> 1 <br> 1 <br> 1 <br> 1 <br> 
        1 <br> 1 <br> 1 <br> 1 <br> 1 <br> 1 <br> 1 <br>
        1 <br> 1 <br> 1 <br> 1 <br> 1 <br> 1 <br> 1 <br> 
        1 <br> 1 <br> 1 <br> 1 <br> 1 <br> 1 <br> 1 <br>
        1 <br> 1 <br> 1 <br> 1 <br> 1 <br> 1 <br> 1 <br> 
        1 <br> 1 <br> 1 <br> 1 <br> 1 <br> 1 <br> 1 <br>
      </div>

      <div id="div2" style="float: left; width: 605px; height: 100px; border:thin solid black; overflow-y:scroll; overflow-x:hidden; ">
        1111111111111111111 <br>
        1 <br> 1 <br> 1 <br> 1 <br> 1 <br> 1 <br> 1 <br> 
        1 <br> 1 <br> 1 <br> 1 <br> 1 <br> 1 <br> 1 <br>
      </div>

      <div id="div3" style="float: left; width: 360px; height: 100px; border:thin solid black; overflow-y:scroll; overflow-x:hidden; ">
        <div id="div4">
          1111111111111111111 <br>
          1 <br> 1 <br> 1 <br> 1 <br> 1 <br> 1 <br> 1 <br> 
          1 <br> 1 <br> 1 <br> 1 <br> 1 <br> 1 <br> 1 <br>
        </div>
      </div>

      <br style="clear: left;" />
    </div>

</html>

Upvotes: 1

Related Questions