3

I don't know how to ask this without a picture. I have two divs, side-by-side, within another div with padding and margins as such. This is what I WANT to achieve:

+-------------------------------------------------------------------+--------+
|                                       A                           |   C    |
|   +-----------------------------------------------------------+   |        |
|   |                               B                           |   |        |
|   |                                                           |   |        |
|   |                                                           |   |        |
|   |                                                           |   |        |
|   |                                                           |   |        |
|   |                                                           |   |        |
|   |                                                           |   |        |
|   +-----------------------------------------------------------+   |        |
|                                                                   |        |
+-------------------------------------------------------------------+--------+

but here is what I get. I am able to float the divs and compensate for margins, etc, but I can't get div C to extend to the entire height of A. Neither A nor B have a fixed height, so how do I get C to extend to the full height of A?

+-------------------------------------------------------------------+--------+
|                                       A                           |   C    |
|   +-----------------------------------------------------------+   |        |
|   |                               B                           |   |        |
|   |                                                           |   |        |
|   |                                                           |   |        |
|   |                                                           |   +--------+
|   |                                                           |            |
|   |                                                           |            |
|   |                                                           |            |
|   +-----------------------------------------------------------+            |
|                                                                            |
+----------------------------------------------------------------------------+

The height of A is stretched by the height of B. It's an entirely fluid layout too, so the width isn't fixed either. Basically, I need C to extend the entire height of A.

I tried playing around with all the heights, but I can't get it to work because the heights aren't fixed :(

A is just a div wrapper basically, no padding, no margin. B is actually composed of two divs with margin and padding, float:left; C is just one div, float:right;

EDIT: I need to support IE as well, WITHOUT CSS hacks

JakeParis
  • 11,056
  • 3
  • 42
  • 65
sethvargo
  • 26,739
  • 10
  • 86
  • 156
  • yea. the problem is that div C is floated, so it's not actually a child of A (same with B). height applies to the parent, and C doesn't actually have a parent to size to – sethvargo Jan 05 '11 at 20:03

6 Answers6

4

How about making C position: absolute; right: 0; instead of floated? Like so: http://jsfiddle.net/JMC_Creative/2gr3T/1/

#a { overflow:auto;
position: relative;
}

#b {height: 200px;
    width: 200px;
    margin: 50px;
    float: left;
}

#c { height: 100%;
    position: absolute;
    right: 0;
    width: 40px;
}
JakeParis
  • 11,056
  • 3
  • 42
  • 65
  • That works great! Unless I'm trying to support internet explorer, which I am. In IE6, C is attached to the right of the PAGE, not of A. Yeah, I know IE sucks and I despise having to support it, but I have to for this project. – sethvargo Jan 05 '11 at 20:23
  • If C _has_ to be outside of A, than I would suggest moving to javasript for the solution. – JakeParis Jan 05 '11 at 20:27
  • 1
    IE6 should get it right when parent is position: relative... or I'm way too drunk. – kapa Jan 05 '11 at 20:27
  • nope. IE6, will work if parent is position: absolute, but not relative. its a known bug – sethvargo Jan 05 '11 at 20:28
1

Here's a crazy idea and I'd have to work out the CSS, but what if...

A contained B and C C is absolutely positioned against A's right, top, and bottom A had right-padding or margin as wide as C

n8wrl
  • 19,439
  • 4
  • 63
  • 103
  • This does work, I use this method in my web applications regularly. It has disadvantages however, especially if you don't want overflow. – Sandwich Jan 05 '11 at 20:18
  • This DOESN'T work in IE6. it attaches C to the right of the page, not A – sethvargo Jan 05 '11 at 20:25
  • 1
    **#A** needs to have `position:relative` or `position:absolute`, otherwise it will be absolute to the `` element. This method is compliant all the way back to IE5. But again, has it's fair share of disadvantages, depending on the situation. – Sandwich Jan 05 '11 at 20:27
  • its not behaving that way. It's going to body no matter what. I have other divs, including two wrapper divs that are both position:relative and it still moves outside to body. it doesn't work unless i set it to position:absolute, which i cant – sethvargo Jan 05 '11 at 20:34
1

I don't think this will solve the problem, but it may help.

Whenever I have problems with floats and heights I will put overflow:auto on the parent element. I found this technique on quirksmode.

http://www.quirksmode.org/css/clearing.html

pd1138
  • 63
  • 6
1

The best and simplest way I know of is to add overflow:hidden to #A and give #C a value of padding-bottom:999em; margin-bottom:-999em;

It even works in IE5!

cyreb7
  • 316
  • 1
  • 4
  • 11
0

Here is a snippet from my personal library that may help you out, also, check out this question and this more specific javascript solution.

Some notes:

  • By default, these values are absolute to the <body> elements, unless
  • You set the parent's position attribute to either relative or absolute, otherwise the element will be absolute to <body>, or the closest element with position registrations. 
/* 
Name: Absolute 100% Height
Author: DSKVR 2010 
Website: http://dskvry.com
*/

body *.full-height, 
body *.full-height-left, 
body *.full-height-left, 
body *.full-height-width {
    position:absolute;
    height:auto;
    margin:0;
}

body *.full-height {
 top:0;
 bottom:0;
}

body *.full-height-left {
    top:0;
    bottom:0;
    left:0;
}

body *.full-height-right {
    top:0;
    right:0;
    bottom:0;
}

body *.full-area {
    top:0;
    left:0;
    right:0;
    bottom:0;
}
Community
  • 1
  • 1
Sandwich
  • 2,304
  • 3
  • 24
  • 30
0

There is lots written on the net about CSS equal column heights. The solution that I generally use is to use jQuery to calculate the max height of all the columns, and then use jQuery to set the heights of all the columns to the same thing. I normally do this by hand, but there are some plugins that accomplish the task.

If the columns need to be the same height for purely visual reasons, you can be creative with background images on the columns to give the illusion of equal height. This doesn't always work, depending on your design, but I have used it in the past.

mpdonadio
  • 2,891
  • 3
  • 35
  • 54
  • I ended up having to use jQuery. I've decided it's impossible in IE6 without using JS, and I am allowed to require that the browser supports JS. – sethvargo Jan 05 '11 at 20:51
  • Using jQuery to get around IE6 problems has been my tool choice the last two years or so, rather than banging my head over CSS hacks/workarounds (even with conditional stylesheets). That said, I don't know what your layout needs to look like, but faking the height with background images on the parent container can be really handy, and is often a very simple solution (when it will work). – mpdonadio Jan 05 '11 at 21:18
  • i cant do that because the width is also fluid – sethvargo Jan 05 '11 at 21:51