CSS OverFlow Question with Enterprise Pro

[Micha]

Hello all. I'm very new to Genesis at this point so please forgive my ignorance in this.

I have a client site I'm mocking up now at:

http://robertsonfirm.wpengine.com
User: demo
Password: 3c7490

This theme comes with a couple of widgets for the home page but I added a a couple more. I added one in the top area "enterprise_home_top_widgets()" and a couple in the bottom "enterprise_home_bottom_widgets()".

The ones at the top are just fine.In the bottom one though, I'm trying to do a full width background in the widget title area.

I've some code added that works on pretty much every other site I've done before.

Here's my HTML (for only one widget area):

<div class="title-bar">
<h2 class="title">About the Firm</h2>
</div>

Here's my CSS:

.title-bar {
	background: #504b48;
	margin-left: -500px;
	margin-right: -500px;
	margin-bottom: 20px;
	margin-top: 20px;
	padding: 15px 0 10px;
	overflow: hidden;
}

.title {
	margin-left: 500px;
	margin-right: 500px;
	color: #6d8b3a;
}

What I can't figure out is why hiding the overflow isn't actually hiding the overflow. It's styled like I want, but for the life of me I can't seem to get that to go away.

I think this is being effected by the "site-inner" class which is wrapping that bottom area of the home page.

Can anyone provide any insight into how to work around this or what I may be doing wrong with my CSS? Any help is greatly appreciated.

Thanks,
Micha

http://robertsonfirm.wpengine.com

[Erik D. Slater]

Demo or not ... REMOVE YOUR LOGIN CREDENTIALS IMMEDIATELY
(click here to do it).

This forum is publicly viewable ... you do not need to be logged in.

---

Erik D. Slater: Digital Platform Consultant • LinkedIn

[Micha]

Thanks for that Erik... that login is NOT the wp admin... it's the login to be able to view the front end of the site ONLY.

[Micha]

Does anyone have any insight into this?

[Gandt]

Micha, yes, the issue and the fix are simple.

In order for a containing div to properly manage other divs inside it that have float properties, it must have display:block+overflow:hidden. So, what you need to do is:

.site-container {
display: block;
overflow: hidden;
width: 100%;
}

That fixed the issue for me, look at this screenshot taken from my end to illustrate how the annoying horizontal navbars are all gone:

Hope this helps
G

[Micha]

Hey Gandt. Thanks for this! The issue is solved.

I didn't realize that about the containing div. I kept trying to add these rules to other areas, but never did the .site-container. Makes perfect sense in hindsight.

Again, thanks a ton!

Micha

[Gandt]

My pleasure, glad I could help.

G

[Author]

Posts