• Registered: July 20, 2009
  • Posts: 3

Topic: IE6 - Empty div same height as adjacent div

Ok, I've searched EVERYWHERE for a solution to this problem and have only found solutions to similar problems, but not this exact one. I normally don't post in forums because I can usually find the solution by searching online and trial and error. However, I am at a loss on this one. Hopefully I have overlooked a simple solution.

Anyway, here is how I would like my site to be set up:

PunBB bbcode test

The layout needs to have these properties:

1. The width of the wrapper div must be fluid. As the browser window is resized, the wrapper (and consequently the container div) must be resized to the width of the window as well.
2. The height of the content div will be determined from the amount of content placed in it. So, it needs to be able to dynamically expand vertically with the content.
3. The side divs will be empty (they will have an image repeated vertically) with a constant width. However, they need to dynamically expand vertically to be as tall as the content div.

In other words, how can I make the two empty side divs be the same height as the content div?

I am using php to load a specific style sheet for IE6, so it only needs to work with IE6. I have been able to get this layout to work with every other browser except IE6.

I really don't want to use javascript, but I'm about ready to throw in the towel and use it. I hope somebody can help...

Robert

Vote up Vote down

  • Gender: Male
  • From: Chico/Sacramento, CA
  • Registered: December 19, 2008
  • Posts: 2,810
  • Reputation: 14

Re: IE6 - Empty div same height as adjacent div

Technically, you can't do this with divs -- that's not how they work. They expand to fill their contents, and if their contents are empty, they won't expand dynamically.  You could, however, do nested divs:

<div class="wrapper">
<div class="sidebar1">
<div class="sidebar2">
    content here
</div>
</div>
</div>

and then use css:

.sidebar1 { background: url() top left repeat-y; padding-left: 40px;  }
.sidebar2 { background: url() top right repeat-y; padding-right: 40px;  }

That should work. You'll get your repeating left and right columns, and the padding left/right will move the content into the correct spot.

Benjamin Falk | Falken Creative : Twitter
Skills: Photoshop, Illustrator, HTML, CSS, jQuery, PHP and CodeIgniter

Vote up Vote down

  • Registered: July 20, 2009
  • Posts: 3

Re: IE6 - Empty div same height as adjacent div

Wow. That's surprisingly simple and works for firefox, IE6, IE7, IE8, and chrome. Thanks a million! This has seriously made my life much easier!

Robert

Vote up Vote down

  • From: Salisbury UK
  • Registered: December 20, 2008
  • Posts: 1,331

Re: IE6 - Empty div same height as adjacent div

falkencreative's code is simple and works well for a background-images in the sidebars; but note that he hasn't given the sidebars a width, only padding on one side. If you give sidebars a width, perhaps if you want to put text or links in them, the center content will be the same width because the content is nested inside sidebar2 which is nested inside sidebar1 and will take the width of the parent with the narrowest width.

If you want sidebars with a width for a background image and text, see item 17a here
http://www.wickham43.net/firefoxbackground.php
which uses a more complicated nesting arrangement.

Vote up Vote down

  • Gender: Male
  • From: Chico/Sacramento, CA
  • Registered: December 19, 2008
  • Posts: 2,810
  • Reputation: 14

Re: IE6 - Empty div same height as adjacent div

falkencreative's code is simple and works well for a background-images in the sidebars; but note that he hasn't given the sidebars a width, only padding on one side.

Correct. My code example is really only intended to work for instances where you need a repeating left/right images that extend all the way down the page, and there is no actual content.

Benjamin Falk | Falken Creative : Twitter
Skills: Photoshop, Illustrator, HTML, CSS, jQuery, PHP and CodeIgniter

Vote up Vote down

  • Registered: July 20, 2009
  • Posts: 3

Re: IE6 - Empty div same height as adjacent div

Thanks guys!

Vote up Vote down