How to expand div in a HTML page

Question

I'm working on a browser app. I have read about a couple of dozen pages about the DIV tag. I just can not get it to work. I know I should use CSS but I will incorporate that at the end after I get some other things done.

Basically I want a header and a footer. Then a fixed width side bar and the rest to be filled with a content area. I almost got it but the sidebar starts too low (it should be the same height of the content) and the content does not expand to fit the width of the browser.

Here is what I have got:

<header style='background-color:#013499; height:60'>

  <br>
  <span style='color:white'>&nbsp &nbsp Whole Number</span>
  <select>
    <option value=""></option>
    <option value="1">One</option>
    <option value="2">Two</option>
  </select>
</header>

<div>
  <div style='display:inline-block; background-color:#7690C5; width:200'>
    Task1
    <br>Task2
    <br>
  </div>
  <div style='display:inline-block; background-color:#F2F2F2'>
    Top
    <br>Content
    <br>Bottom
  </div>
</div>

<footer style='background-color:#013499; height:60'>

  <br>
  <form name="Actions" action="test.html" method="post">
    &nbsp &nbsp
    <input type="submit" name="send_button" value="Save">&nbsp &nbsp
    <input type="submit" name="send_button" value="Cancel">
  </form>

</footer>

I found this post which helped a lot. But it is still not right. I cant seem to find any documentation that explains how these things work together.

I cant figure out how to get the content to fill up the remaining space. It ends up too short (sizing to the actual content) or extending beyond the screen size because at 100% it includes the width of the sidebar. I know whats going wrong but I do not know how to make it right.

I moved the styles out of the HTML now.

html, body {
    height: 100%;
 margin: 0;
}

header {
    width: 100%;
    height: 60px;
    background-color: #013499;
 margin: 0;
}

#wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 0 -60px 0; /* the bottom margin is the negative value of the footer's height */
    position: relative;
}

#sidebar {
    background-color: #7690C5;
    width: 300px;
    height: auto !important;
    bottom: 60px;
    top: 60px;
 display: inline-block;
 position: absolute;
}

#content {
    background-color: #F2F2F2;
    width: 100%;
    height: auto !important;
    bottom: 60px;
    top: 60px;
    margin-left: 300px;
 display: inline-block;
 position: absolute;
}

footer {
    margin: -60px 0 0 0;
    width: 100%;
    height: 60px;
    background-color: #013499;
}

#buttons {
 margin-right: 20px;
 text-align: right;
}

<!DOCTYPE HTML>
<html>
<head>
<title>Viewer test</title>

 <link rel=Stylesheet Type='text/css' href=ERP.css> 

</head>
<body>

 <div id="wrapper">

  <header>

   <br>
      <span style='color:white'>&nbsp &nbsp Whole Number</span>
      <select>
       <option value=""></option>
       <option value="1">One</option>
    <option value="2">Two</option>
      </select>

     </header>

  <div id="sidebar">
       Task1<br>
       Task2<br>
  </div>

     <div id="content">
       Content
  </div>

 </div>

    <footer>

     <br>
  <form id='buttons' name="Actions" action="test.html" method="post">
      <input type="submit" name="send_button" value="Save">&nbsp &nbsp
      <input type="submit" name="send_button" value="Cancel">
  </form>

    </footer>

</body>
</html>

