Jump to content

IE6 - Empty div same height as adjacent div


robertmeyers0513

Recommended Posts

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 testhttp://www.freeimagehosting.net/uploads/9e6dfb1781.jpg[/img]

 

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

Link to comment
Share on other sites

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:

 

content here

 

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...