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>
Was it helpful?

Solution

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

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top