Divide div content into 2 columns without modifying html

Question

I am using Joomla and I generate the following html code through an .xml configuration file. I have shortened the html for the example but I have a large number of div (.control-group) and I would like to divide them into 2 columns.

The problem I have is that I can not touch the html, the only class I can change manually is myclass. I can change this name if it's necessary.

How can I divide the div with id="my-form" in 2 columns? (for example with 2 class="control-group" in each column).

Here is the html that my .xml file has generated:

<div id="my-form" class="tab-pane active">
    <div class="control-group">
        <div class="control-label">
            <span class="spacer"><span class="before"></span><span><label id="jform_spacer1-lbl" class=""><b>Tittle 1</b></label></span><span class="after"></span></span>
        </div>
        <div class="controls">
        </div>
    </div>
    <div class="control-group">
        <div class="control-label">
            <label id="jform_your-name-lbl" for="your-name" class="hasTooltip" title="" data-original-title="<strong>Your name</strong>">Your name</label>                                  
        </div>
        <div class="controls">
            <input type="text" name="jform[your-name]" id="your-name" value="" class="myclass">                             
        </div>
    </div>
    <div class="control-group">
        <div class="control-label">
            <label id="jform_your-lastname-lbl" for="your-lastname" class="hasTooltip" title="" data-original-title="<strong>Your lastname</strong>">Your lastname</label>                                  
        </div>
        <div class="controls">
            <input type="text" name="jform[your-lastname]" id="your-lastname" value="" class="myclass">                             
        </div>
    </div>
    <div class="control-group">
        <div class="control-label">
            <label id="jform_your-age-lbl" for="your-age" class="hasTooltip" title="" data-original-title="<strong>Your age</strong>">Your age</label>                                  
        </div>
        <div class="controls">
            <input type="text" name="jform[your-age]" id="your-age" value="" class="myclass">                               
        </div>
    </div>
    <div class="control-group">
        <div class="control-label">
            <label id="jform_your-city-lbl" for="your-city" class="hasTooltip" title="" data-original-title="<strong>Your city</strong>">Your city</label>                                  
        </div>
        <div class="controls">
            <input type="text" name="jform[your-city]" id="your-city" value="" class="myclass">                             
        </div>
    </div>
</div>

jackJoe · Accepted Answer · 2019-02-04 16:28:20Z

Place half the width (50%) to each control-group div and either make them display as inline-block or apply a float. This will make each div into a column.

One note: the title will also be a column (see the code snippet), that could be fixed with a pseudo-class :first-child.

Example:

#my-form {
	width: 100%;
}
#my-form .control-group {
	display: inline-block;
	vertical-align: top;
	width: 49%; /* because of the box-sizing, but you can fix this */
}

<div id="my-form" class="tab-pane active">
    <div class="control-group">
        <div class="control-label">
            <span class="spacer"><span class="before"></span><span><label id="jform_spacer1-lbl" class=""><b>Tittle 1</b></label></span><span class="after"></span></span>
        </div>
        <div class="controls">
        </div>
    </div>
    <div class="control-group">
        <div class="control-label">
            <label id="jform_your-name-lbl" for="your-name" class="hasTooltip" title="" data-original-title="<strong>Your name</strong>">Your name</label>                                  
        </div>
        <div class="controls">
            <input type="text" name="jform[your-name]" id="your-name" value="" class="myclass">                             
        </div>
    </div>
    <div class="control-group">
        <div class="control-label">
            <label id="jform_your-lastname-lbl" for="your-lastname" class="hasTooltip" title="" data-original-title="<strong>Your lastname</strong>">Your lastname</label>                                  
        </div>
        <div class="controls">
            <input type="text" name="jform[your-lastname]" id="your-lastname" value="" class="myclass">                             
        </div>
    </div>
    <div class="control-group">
        <div class="control-label">
            <label id="jform_your-age-lbl" for="your-age" class="hasTooltip" title="" data-original-title="<strong>Your age</strong>">Your age</label>                                  
        </div>
        <div class="controls">
            <input type="text" name="jform[your-age]" id="your-age" value="" class="myclass">                               
        </div>
    </div>
    <div class="control-group">
        <div class="control-label">
            <label id="jform_your-city-lbl" for="your-city" class="hasTooltip" title="" data-original-title="<strong>Your city</strong>">Your city</label>                                  
        </div>
        <div class="controls">
            <input type="text" name="jform[your-city]" id="your-city" value="" class="myclass">                             
        </div>
    </div>
</div>

Collectives™ on Stack Overflow

Divide div content into 2 columns without modifying html

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related