Nevershow2016 Nevershow2016 - 7 months ago 14
HTML Question

How do i float div to the next one

Hi guys i am trying to put a div next to each other. I have tried to use

float: left
etc , also i am using bootstrap however i have tried the coloum setting but it does not work,

HTML:

<div class="container">
<div class="Mainbody2">
<div class="ref1">
<h2>About</h2>

<p>Text GOES HERE</p>

<h2>Statement!</h2>

<p>STATMENT GOES HERE</p><br />
<br />
<br />

<h2>Number1</h2>

<ul>
<li>link1</li>

<li>link1</li>

<li>link1</li>

<li style="list-style: none"><br /></li>

<li>link1</li>

<li>link1</li>

<li>link1</li>

<li style="list-style: none"><br /></li>
</ul>
</div>

<div class="ref2">
<h2>Description</h2>

<ul>
<li>link2</li>

<li>link2</li>

<li>link2</li>

<li style="list-style: none">
<br />

<h2>Libraries</h2>
</li>

<li>link2</li>

<li>link2</li>

<li>link2</li>
</ul>
</div>
</div>
</div>


Link to Fiddle

Just to make it clear i am trying to get Description next to Number 1 and then Libraries next to description

Thanks again for the help

Lal Lal
Answer

See this fiddle

I've changed your HTML a bit as below

<div class="container">
  <div class="Mainbody2">
    <div class="ref1">
      <div class="left">
        <h2>About</h2>
        <p>Text GOES HERE </p>
        <h2>Statement!</h2>
        <p>
          STATMENT GOES HERE
        </p>
      </div>
      <div class="right">
        <h2>Description</h2>
        <li> link2</li>
        <li> link2</li>
        <li> link2</li>
      </div>
    </div>
    <div class="ref2">
      <div class="left">
        <h2>Number1</h2>
        <li> link1</li>
        <li> link1</li>
        <li> link1</li>
        <br>
        <li> link1</li>
        <li> link1</li>
        <li> link1</li>
      </div>
      <div class="right">
        <h2>Libraries</h2>
        <li> link2</li>
        <li> link2</li>
        <li> link2</li>
      </div>
    </div>
  </div>
</div>

also, added the below CSS

.left,
.right,.ref1,.ref2 {
  float: left;
}
.ref1,.ref2{

  padding:10px;
  width:100%;
}
.left,.right{
  width:50%;
}
Comments