Div element pushed down in Chrome, but not IE or Firefox

Question

I have my page up at http://www.playcademy.com/nolimits_mockup.php, and I am getting a bunch of whitespace below the slideshow in Chrome, though it isn't appearing in Firefox or IE.

When I inspect elements it seems that the headlineArea div is in the correct spot, but everything inside it is about 70px too low.

I'm sure I am missing something basic, but I have no idea what.

Thanks, Doug

score 0 · Accepted Answer · answered Dec 03 '13 at 20:57

0

Your #slidearea div is too wide.

#slidearea {
display: inline-block;
text-align: center;
position: relative;
width: 915px; /*This was 920px. I narrowed it down to 915px.*/
height: 83px;
overflow: visible;
}

answered Dec 03 '13 at 20:57

Taylan Aydinli

4,333
15
39
33

Thanks. That solved the issue. If you have a sec, and can tell me why that only causes a problem in Chrome I'd love to understand the inconsistency. – dspaulding Dec 03 '13 at 21:05

score 0 · Answer 2 · edited May 23 '17 at 12:28

0

You need to apply a clearfix on headlineArea in order for it to display consistently because it only contains floating child elements.

See: What methods of ‘clearfix’ can I use?

edited May 23 '17 at 12:28

Community

1
1

answered Dec 03 '13 at 20:57

Homer6

15,034
11
61
81

Div element pushed down in Chrome, but not IE or Firefox

2 Answers2