How do I float these fieldsets?

Question

I am working with an existing system, and am trying to modify the CSS in order to arrange the three columns correctly.

What css changes do I need to make in order to display the third column correctly?

View in this JSFiddle

CSS

.test .repeater {
    border: none;
    margin: 0;
}
.test .indent1 .wizard-parentcontrol .controlkl {
    width: 33%;
    float: left;
    display: block;
}
.test .wizard-controls .indent1 .control:first-child {
    margin-top: 17px;
}
.test .indent1 .wizard-parentcontrol .popupbrowser {
    width: 30%;
    float: left;
    border: 1px solid red;
    display: block;
}

HTML

<div class="test wizard-parentcontrol">
    <div>
        <div>
            <fieldset></fieldset>
        </div>
        <div>
            <div>
                <fieldset>
                    <div>
                        <div class="repeater indent1">
                            <div class="wizard-parentcontrol">
                                <div>
                                    <div>
                                        <div class="controlkl">Column 1</div>
                                    </div>
                                </div>
                                <div>
                                    <div>
                                        <fieldset>
                                            <div id="p0t2c4dpopupbrowserControl" class="popupbrowser">Column 2</div>
                                        </fieldset>
                                    </div>
                                    <div>
                                        <div class="">
                                            <p class="ctrlinvalidmessage"></p>
                                            <fieldset>
                                                <div id="p0t2c5dpopupbrowserControl" class="popupbrowser">Column 3</div>
                                            </fieldset>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </fieldset>
            </div>
        </div>
    </div>
</div>

My fiddle won't work. Do I need to have an account in order to save my changes to existing fiddles? — user12804, Jan 24 '14 at 04:06
Ooh, that's my fiddle! http://stackoverflow.com/questions/6481944/why-do-fieldsets-clear-floats/6482054#6482054 You should be able to use the Fork button to save your own fork of it with your changes. — BoltClock, Jan 24 '14 at 04:08
just curious, is it necessary for all those empty div's? Can I modify the html? — He Hui, Jan 24 '14 at 04:14
@HeHui - sorry about the empty divs. I left them in there while debugging, they are not empty in the code, but feel free to delete them. — user12804, Jan 24 '14 at 04:16
@Saurabh they actually do have classes/ids inside them, I just stripped them out for debugging purposes. The divs are generated by the CMS and cannot be removed :( — user12804, Jan 24 '14 at 05:01

score 0 · Accepted Answer · answered Jan 24 '14 at 05:16

0

Check If you can do the following changes. I just added class

  .wizard-parentcontrol div
  {
     float:left;
  }

and removed the hardcoded width's of 33% and 30% from your code.

Check the demo

answered Jan 24 '14 at 05:16

Saurabh

1,007
2
10
24

Thank you @Saurabh - for some reason when I implement it in the css for my CMS it doesn't look right in IE :(, but looks ok in FF – user12804 Jan 24 '14 at 06:31
check the `clear:both` css property of css.Appying it to the next main element should work.. – Saurabh Jan 24 '14 at 06:35
in IE the Second column is not on the same line as the first column, and is right aligned. The third column is also on a third line, and also right aligned... – user12804 Jan 24 '14 at 06:38

How do I float these fieldsets?

View in this JSFiddle

1 Answers1