Using Floating Divs, and absolute position dropdowns issue

HTML, CSS and anything else that deals with client side capabilities.

Moderator: General Moderators

Post Reply
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Using Floating Divs, and absolute position dropdowns issue

Post by simonmlewis »

Hi

We have a row of floating divs. When you hover over them, their respective dropdown menu shows. Perfect.
When it's down to a mobile width, the DIVs tile (so they don't take up too much vertical real-estate), but when you tap on them the 'dropdowns' go outside of the page width, causing the page to expand on a phone, and shrinking the page (to fit it all in the screen).

So my question is... is it possible to set the dropdown DIV to be full width of the screen, directly below it's parent DIV?

I have attached an example of what it is doing, and what I want it to do.
I'm using position: relative for each div and position: absolute for the dropdowns.
Attachments
Example of the issue and preference
Example of the issue and preference
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Re: Using Floating Divs, and absolute position dropdowns iss

Post by simonmlewis »

Answered my own question yet again.
In the Dropdown DIV that is display: none, add this line:
left: 0px;
And set width to be 100%.
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
Post Reply