CODEWITHSUNDEEP
htmlcss
Modus Operandi
Modus Operandi

Reputation: 641

Is there any way to do this HTML layout without using tables?

I'm working on a very dynamic-content web site that needs to reflow and adjust to changing content. One of the main requirements is that there is a header and footer (also having dynamic content of varying length and height), and that the content between them always takes up whatever space is left over between them.

With tables, this is trivial:

<table>
  <tr><td>Header</td></tr>
  <tr class="content"><td>Content</td></tr>
  <tr><td>Footer</td></tr>
</table>

table { height: 100%; }
tr.content { height: 100%; }

Stick such a table into any container (including the viewport if we're talking the top level page layout) and that's it, requirement met, work done.

But for the life of me I cannot seem to find a way to do this with CSS. I would have thought that in 15+ years since I first started prodding "that whole HTML stuff", such a fundamental thing as sizing things in relation to other things would have been refined to near-perfection by now, but it does not appear to be the case.

Am I missing something? It feels very wrong to use a table to layout a page (even moreso when it gets to sub-tables for the content), but if the only other option is JavaScript then I'd rather go back to the 90s HTML.

Here is a Codepen illustrating what I need, achieved with the HTML+CSS shown above: http://codepen.io/modo_lv/pen/PqBrRy?editors=110

Upvotes: 1

Views: 150

Answers (3)

kingshuk basak
kingshuk basak

Reputation: 421

type the following code and save it in .html format. i think it will help you.

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>

<body>
    <style>
.div1 {
    border: 3px solid #052d31;
    position: relative;
    clear: left;
    float: left;
    margin: 3px;
    }
   </style>

    <div class="div1">
        <p>change this text the div will resize dynamically</p>
    </div>

    <div class="div1">
        <p>change this text</p>
    </div>
</body>
</html>

Upvotes: 0

Paulie_D
Paulie_D

Reputation: 115342

As mentioned,by Paul Redmond....flexbox is equally trivial

div {
  border: 1px solid grey;
  margin: 25px;
}
.container {
  height: 250px;
  width: 350px;
  display: flex;
  flex-direction: column;
}
header,
footer {
  flex: 0 0 auto;
  background: lightgrey;
}
main {
  flex-grow: 1;
  background: lightblue;
}
<div class="container">
  <header>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed, ab.</header>
  <main></main>
  <footer>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse quidem similique voluptates! A libero accusantium ut, autem ad eos natus accusamus alias ab, velit labore!</footer>
</div>

Codepen Demo

Upvotes: 0

Paul Redmond
Paul Redmond

Reputation: 3296

Here are two options:

  1. Use divs instead of tables and use the table-layout CSS, e.g.

    display: table; display: table-row; display: table-cell;

  2. Use Flexbox.

Upvotes: 2

Related Questions