How to fix IE7 float-clear combination

Question

I have a field_wrapper class div which contains the 3 sub divs field_label, field_input and field_error

I need to put the field_label, field_input side by side and field_error below the first two.

Please see below css code to know how i achieved this, My problem is Its is not working in IE7. clear both applied to the field_error is not working.

Even after googling for a long time i can't find a proper method to fix this without adding the HTML mark-up. Please advice css tip or any other method to avoid extra markup code

.field_wrapper
{
 clear:both;
}

.field_label
{
 float:left;
 width:40%;
}
.field_input
{
 float:left;
 width:40%;
}
.field_error
{
 clear: both;
 color:#FF0000;
 float: right;
 text-align:left;
 width: 60%;
}

<form method="post" action="http://localhost/locations/add">
 <div class="field_wrapper">
  <div class="field_label">
   <label for="location_add_name">Name</label>
  </div>
  <div class="field_input">
   <input type="text" id="location_add_name" value="" name="name">
  </div>
  <div class="field_error">
   <p>The Name field is required.</p>
  </div>
 </div>
 <div class="field_wrapper">
  <div class="field_label">
   Address
  </div>
  <div class="field_input">
   <textarea id="location_add_address" rows="12" cols="90" name="address"></textarea>
  </div>
  <div class="field_error">
  </div>
 </div>
 <div class="form_submit">
  <input type="submit" value="Add" name="submit"> 
 </div>
</form>

Allan Kimmer Jensen · Accepted Answer · 2010-02-17T08:14:21.710

If you do not want to remove the float left. You can use this wrapper code

.field_wrapper { display: inline-block; }
.field_wrapper:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
* html .field_wrapper { height: 1%; }
.field_wrapper{ display: block; }

It works for me every time (IE6 as well)

Update:

I looked at this again, and changed the markup a bit, also made it valid xhtml. Just put the class on the P tag, you dont need an extra div.

    .field_wrapper
    {
     clear:both;
    }

    .field_label
    {
     float:left;
     width:40%;
    }
    .field_input
    {
     float:left;
     width:40%;
    }
    .field_error
    {
     clear: both;
     color:#f00;
     width: 60%;
    }


<form method="post" action="http://localhost/locations/add">
    <div class="field_wrapper">
        <div class="field_label">
            <label for="location_add_name">Name</label>
        </div>
        <div class="field_input">
            <input type="text" id="location_add_name" value="" name="name" />
            <p class="field_error">The Name field is required.</p>
        </div>
    </div>

    <div class="field_wrapper">
        <div class="field_label">Address</div>
        <div class="field_input">
            <textarea id="location_add_address" rows="12" cols="90" name="address"></textarea>
        </div>
    </div>
    <div class="form_submit">
        <input type="submit" value="Add" name="submit" /> 
    </div>
</form>

I used your code, see here http://tinypic.com/m/96xlwn/4 This is what i'm getting in IE7 http://tinypic.com/m/96xlkk/4 This is what i'm getting in Firefox http://tinypic.com/m/96xlkl/4 Some how it is not working — Mithun Sreedharan, Feb 16 '10 at 17:22

score 3 · Answer 2 · answered Feb 16 '10 at 14:28

3

Remove float:right from 'field_error'

answered Feb 16 '10 at 14:28

Zhivago

169
1
2
10

score 2 · Answer 3 · answered Feb 17 '10 at 08:31

2

let me tell you one thing first. if you having floating content in a container the container never contain it untill and unless you set the container overflow property to hidden or also make it float you. like

.field_wrapper
{
 clear:both;
 overflow:hidden;
}

Now it contain all floating element. Now for your error div as you are floating you elements to left, so make clear:left only and it will work.

Thanks

answered Feb 17 '10 at 08:31

Shakeeb Ahmed

1,778
1
21
37

Can you show me the link of the page I will do it easily. But this is the solution If you implement it properly. If you still dont get it. Let me know I will create and upload a page somewhere.... – Shakeeb Ahmed Feb 18 '10 at 14:47

How to fix IE7 float-clear combination

3 Answers3

Linked