Yama Yama - 2 months ago 9
CSS Question

How to get middle div you fill vertical space?

I am fairly new to web design and i'm trying to test out page layouts. I have a layout with a header, left floating div, right floating div, body, and footer. What i'm trying to do is to get the "body" div to fill the vertical space between the floating divs. And also, if possible, how could I get the entire layout to fill the vertical space of the screen? I included an image at the bottom of the page, i'm trying to fill in all the scribbled space.

Here is my html code,

<body>
<div class="container">
<header>
<h1>Title</h1>
</header>
<div id="nav">
<p>Lorem ipsum dolor sit amet, integer velit senectus sit, proin ut id nec eu vel aliquet, pellentesque et venenatis lacinia aliquet wisi, bibendum mauris, fames turpis. Lectus nibh gravida wisi pede vel. Eu feugiat ligula aliquam mi, dolor quis, sollicitudin ut, quis mauris magna lectus. Velit a dignissim et, phasellus convallis sed condimentum, cum vitae consequat laoreet vestibulum. Rhoncus felis porttitor vitae, est mi ac etiam et ligula est. Rhoncus egestas erat fringilla, praesent et augue ultricies aliquam. Nascetur imperdiet nisl porttitor aenean, ante ipsum ornare magni, arcu consectetur, a pulvinar.</p>
</div>
<div id="right">
<p>Lorem ipsum dolor sit amet, integer velit senectus sit, proin ut id nec eu vel aliquet, pellentesque et venenatis lacinia aliquet wisi, bibendum mauris, fames turpis. Lectus nibh gravida wisi pede vel. Eu feugiat ligula aliquam mi, dolor quis, sollicitudin ut, quis mauris magna lectus. Velit a dignissim et, phasellus convallis sed condimentum, cum vitae consequat laoreet vestibulum. Rhoncus felis porttitor vitae, est mi ac etiam et ligula est. Rhoncus egestas erat fringilla, praesent et augue ultricies aliquam. Nascetur imperdiet nisl porttitor aenean, ante ipsum ornare magni, arcu consectetur, a pulvinar.</p>
</div>
<div id="body">
<p>Lorem ipsum dolor sit amet, integer velit senectus sit, proin ut id nec eu vel aliquet, pellentesque et venenatis lacinia aliquet wisi, bibendum mauris, fames turpis. Lectus nibh gravida wisi pede vel. Eu feugiat ligula aliquam mi, dolor quis, sollicitudin ut, quis mauris magna lectus. Velit a dignissim et, phasellus convallis sed condimentum, cum vitae consequat laoreet vestibulum. Rhoncus felis porttitor vitae, est mi ac etiam et ligula est. Rhoncus egestas erat fringilla, praesent et augue ultricies aliquam. Nascetur imperdiet nisl porttitor aenean, ante ipsum ornare magni, arcu consectetur, a pulvinar.</p>
</div>
<footer>Bottom</footer>
</div>
</body>
</html>


Here is my CSS,

<style>
div.container {
width:100%;
border:solid 1px;
}
header, footer {
background-color:rgb(000,000,000);
color:rgb(255,255,255);
padding:10px;
text-align:center;
clear:left;
}
#nav {
background-color:rgba(50,50,50,0.8);
float:left;
width:150px;
padding:10px;
}
#body {
background-color:rgba(100,100,100,0.8);
overflow:hidden;
padding:10px;
text-align:center;
}
#right {
background-color:rgba(50,50,50,0.8);
float:right;
max-width:150px;
padding:10px;
}
</style>


What i'm trying to figure out.

Answer

Try this CSS:

  div.container {
    width:100%;
    border:solid 1px;
  }
  header, footer {
    background-color:rgb(000,000,000);
    color:rgb(255,255,255);
    padding:10px;
    text-align:center;
    clear:left;
  }
  #nav {
    background-color:rgba(50,50,50,0.8);
    float:left;
    width:150px;
    padding:10px;
  }
  #body {
    background-color:rgba(100,100,100,0.8);
    overflow:hidden;
    padding:10px;
    text-align:center;
  }
  #right {
    background-color:rgba(50,50,50,0.8);
    float:right;
    max-width:150px;
    padding:10px;
  }

https://jsfiddle.net/xwsxupv0/1/

Comments