PDA

View Full Version : container div won't show without height attribute...



cpkid2
Oct 1st, 2009, 01:31 PM
The site can be viewed here (http://www.crackpixels.com/test).

There is a div called "content" that holds the "main" and "sidebar" divs.

Basically, I want the content to wrap around the "main" and "sidebar" divs but it won't show. If I add a height to "content" it shows but there has to be another way. I always have trouble with small things like this.

Am I missing a "clear" somewhere?

Can someone please take a look and give me some guidance?

Thanks in advance.

BONECRUSHER
Oct 1st, 2009, 01:45 PM
Wassup couzin, have you tried ur website on I.E ?.. It looks kinda messed up ..

SB65
Oct 1st, 2009, 01:52 PM
In order to clear your floats at the end of #content, here you can add overflow:auto to your css. If you do this, in Firefox etc the page will display as it currently does in IE7. IE displays as it does because #content has a width applied to it, it "hasLayout" in IE which effectively clears the floats.

As bonecrusher points out, the contrast between the text and the background is very poor....

cpkid2
Oct 1st, 2009, 08:13 PM
SB65, thank you! Adding overflow:auto to #content worked!

Also, the site is in no way finished which is why it looks the way it does. There will be plenty more added. I was just stuck on getting the #EEEEEE content background to display properly.

cpkid2
Oct 2nd, 2009, 02:33 AM
Just realized by adding overflow:auto to #content, the scroll bar shows up in IE7. Anyway to not make this happen? An alternate solution?

SB65
Oct 2nd, 2009, 09:56 AM
Looks like you've employed overflow:none - which removes the scrollbars.

However, the scrollbars with overflow:auto seem to be caused by IE doing something non-standard with your #subscribe div. If you look at it in IE7 this div is slightly wider than it's supposed to be and is extending beyond the right of the heading. This in turn is causing #sidebar to be wider and hence the content of #content is wider than the space allowed - so we get scrollbars with overflow:auto.

All of this is caused by the positioning of the submit button - which again you can see is further to the right in IE7 than in FF - and hence an easy fix is to float #subbutton left instead of right.

BONECRUSHER
Oct 2nd, 2009, 01:04 PM
Ur website looks much better than yesterday :thumbsup: ..Why do u wanna add somethin on it, looks perfect !! .. Just keep it that way :thumbsup: