Table changing div size

Question

I was trying to learn CSS layouts and everything was going fine. Made up a test layout like this

everything was fine hitherto , the middle div had a height of 60%, and the yellow div had ha width of 60%, and the green one had a width of 40%.

But as soon as I replaced the form in yellow div with a table , the green div went askew and moved downwards.I tried setting the width of table to 100% , but still nothing.

Does placing a table adds some hidden width to the div? Please tell me how to correct this.I want both the divs to be place like this only , in inline-block style.

I have used the CSS reset in my css.

.header {
  background: red;
  height: 10%;
}
.middle {
  background: pink;
  height: 60%;
  width: 100%;
}
.table1 {
  background: orange;
  display: inline-block;
  width: 60%;
  height: 100%;
}
.menu1 {
  background: green;
  display: inline-block;
  width: 40%;
  height: 100%;
}
.table_container {
  width: 100%;
}
.bottom {
  background: black;
  height: 30%;
}
label {
  display: block;
}
iframe {
  width: 100%;
  height: 100%;
}
table {
  margin-top: 20px;
  width: 80%;
}
table,
th,
td {
  border: 1px solid #cecfd5;
  padding: 10px 15px;
}

<head>
  <link rel="stylesheet" href="main.css">
</head>

<body>
  <div class="header">heelo
  </div>
  <div class="middle">
    <div class="table1">

      <table>
        <tr>
          <td>name</td>
          <td>email</td>
          <td>age</td>
        </tr>
        <tr>
          <td>person</td>
          <td>person93person@gmail.com</td>
          <td>22</td>
        </tr>
        <tr>
          <td>person</td>
          <td>person93person@gmail.com</td>
          <td>23</td>
        </tr>

        <tr>
          <td>person</td>
          <td>person93person@gmail.com</td>
          <td>22</td>
        </tr>

        <tr>
          <td>person</td>
          <td>person93person@gmail.com</td>
          <td>22</td>
        </tr>
      </table>

    </div>
    <!
    !>
    <div class="menu1">
      <form action="#">
        <label>username</label>
        <input type="text">
        <label>password</label>
        <input type="text">

        <label>age</label>
        <select>
          <option value="22">22</option>
          <option value=23 ">23</option>
    </select>
    
    
    <label>Click here to submit</label>
    <input type="submit ">
    
    </form>
    </div>
    </div>
    <div class="bottom "><iframe src=" ">
      <p>Your browser does not support iframes.</p>
    
    </div>
    </body>
    </html>

score 0 · Answer 1 · answered Jan 27 '17 at 09:09

0

Try adding to the divs table1 and menu1 the following: vertical-align:top;

answered Jan 27 '17 at 09:09

Alex

76
5

yep.Solved it using this way – a dawg Jan 27 '17 at 14:01

score 0 · Answer 2 · answered Jan 27 '17 at 09:12

0

fix

<option value=23">23</option>

↓

<option value="23">23</option>

unnecessary comment??

<!!><div class="menu1">

↓

<div class="menu1">

in your css add

float: left;

and your good to go :)

answered Jan 27 '17 at 09:12

ha_ryu

568
2
7
20

That comment is to remove the spacing between two inline elements. – a dawg Jan 27 '17 at 14:00

Pete · Accepted Answer · 2017-01-27T09:21:44.490

Try the following:

I have commented out the space between your first and second div and added vertical-align:top to them both. I have also added a missing quote on one of the options for your select

html,
body {
  height: 100%;
}
.header {
  background: red;
  height: 10%;
}
.middle {
  background: pink;
  height: 60%;
  width: 100%;
}
.table1 {
  background: orange;
  display: inline-block;
  width: 60%;
  height: 100%;
  vertical-align: top;
}
.menu1 {
  background: green;
  display: inline-block;
  width: 40%;
  height: 100%;
  vertical-align: top;
}
.table_container {
  width: 100%;
}
.bottom {
  background: black;
  height: 30%;
}
label {
  display: block;
}
iframe {
  width: 100%;
  height: 100%;
}
table {
  margin-top: 20px;
  width: 80%;
}
table,
th,
td {
  border: 1px solid #cecfd5;
  padding: 10px 15px;
}

<div class="header">heelo
</div>
<div class="middle">
  <div class="table1">

    <table>
      <tr>
        <td>name</td>
        <td>email</td>
        <td>age</td>
      </tr>
      <tr>
        <td>person</td>
        <td>person93person@gmail.com</td>
        <td>22</td>
      </tr>
      <tr>
        <td>person</td>
        <td>person93person@gmail.com</td>
        <td>23</td>
      </tr>

      <tr>
        <td>person</td>
        <td>person93person@gmail.com</td>
        <td>22</td>
      </tr>

      <tr>
        <td>person</td>
        <td>person93person@gmail.com</td>
        <td>22</td>
      </tr>
    </table>

  </div><!--
    --><div class="menu1">
    <form action="#">
      <label>username</label>
      <input type="text">
      <label>password</label>
      <input type="text">

      <label>age</label>
      <select>
        <option value="22">22</option>
        <option value="23">23</option>
      </select>


      <label>Click here to submit</label>
      <input type="submit ">

    </form>
  </div>
</div>
<div class="bottom ">
  <iframe src=" ">
    <p>Your browser does not support iframes.</p>

</div>

Please note by giving your divs a set height, you will break the layout on smaller screens

vertical-align fixed it.But why did the need for it occur?..I did not break the flow of the page in any way. I am yet to reach the responsive web design chapter in the book which I am following , so do not know much about viewport as of now. But should percent be the ideal for every screen?If I set width as 10%, then I intend it to be 10% of any screen on which it is displayed.Ain't it? — a dawg, Jan 27 '17 at 14:00
Vertical align is needed as your elements are inline-block. This means they are treat like words in a sentence - imagine you had different sized words, you would need to use vertical align to make them all align next to each other, the same goes for your divs which are no longer the same size when you add your table into the left div — Pete, Jan 27 '17 at 14:06
Ohhh..So that is the catch in making elements inline block.you win some you lose some. — a dawg, Jan 27 '17 at 14:13
yeah, you want to look into display:flex, it's the future - even everyone's beloved bootstrap is being made over to use flex — Pete, Jan 27 '17 at 14:17
Yeah sure.Once I wrap up the remaining chapters, I will head over to flex. Does it take away the pangs of arranging elements with stupid floats everywhere? — a dawg, Jan 27 '17 at 14:29
Yeah totally, this could help you as well: http://codepen.io/enxaneta/pen/adLPwv — Pete, Jan 27 '17 at 14:43
Thanks for your time and help.I will start with this :https://css-tricks.com/snippets/css/a-guide-to-flexbox/ — a dawg, Jan 27 '17 at 14:47

Table changing div size

3 Answers3