CSS: Parent/Child height issue

Question

I'm struggling with a sidebar height.

My container is now showing the correct height (that of the content inside), but my sidebar that should be using 100% of that height is still not appearing.

I've implemented one of the suggestions below (http://www.quirksmode.org/css/clearing.html) but the sidebar's still not appearing.

I'm sure this is a simple one for you pros, any tips appreciated!

Thanks,

Tom

Here's my code: http://jsfiddle.net/tomperkins/wy52B/

score 1 · Answer 1 · answered Dec 30 '10 at 17:31

1

Check out this way of clearing floats, it's a lot cleaner and easier to use.

answered Dec 30 '10 at 17:31

brad

31,987
28
102
155

Thanks, a neat solution. Still not making the sidebar appear though. Any ideas? – Tom Perkins Dec 30 '10 at 17:49
having a hard time parsing through all the code in jsfiddle, maybe if you could do a simple example with main content and sidebar, omit any other unnecessary tags and it's easier to debug – brad Dec 31 '10 at 03:31

score 0 · Answer 2 · edited Jun 20 '20 at 09:12

0

Don't use clearfix

It's not necessary in most situations, and it's definitely not semantic.

The simple solution for most cases: float the parent.

HTML:

<div class="parent">
  <div class="child">
  </div>
  <div class="child">
  </div>
</div>

CSS:

.parent
{
  float: left;
  width: 100%; /*or whatever you want it to be*/
}

.child
{
  float: left;
  width: 50%;
}

edited Jun 20 '20 at 09:12

Community

1
1

answered Dec 30 '10 at 17:37

zzzzBov

174,988
54
320
367

Thanks for your suggestion, but I have the parent centered, so can't float. – Tom Perkins Dec 30 '10 at 17:51
Do you have more children than the floated children? because you could just add `clear:both` to the next child's styles. – zzzzBov Dec 30 '10 at 18:40

CSS: Parent/Child height issue

2 Answers2

Don't use clearfix