How can I make the logo overlap & how can I contain these floats?

HTML & CSS
1

URL: http://goo.gl/uBf63x

Hello,

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:


.site-inner {
	background: #fff;
	border: 1px solid #cbcbcb;
	clear: both;
	margin-top: -30px;
	margin-top: -3rem;
	position: relative;
	z-index: 2;
}

.site-inner:before, .site-inner:after {
  display: block;
  height: 14px;
  font-size: 0;
}

.site-inner:before {
	content: url(images/tl.png);
	background: url(images/tr.png) no-repeat 100% 0;
	left: -1px;
	right: -1px;
	position: absolute;
	top: -1px;
}

.site-inner:after {
	content: url(images/bl.png);
	background: url(images/br.png) no-repeat 100% 0;
	left: -1px;
	right: -1px;
	position: absolute;
	bottom: -1px;
}

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.

Ideas?

2

Hi,

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


.site-header {
height:274px;
overflow:visible;
}
.header-image .site-title a {
 height: 361px;
}
.site-inner{clear:left}

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.



.archive-pagination:after, .clearfix:after, .entry:after, .entry-pagination:after, .footer-widgets:after, .nav-primary:after, .nav-secondary:after, .site-container:after, .site-footer:after, .site-header:after, .site-inner:after, .wrap:after {
    clear: both;
    content: " ";
    display: table;
}

It can’t do both.

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.

3

Thank you so much, Paul. I really appreciate your help!