Search code examples
cssresponsive-designpositiongrid-layoutportfolio

Make a div extend all the way down on my page?

This is my page: http://goodshitdesign.no/ (It is a portfolio for my hobby of designing logos)

I simply want to split the page in two under my header, with a box of information on the left and a flexible grid of logos on the right.

The problem is that when I add too many logos the page becomes longer than the 100% it originally is, and the infobox is cut short at the bottom, and logos start appearing under it. You can probably see what I mean on the page.

I cant make the position of the infobox absolute, because then the logos go behind the infobox.

I cant put the logogrid inside its own div, because then the rows and columns wont adjust to what suits the size of the page best.

Can someone please help me? It would be enormously appreciated!

Solution

  • You could use flexbox as mentioned, or new css for containers like this:

    div.infobox {
width: 30%;
height: 100%;
background-color: #ebebeb;
text-align: center;
display: inline-block;
float: left;
}

    for your logo container div:

    div.logobox {
position: absolute;
top: 0;
right: 0;
width: 70%;
height: 100%;
background-color: #d2d2d2;
font-family: 'Source Sans Pro', sans-serif;
display: block;
float: left;    
}

    parent div:

    .parentdiv {
 position: relative;
 height: 100%; }

    logo divs:

    div.logo {
display: inline-block;
margin: 10px;
width: 200px;
-webkit-transition: all 0.1s ease;
-moz-transition: all 0.1s ease;
-o-transition: all 0.1s ease;
-ms-transition: all 0.1s ease;
transition: all 0.1s ease; }

    To change the height of .infobox when the resizing happens, add this javascript in your page in a script tag:

        $(document).ready(function() {
 $(window).on("resize",function() {

      var bodyheight = $(document).height();

      $(".parentdiv").height(bodyheight);
 });});