Split Div into 2 Columns Using CSS

Split Div Into 2 Columns Using CSS

When you float those two divs, the content div collapses to zero height. Just add

<br style="clear:both;"/>

after the #right div but inside the content div. That will force the content div to surround the two internal, floating divs.

Splitting divs into 2 columns

Nothing wrong with flexbox for this layout.

There's no need to use a pseudo-element.

.article-container {  display: flex;  flex-wrap: wrap;}
.article {  flex: 0 0 50%;  padding: 10px;}
* {  margin: 0;  box-sizing: border-box;}

<div class="article-container">  <div class="article">    <h3>title1</h3>    <p>article1</p>  </div>  <div class="article">    <h3>title2</h3>    <p>article2</p>  </div>  <div class="article">    <h3>title3</h3>    <p>article3</p>  </div>  <div class="article">    <h3>title4</h3>    <p>article4</p>  </div></div>

split div into 2 columns

Sol 1:
Try to specify max-width for #contact_us div like this Demo:

#connect_us {
    text-align: center;
    font-family:"open_sans_hebrewregular", "alefregular", arial, "Times New Roman";
    color:gray;
    overflow:auto;
    width: 100%;
    max-width:900px;
    margin:0 auto;
}

Sol 2: you can float both right and left divs to left side as you are using full screen.. So you can use this to avoid space between 2 div's:

#left, #right  {
    float:left;
    background-color:#ddd;
}

Divide div content into 2 columns without modifying html

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>

Is there a way to split only some div tags into two columns?

Why don't you use flex?

.views-form {  display: flex;  flex-wrap: wrap;}.views-form > div {  flex-basis: calc(100% - 20px);  box-sizing: border-box;  background-color: silver;  margin: 10px;}
.views-form > .item-list {  flex-basis: caLc(50% - 20px);  box-sizing: border-box;  background-color: gold;}

<form class="views-form">   <div>...</div>   <div class="item-list">a</div>   <div class="item-list">b</div>   <div class="item-list">c</div>   <div class="item-list">d</div>   <div class="item-list">e</div>   <div>...</div></form>

How to divide div into two columns(left side and right side)

Considering you are not using any css frame work, then using floats you can achieve that result, please have a look at the below workimg snippet, hope it helps :)

.text-center {  text-align: center;}
.graph_bar_text{  font-family: AvenirNext;  font-size: 13px;  font-weight: 500;  font-style: normal;  font-stretch: normal;  line-height: normal;  letter-spacing: 0.1px;  color: #9b9b9b;  float: left;  clear: both;  width: 35%;  line-height: 28px;  margin-bottom: 20px;  text-align: right;}
.graph_bar_button{  height: 28px;  max-width: 200px;  margin-left: 22px;  float: left;  width: 200px;  border: none;  background: none;}
.graph_bar_percentage {  font-family: AvenirNext;  font-size: 13px;  font-weight: 500;  font-style: normal;  font-stretch: normal;  line-height: normal;  letter-spacing: 0.1px;  color: #ffffff;  box-shadow: 0 9px 54px 0 rgba(66, 133, 244, 0.37);  border-radius: 12.5px;  background-color: #4285f4;  display: block;}

<div class="text-center">  <p class="Project_Analytics_Heading">Time per Department</p>  <div class="graph_bar_text">    iOS  </div>  <div class="text-left">    <button class="graph_bar_button">      <span class="graph_bar_percentage" style="width: 90%">        90%      </span>    </button>  </div>
  <div class="graph_bar_text">    Android  </div>  <div class="text-left">    <button class="graph_bar_button">      <span class="graph_bar_percentage" style="width: 20%">        20%      </span>    </button>  </div>
  <div class="graph_bar_text">    Angular  </div>  <div class="text-left">    <button class="graph_bar_button">      <span class="graph_bar_percentage" style="width: 50%">        50%      </span>    </button>  </div></div>

Split div into multiple columns without breaking child elements

Use display: flex; styling for #sitemap.

Example snippet:

#sitemap {  display: flex;}
h6 {  margin: 10px 0;}
#sitemap .section {  margin: 0 10px;}
#sitemap a[href] {    text-decoration: none;    align-content: baseline;    border-bottom: 1px solid transparent;    transition: border-bottom-color 250ms 0ms cubic-bezier(0.4, 0, 0.2, 1);    display: inline-block;}
#sitemap a[href]:hover {    border-bottom-color: #000;}
#sitemap a[href] * {    line-height: 1.1rem;    vertical-align: middle;}
#sitemap ul {    list-style: none;    padding: 0;}

<div id="sitemap">  <div class="section">    <h6 class="mdc-typography--headline6">General</h6>    <ul>      <li>        <a href="/login.php" class="mdc-typography--body1">        Log in        </a>      </li>      <li>        <a href="/getstarted.php" class="mdc-typography--body1">        Register        </a>      </li>      <li>        <a href="/getstarted.php" class="mdc-typography--body1"> Contact        </a>      </li>      <li>        <a href="/getstarted.php" class="mdc-typography--body1"> Blog        </a>      </li>    </ul>  </div>  <div class="section">    <h6 class="mdc-typography--headline6">Subjects</h6>    <ul>      <li>        <a href="/login.php" class="mdc-typography--body1">        Log in        </a>      </li>      <li>        <a href="/getstarted.php" class="mdc-typography--body1">        Register        </a>      </li>      <li>        <a href="/getstarted.php" class="mdc-typography--body1">        Contact        </a>      </li>      <li>        <a href="/getstarted.php" class="mdc-typography--body1">        Blog        </a>      </li>    </ul>  </div></div>

split div into 2 columns doesn't work

Instead of float: right; give left: 50%; to the second column

How to split a div into two columns as we split a table?

Create two divs inside your main div

<div id="main">
<div id="left"></div>
<div id="right"></div>
</div>

With CSS, fix each one to the correct side

#left { float:left }
#right { float:right }