CODEWITHSUNDEEP
asp.nethtmlsharepointcss-float
Geeth
Geeth

Reputation: 5343

Float left is not working in IE7 but works in IE8 sharepoint .aspx page

There are three blocks of div which will contain text, where block 1 and 2 are optional. in that case i want to align the div using float:left to avoid extra space between the div. here is the code im using. this code is working fine in IE8 but not in IE7. i have gone through the post Float left in a div does not work in IE7 but does in Firefox and IE8. but it is not working.

Code:

  <div style="width:1120px;overflow:auto">
   <div id="_invisibleIfEmpty" name="_invisibleIfEmpty" 
      style="overflow:hidden; vertical-align:text-top; float:left;height:100%;width:33%;display:table-row"> 
                Block 1 </div >
 <div id="_invisibleIfEmpty" name="_invisibleIfEmpty"

    style="overflow:hidden;vertical-align:text-top;padding-left:5px;height:100%;width:33%;float:left;display:table-row;"> 
                Block 2</div >
 <div id="_invisibleIfEmpty" name="_invisibleIfEmpty" style="overflow:hidden;vertical-align:text-top;padding-left:5px;height:100%;width:33%;float:left;display:table-row"> 
                Block 3 </div >

Upvotes: 0

Views: 300

Answers (1)

chipcullen
chipcullen

Reputation: 6960

I don't know ASP from ESPN, but I can tell you 1. the markup is a mess and 2. you're over-thinking the CSS.

First off, the first <div> didn't close, but that may be due to you pasting into SO. Second, the three inner div's have the same ID - which is a no-no. Third, your styles are all inline, which isn't ideal, either, but I'm assuming you're pasting them in here for brevity's sake.

Your markup can be greatly simplified:

  <div id="container">
    <div class="block _invisibleIfEmpty" id="block_1" name="_invisibleIfEmpty" > 
       Block 1 </div>
    <div class="block _invisibleIfEmpty" id="block_2" name="_invisibleIfEmpty"> 
       Block 2</div>
    <div class="block _invisibleIfEmpty" id="block_3" name="_invisibleIfEmpty" > 
       Block 3</div>
  </div>​

And then this CSS should get you where you need to be:

#container {
    width: 1120px; 
    height: 100px;       
}

.block {
    width: 33%;
    float: left; 
    height: 100%;
}​

You can adjust the heights to taste. You can add the overflow values if you want - but you don't need 'overflow:auto' because that is the default in CSS. You only need that if a previous style declares a different 'overflow' value, and you want to undo that.

PS: I tested this and it works in IE7: http://jsfiddle.net/xZ2Az/1/

Upvotes: 1

Related Questions