dt1000

# September 24, 2009 at 12:45 pm

Hello.
I am trying to modify a website that uses WordPress and a pre-generated template.
I would like the header for the individual posts to look like this:

[img]http://ipaa.ca/headerexample.jpg[/img]

Notice the little bit with the date that protrudes out to the left…

Unfortunately, due to heavy use of the "overflow:hidden;" property in the style sheet it ends up looking like this:

http://ipaa.ca/uncategorized/test-multi-image-post/

The content is temporary (I haven’t integrated the php yet) but you can see that the little bit on the left that should peek out of the edge of the page is being hidden.

Is there any way I can override the overflow for this one element to get the desired effect, or am I humped?

Thanks in advance!

Sincerely,
Dan

Chris Coyier

# September 24, 2009 at 1:13 pm

Well you are going to have to remove that overflow: hidden; property to fix it, and then see what that breaks, and fix that. Overflow hidden is commonly used a quick-and-dirty way to clear floats. You could look into using the clearfix method, or using using empty divs <div style="clear: both;"></div> to do the job that that does instead.

http://css-tricks.com/snippets/css/clear-fix/

TheDoc

# September 24, 2009 at 1:29 pm

I have NEVER been a fan of overflow:hidden to fix floats.