CODEWITHSUNDEEP
csshtmlbuttoninternet-explorer-7
code.tweetie
code.tweetie

Reputation: 624

IE7 - trying to place two adjacent divs in a button tag

I'm trying to style 2 divs in a button tag (1 div will hold an icon & another a descriptive text, please note I can't change the html tags).
In IE7, the 2 divs in a div sit side-by-side whereas the same 2 divs in a button tag sit 1 below the other.
Is there something specific with a button tag to arrange the dive 1 below each other and can it be overridden by any IE7 hacks or css tricks ?

<!DOCTYPE html>
<html>
<head>
    <style>
        button {
            display:block;
            float:left;
            clear:none;
        }
        .div1 {
            border:1px solid red;float:left;
        }
        .div2 {
            border:1px solid red;float:left;
        }
        .div3 {
            border:1px solid cyan;float:left;
        }
    </style>
</head>
<body>
<button><div class="div1">div1</div><div class="div2">div2</div></button>
<div class="div3"><div class="div1">div1</div><div class="div2">div2</div></div>
</body>
</html>

Upvotes: 0

Views: 132

Answers (2)

Mr Lister
Mr Lister

Reputation: 46549

If you don't want to give the button a width, this is as close as I could come.

<!DOCTYPE html>
<html>
 <head>
  <style>
   button {
    /* no styles */
   }
   .div1 {
    display:inline;
    border:1px solid red;
   }
   .div2 {
    display:inline;
    border:1px solid red;
   }
   .div3 {
    display:inline;
    border:1px solid cyan;
   }
  </style>
 </head>
 <body>
  <button><div class="div1">div1</div><div class="div2">div2</div></button>
  <div class="div3"><div class="div1">div1</div><div class="div2">div2</div></div>
 </body>
</html>

Now this is far from ideal, I can see that, but maybe it'll give you something to start with.

Upvotes: 0

Falguni Panchal
Falguni Panchal

Reputation: 8981

try this in IE7 width is compulsory

          button {

        float:left;
        clear:none;
        width:80px;
    }
        .div1 {
            border:1px solid red;float:left;
        }
        .div2 {
            border:1px solid red;float:left;
        }
        .div3 {
            border:1px solid cyan;float:left;
        }

Upvotes: 2

Related Questions