could you please reproduce the issue in a [fidle](http://jsfiddle.net/) — Lal, Mar 27 '15 at 17:21
Why are you incorporating CSS at the end? CSS does the very thing you are looking to do. HTML should be used for content and CSS should be used for styling. — sbatson5, Mar 27 '15 at 17:23
is [this](http://jsfiddle.net/lalu050/r6w6qo8h/) what you want?? — Lal, Mar 27 '15 at 17:26
Thanks Lai, you fixed one thing. I would also like the middle sections to be equal height and fill the remainder of the browser window. — John Maher, Mar 27 '15 at 17:38

score 0 · Answer 1 · answered Mar 27 '15 at 17:28

0

Firstly, don't use inline styles. Anyone that touches your code will hate you and when you want to apply a change to 100 elements that are the same at once you will equally hate yourself.

Also, HTML is the bread, CSS is the butter. On their own they're rubbish but together they're super awesome.

The only reason your "sidebar" isn't full height is because the content of the element next to is has more content. You need to incorporate CSS to stop this from happening.

answered Mar 27 '15 at 17:28

Jamie Barker

8,145
3
29
64

OK, so what you're saying is that I can't get it to work and then create the CSS. What CSS attribute do I need to read about to get these ares to fill the screen? – John Maher Mar 27 '15 at 17:45

score 0 · Answer 2 · answered Mar 27 '15 at 17:28

0

See the fiddle

The reason why the sidebar was a little bit down was because of the inline-block that you had in the style.In the fiddle that i have made i have replaced the display:inline-block; with float:left;. Kindly see the fiddle

The new markup is as follows

<header style='background-color:#013499; height:60px'>
    <br> <span style='color:white'>&nbsp &nbsp Whole Number</span>

    <select>
        <option value=""></option>
        <option value="1">One</option>
        <option value="2">Two</option>
    </select>
</header>
<div>
    <div style='float:left; background-color:#7690C5; width:200px;'>Task1
        <br>Task2
        <br>
    </div>
    <div style='float:left; background-color:#F2F2F2;'>Top
        <br>Content
        <br>Bottom</div>
</div>
<footer style='clear:both;background-color:#013499; height:60px'>
    <br>
    <form name="Actions" action="test.html" method="post">&nbsp &nbsp
        <input type="submit" name="send_button" value="Save">&nbsp &nbsp
        <input type="submit" name="send_button" value="Cancel">
    </form>
</footer>

answered Mar 27 '15 at 17:28

Lal

14,726
4
45
70

Thanks Lai and I appreciate the explanation. It will help me not make the same mistake again. However I would also like the middle sections to be equal height and fill the remainder of the browser window. – John Maher Mar 27 '15 at 17:39
1

for that you'll have to give the height for each of the divs in `%` instaed of `px`.But for the `%` to work, you'll have to first set the height of `html` and `body` as `100%`. Try it.. – Lal Mar 27 '15 at 17:41
I can't see how to logically combine a percentage with a static (hard coded) value. The header and footer are fixed sizes. The content needs to expand. – John Maher Mar 27 '15 at 18:46
Are you suggestion initially load the page, get the screen height then reload (and rebuild) the page passing this information to php code? – John Maher Mar 27 '15 at 18:50
no,i was saying for example, the height of header should be 20%,footer should be 20% and the remaining would be for the content. ie 100%-20%+20%=60% – Lal Mar 27 '15 at 18:52
That doesn't work. Think about viewing the page on a tablet. Then think about on a PC with a good size monitor. Either one or both will not look well. I need a static header and footer with an expanding middle.. Its such a basic concept I'm really surprised no one knows how to do it. I've been searching all day. – John Maher Mar 27 '15 at 19:13
It is the default behaviour of html..you just enclose all the contents that should come into the middle in one div and the height of this div will automatically increase or decrease with respect to the contents. – Lal Mar 27 '15 at 19:16

score 0 · Answer 3 · answered Mar 27 '15 at 17:30

0

Try using fixed (or absolute) positions perhaps. Try this, for example:

<header style="background-color:#013499; height:60; right: 0;left: 0;top: 0;position: fixed;">

<div style="display:inline-block; background-color:#F2F2F2;float: right;top: 60px;position: fixed;right: 0;"> 

<footer style="background-color:#013499; height: 62px;position: fixed;width: 100%;left: 0;bottom: 0;">

answered Mar 27 '15 at 17:30

Ryan Rebo

1,278
2
13
27

And as mentioned above, it is of course best not to use inline CSS. Give each DIV a class or id and put the CSS in a separate file. – Ryan Rebo Mar 27 '15 at 17:32
Thanks. The CSS will come after it works. Right now I keep moving things around. And I don't know what you mean by fixed positions. The width and height need to be corrected and they will be different valuse based on the screen / resolution. – John Maher Mar 27 '15 at 17:43
I'd do a quick readup on positioning http://www.w3schools.com/css/css_positioning.asp and media queries for working with different screen resolutions https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries – Ryan Rebo Mar 27 '15 at 17:56
Thanks for the links but you still seem to misunderstand, its not about positioning, its about sizing. – John Maher Mar 27 '15 at 18:43

How to expand div in a HTML page

3 Answers3

See the fiddle