[Solved] Element moves outside the page in webkit

[ckubs]

I have a problem regarding my wordpress theme( the scarry design it’s my own and I’m in the learnig phase) that I’ve described in this picture. Basically I have 3 buttons in the left of my tagline each with a drop down when clicked( one with search bar…etc). Only in Firefox and IE the dropdowns appear where I want not in Chrome and Opera as they go outside the page.

The container with everything is styled:

.hed-drop {
    margin-bottom: 0;
    position: relative;
    width: 100%;
    }

Aside from H2 the description has no class that matters. Every button has only display: inline-block; .

The dropdown container .ul with class .subs is styled:

 ul {
    margin: 20px 0 0 0;
    padding-top: 10px;
    }
.subs {
position: absolute;
width: 100%;
}

And the dropdown itself is .li with:

ul  li {
    text-align: center;
    display: inline-block;
    }

Thanks for any help I may get. And if I wasn’t maybe descriptive enough here is my adress too.

[Paulie_D]

position:absolute by itself will do very little to put it where you want it.

Ideally you need to it be positioned with reference to something else, usually the parent element.

So, to start with try adding this

.left-menu {
display: inline-flex;
position: relative; /* this */
}

Then this

.subs {
position: absolute;
width: 100%; 
left: 0; /* you may have to adjust this */
top: 100%;
}

However, that will position ALL of the .subs menu in the SAME place which might not be what you want.

What might be better is to move the `.subs’ menu actually INTO the div which represent the button. then apply position relative to that div.

Basically, you need to look at how and where you are applying the positioning and in what context.

[ckubs]

Used your advice but still had a problem. I got rid of dropdown container and dropdow opened on the page but only as the button width and starting from the button to the right.

So, I used exact px widths to the dropdowns, moved the buttons to the left of the headline since the blue one expanded still got out of the page a bit, and for smaller screens( basically 640px<) used some negative margin to the left to have almost the whole area for the dropdowns not only from the button to the right. I don’t know If that’s way shouuld be done, but I’m not a pro and it works :)

I have to make some CSS cleanup sometime and that’s it for now. Thanks. :D

[Author]

Posts