[Solved] CSS nightmare… clear: both; related?

[BrinW]

Hi all,

For hours and hours now I just can’t work this one out: the author box at the bottom of all the posts on my blog, WinningWP, isn’t spreading across the full width of the content area as it should – BUT only in Chrome. In Firefox and Safari it shows as intended… so why not in Chrome?

I’ve been thinking it could be fixed with the addition of a div styled with clear:both; – but nothing seems to be working… and now I’m so lost in it I can’t think what else to try… Any ideas?

Would really appreciate the help.

Example of the problem: http://winningwp.com/how-to-reposition-jetpacks-related-posts-module-and-other-customizations/ . Remember to view in Chrome ;)

Note: I first noticed the problem after adding the new “Related Posts” section you can see below the author box.. before the addition I don’t think (although I can’t be sure) the problem was apparent – just in case this helps somehow.

Thanks,
Brin

[Soren]

I see you’re using div.inner to add padding left and right and then fighting this with negative margins to position the div.author-box.

Could you not make it easier on yourself and take out div.author-box from div.inner?

Then add another div.inner that can house the content below div.author-box. Like so:

http://codepen.io/soren-tree/pen/cGIup

div.inner —> site content
div.author-box
div.inner —> related posts/contact form

[BrinW]

Hi Soren,

Thanks v’ much for such a quick reply – what you’re saying seems to make sense and granted, it may also be a cleaner solution… but I’m reluctant to try and go about implementing it: partly because I can’t help but worry that doing as you suggest might inadvertently cause something else to go wrong somehow (I’ve got a lot of mobile-specific CSS happening for different size screens that I’m not keen to have to redo to boot) but mainly because I can’t help but think the way it is now almost works (I feel so close! – lol).

Surely there must be an easy way to keep it as it is now and just convince Chrome to behave like the other browsers… no?

I’d really like to know (for future reference) what it is (CSS related I’m guessing?) that makes Chrome behave differently!

Brin

[Soren]

I know what you’re saying : ) I’m looking forward to seeing the solution, too.

Good luck. You’ll get there!

[BrinW]

Soren, after reading your ideas I had another hard look at it and realized the authorbox didn’t have a width… I tried setting the width to 100-103% (depends on screensize) and it seems to now be working! Clear your cache and reload it… how’s that?

[Soren]

Hey, yeah that works when viewed full size but the issue occurs when resizing the window. I know you can control this with media queries so not a huge headache and we know the average user won’t sit there resizing their window.

My only concern is the use of “magic numbers” to fix things but it’s not my project and if it works for you and you’re satisfied with things then more power to you :)

[BrinW]

Aha, yes, you’re right – it occurs again with a smaller window… thank you, once again, for pointing this out – much appreciated.

I hear you regarding the ‘magic numbers’… if this was anything but my own website I’d fix it ‘properly’, but since it’s all mine (this time) I’ll go the quick fix route for now and add another media query. ;)

Thank you though – without your suggestions I doubt I’d have managed to stumble upon a solution.

Very best,
Brin

[Author]

Posts