Issue with browser resize

Here’s our site:

When I resize the browser a bit smaller, I get this effect:

I would prefer the menus to stack on top of one another and center the div (at this specific browser sizing). How would I approach this problem? Where does the issue lie?


There just isn’t enough room.

Also you should note that display:inlie-block and floating an element at the same time is useless. Floating will overtake it. So you can remove the floats.

Removing the floats to begin with will automatically make it correctly stack in that screen size (#menu and #right-menu). Right now #menu is floated left and #right-menu is floated right. You are seeing that (and at that particular screen size, that is a float drop due to not enough width but it’s still floated left/right)

Just throw in a media query and remove the float.


@media screen and (max-width:980px){
#nav ul{float:none}
1 Like

@RyanReese But if I remove floats, will the menus still align on the far left and far right? I thought the float:right purpose was to pull the menu to the right. If I remove that, won’t it just side up beside #menu?

Why does he need a media query? Removing it straight up works for me. It has inline-block already so it’s side by side.(Edit-Ignore this line Paul, you are a psychic.)

@awkward_clam, then make it floated for larger screens and hten use a media query like the above poster (Paul) did to unfloat it.

I guess you wouldn’t need to remove display:inline-block since float would override it. So basically just use Pauls code .

thanks guys. I’ll make the edits.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.