Home/ Questions/Q 8228403
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-07T16:26:43+00:00

I need to achieve something like this: <a style=display:block; href=#> <div style=float:left;display:block;>Left</div> <div> <div

  • 0

I need to achieve something like this:

<a style="display:block;" href="#">
  <div style="float:left;display:block;">Left</div>
  <div>
    <div style="display:block;">Right</div>
    <div style="display:block;">Right Bottom</div>
  </div>
</a>

Basically a button with 2 columns and the right column having 2 rows.

It shows up correctly in modern browsers with inline/block support but in IE6 and IE7, whenever I hover the left div (with float) it’ll display as the ‘select’ text icon instead of the hand icon (i believe once float, block will be cancelled and displayed as inline). Is there any way I can achieve this without using an image as a whole? I need it to be text because it’s important for SEO and retina displays.

🙁 🙁

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team
    <a href="http://www.google.com/" target="_blank" style="display:block; overflow: hidden" href="#">
  <div style="float:left; width:150px;">Left</div>

  <div style="float:right; width:150px;">
    <div style="display:block;">Right</div>
    <div style="display:block;">Right Bottom</div>
  </div>

  <div style="clear: both;"></div><!-- This will clear the floats for IE -->
</a>

    To avoid text cursor add this CSS – 

    a div{cursor: pointer;}

    Demo – http://jsfiddle.net/ZhKmr/4/

    • 0