Getting CSS to position elements where you want them can be a hair pulling experience.  Case in point is when a DIV element refuses to expand vertically.

This can be a  particularly frustrating issue.  CSS of course has a height parameter which generally works well IF your site is static and you’re not trying to fill the the browser window no matter it’s size.  If you do want to fill the the browser window (iow have a fluid layout) a height of 100% just doesn’t work.  In a simple layout you can at times force it with a bottom-margin of 0, but this doesn’t seem to work in more complex layouts.

One common problem is when a parent element refuses to expand vertically to encase it’s child elements.  Quite often simply placing <br style="clear:both" /> after the last child element, and within the parent element, will solve the problem:

<div class="parent">
  <div class="child1">
  </div>
  <div class="child2">
  </div>
  <div class="child3">
  </div>
  <br style="clear:both" />
</div>

Another problem is having all columns the same height in a multiple column layout where your content doesn’t flow to the bottom of each DIV.  You could argue it doesn’t really matter, yet the site looks amateurish or incomplete.  Not to mention equal height columns is something we’re all used to seeing in a table driven layout.

A good example of this is a site I manage kentuckyroots.org.  Here the solution was to surround a DIV with a DIV, utilize the overflow parameter, then set the bottom padding of yet another DIV that won’t expand to an extreme size (that exceeds the biggest expected height of space that is missing content), and set the bottom margin to the exact same negative value as the padding which brings everything back to where it should be.  Here’s the HTML:

<div class="page">
  <div class="lhcolumn">(content here)</div>
  <div class="main">
    <div class="main2">
      (some content may go here-see notes)
      <div class="center">
        (some content may go here-see notes)
      </div>
    </div>
  </div>
</div>

Basically it’s a left hand column and a second main window column contained in a page.  It’s a simple layout which under normal circumstances works well but has it’s own vertical expansion issues which are resolved easily with a second DIV inside the main DIV and applying the overflow parameter.  What really makes things tricky here is depending on which content is selected for viewing, there’s additional formatting with the center DIV within the main DIV, and another vertical expansion problem.  This DIV refuses to expand vertically to the bottom of the main DIV when the content doesn’t fill it and this is where the padding and margin trick comes in.

Now for the CSS:

.main {
  width: 790px;
  background: rgb(240, 224, 208);
  float: right;
  padding: 20px 0 20px 20px;
  }
/* used exclusively for full column height */
.main2 {
  width: 100%;
  background: transparent;
  float: right;
  padding: 0;
  margin: 0;
  overflow: hidden;
  }
.center {
  display: block;
  width: 600px;
  padding: 8px;
  background: rgb(255, 238, 221);
  margin: 0;
  float: left;
  /* for full column height */
  padding-bottom:9000px;
  margin-bottom:-9000px;
  }

.main is where all of the DIV formatting takes place and .main2 was added purely for the overflow:hidden parameter which forces .main to expand vertically.

.center is the additional formatted area which requires the bottom padding and margin trick.  Yes, 9000px is an extreme number, yet if this value is too small there’s a chance there won’t be enough content to overcome the effect of a smaller value.  Better safe than sorry and the large value doesn’t otherwise affect a thing.

There are MANY good tutorials online that speak to this and how to handle it in different ways.  Here are a few that have been helpful to me:
Getting DIVS to Expand Vertically by Robert Sandy
Equal Height Columns with Cross-Browser CSS by Matthew James Taylor
CSS Equal Height Columns at abcoder.com
Faux Columns by Dan Cederholm

Hopefully something here will help you resolve this issue in your layout.  Let me know what you do or if you use any of these techniques.

Follow comments on this post with this RSS 2.0 feed.
Leave a comment, or trackback from your own site.

we have 1 comment

straight from the technology of Doug Webster
02.12.2015 at 5:44 pm

Of all the common design styles, vertical lines is one of the most challenging for HTML and CSS. What I’ve done for sidebars is actually create two versions, one floated and the other absolute. (I’ll put the sidebar content in another file and include it twice.) I certainly dislike the idea of doubling the content this way, but from a CSS and layout perspective, it works very well. Both the width and height of the sidebar can be flexible, because of the floated box. The non-sidebar content doesn’t have to be floated, just have the overflow set to auto to keep it from wrapping under. Sometime I may check out these other solutions though.



You must be logged in to post a comment.

. . :   design & hosting by creed3.com   : . .