Layouting a small table with HTML and CSS

Question

I'm very novice to HTML and CSS and have not yet "gotten it" how it all works. I am trying to achieve a table made of two rows, in which the first row only has one column and spans over the two columns of the second row.

In the first row I have an input box and I'd like the row to conform to the height of this input box. On the bottom left I have a button with its own style and I'd like the row (and cell) to conform to the size of the button. On the bottom right I have an image and I'd like the image to scale (preserving its aspect ratio) such that it either fills the height of the row (and floats to the right) or the width of the cell and centers vertically.

The table will fill its container (a div) horizontally.

Can anyone give me hints?

I don't necessarily need a table element, just something that achieves the effect without me having to specify pixel sizes to keep everything scalable.

Here is what I have now (some garbage may still be in there...):

table {
  display: table;
  table-layout: auto;
  width: 100%;
}

tr {
  display: table-row;
  width: auto;
  clear: both;
}

input {
  font-size: 16px;
}

input[name="text"] {
  line-height:1.875;
  display:table-cell;
  width:100%;
}

input[type="submit"] {
  border: 0;
  border-radius: 0;
  background: #d7b221;
  box-shadow: none;
  color: white;
  font-size: 16px;
  font-weight: bold;
  line-height: 1;
  padding: 1.4em 1.6em 1.2em;
}

img {
  width: auto;
  height: 52px;
}

a {
  display: block;
  float: right;
}

<form>
<table>
<tr>
<td colspan="2">
<input name="text" placeholder="Enter some text here"/>
</td>
</tr>
<tr>
<td><input type="submit" value="Click Here"/></td>
<td><a href="x"><img src="https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/car.svg"/></a></td>
</tr>
</table>
</form>

I guess it ultimately boils down to this:

#container {
  border:1px solid red;
}

#main_img {
  height: 30px;
  width: 30px;
}

#dep_img {
  max-width: 100%;
  max-height: 100%;
}

<div id="container">
    <img id="main_img" src="http://i.stack.imgur.com/xkF9Q.jpg">
    <img id="dep_img" src="http://i.stack.imgur.com/xkF9Q.jpg">
</div>

Is there any way in which the size (height) of the main image can dictate the size (height) of the dep image?

Answer 1

Why are you using a table to layout in the first place when you can do all that with just CSS. Learn CSS from this site: http://learnlayout.com/

Answer 2

If all you want is that all images are of the same size then that can be easily addressed by using a class for the images.

#container {
  border:1px solid red;
  padding: 5px;
}

.my-kind-of-image {
  height: 30px;
  width: 30px;
}

<div id="container">
    <img class="my-kind-of-image" src="http://i.stack.imgur.com/xkF9Q.jpg">
    <img class="my-kind-of-image" src="http://i.stack.imgur.com/xkF9Q.jpg">
    <img class="my-kind-of-image" src="https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/car.svg"/>
</div>