Greetings,
I was wondering if anyone could tell me why the selected/highlighted area of text on a website I’ve designed extends across divs. The text is being selected in order (main content div, then sidebar div), but the visual effect is an overlap of background (selection) colors that appears to be very user unfriendly.
I’m attaching an image of what it looks like.
Thanks so much!
I think you’ll need to show us your full code (or preferably a live link) for us to see what’s going on. Is part of that layout floated and part not?
Hi,
Yes, the layout includes a main content area and a floated sidebar. I’ve posted a test site with code.
If you try selecting the text within the main content div, the highlighted area extends to the right edge of the main div, covering the sidebar. Why is that and how can I get the highlighted area to stop at the right edge of the main content div?
Thanks!
Hmm, that doesn’t happen for me in Firefox. What browser are you seeing this in?
EDIT: OK, I see it in Chrome and Safari. You could probably stop it happening by removing the large right margin on the Content div and instead floating it left.
Yes, Chrome and Safari. I just made a few changes to the css and I see that setting a width for the main content div and floating it left gets the highlighted text to stop at the right edge of the content div. Curiously though, it appears to still be selecting the sidebar div once I select the text down towards the bottom of the main content. Any thoughts on that?
The sidebar comes next in the HTML, so it gets highlighted next, as highlighting really just follows the logical order of the HTML. (It’s not really that interested in the CSS presentation.)
Alrighty! Ralph, thanks so much for taking the time to respond to my questions.
You’re most welcome. Glad it was helpful. 