Can someone help me figure out how to make this logo overlap the .site-inner container? As you can see, I have it overlapping, but the whole logo isn’t showing.
Also, to make those notched corners, I used this code:
As a result, the .content and .sidebar-primary div floats weren’t being contained and the .site-inner div didn’t extend down the page as needed. So, I removed the floats from those divs and added display: inline-block. Well, now I can’t figure out why the .site-inner div still isn’t behaving.
That header is a little awkward with that construction as the html isn’t quite logical and starts with a negative margin rather than a nice logical structure. You could do something like this but will need to test it doesn’t cause issues later
I would have floated the image first and as a background to the h1 and not the wrap and then you could just drag the content up with a negative bottom margin.
Your content isn’t contained because you used the :after element for something else and it was already being utilised as a float clearer.
e.g.This is what would have contained the floats before you over-rode it.
You can’t use overflow:hidden either as a float container because you need visible overflow for those corners.
You can either nest an inner element inside site-inner and around your columns and apply the :after clearer styles to it as shown above or just put an empty clearer div (div style=“clear:both”></div>) after the floated columns.