How to Make Floating Div List Appear in Columns, Not Rows

How to make floating DIV list appear in columns, not rows

Depending on which browsers you need to support, you can use the new CSS3 column-count property.

With a simple list mark up

<ul>
    <li>A</li>
    <li>B</li>
    <li>C</li>
    <li>D</li>
</ul>

Use this CSS:

ul {
    -moz-column-count: 2;
    -moz-column-gap: 20px;
    -webkit-column-count: 2;
    -webkit-column-gap: 20px;
    column-count: 2;
    column-gap: 20px;
}

Here is a fiddle - although it's not supported in any version of IE yet. To support older browsers there are jQuery solutions, such as Columnizer jQuery Plugin, that you can use as well as, or instead of the CSS3 solution,

Floated Divs instead of a table to achieve layout

Check out this example I've made for you:
http://jsfiddle.net/ADQ8g/

html:

<div class="table-wrapper">
    <div class="row row1">
        <div class="column">
            content goes here
        </div>
        <div class="column">
            content goes here
        </div>
        <div class="column">
            content goes here
        </div>
    </div>
    <div class="row row2">
        <div class="column">
            content goes here
        </div>
        <div class="column">
            content goes here
        </div>
    </div>
</div>

CSS:

.row:after {
    display: block;
    clear: both;
    content: "";
}

.row1 {
    background-color: red;
}
.row2 {
    background-color: green;
}
.row1 .column {
    width: 33.3333%;
}

.row2 .column {
    width: 50%;
}

.column {
    float: left;
    text-align: center;
}

Explanation:
Each floating element needs to have a width set (since you're floating block elements which by default takes up 100% of it's container's width) in a way that allows several elements next to each other (50% for two elements, 33% for 3 elements, 25% for 4 elements and so on... you could also give specific sizes with pixels).

After you have done floating a "row" or elements, you need to clear the float with clear:both. I've used the :after pseudo element to save myself from creating an extra element with just the clear rule.

If you have more questions, feel free to ask :)

DIVs float in a non-linear way

One solution is to use display:inline-block for the figures rather than float:left.

.figure {  display: inline-block;  vertical-align: top;  margin: 2px 1em;  border:1px solid grey;}
.figcaption {  margin:1em;}

<div class="section">  <div class="figure">    <img src="http://placehold.it/250x250" alt="#">    <div class="figcaption">      Line 1<br/>Line 2    </div>  </div>  <div class="figure">    <img src="http://placehold.it/250x250" alt="#">    <div class="figcaption">      Line 1    </div>  </div>  <div class="figure">    <img src="http://placehold.it/250x250" alt="#">    <div class="figcaption">      Line 1<br/>Line 2    </div>  </div></div>

Why don't columns float when there are no rows in Bootstrap?

Because row has the following flex properties. In bootstrap 4 the grid works by using flex container. Since there will be no flex-container without the row div, the children inside it will not float as desired. (Although I must mention you that there is no actual float property used in creation of bootstrap4's grid )

.row {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
}

Read this link on how bootstrap grid works.

How to make div boxes with floats have the same height with dynamic content

If you need the formatting of a table, but you have to support older browsers that don't have support for display:table, then use a table. It's pretty much that simple.

Sometimes a table is the appropriate option, and sometimes it's the only option that will work without adding some moderately-risky JS or jQuery to simulate the formatting of a table.

For instance, a table (or display:table, which amounts to the same thing) is the only natural way to have true vertical centering of dynamic content. It's also the only natural way to enforce equal-height columns for dynamic content. And in general, a table is appropriate anytime you need to display a data grid of some sort.

Floating column within fixed row in HTML/CSS

Used floats to put it right / left and margin:auto to center the div using:

.left{
  float: left;
  width: 33.33%;
}
.right{
  float: right;
  width: 33.33%;
}
.center{
  margin: auto;
  width: 33.33%;
}
.right-buffer {
  clear:both;  
}

(Added some border / padding for illustration)

/* Styles go here */
.employee-container {  margin-bottom: 6px;  margin-top: 6px;  border: 1px solid lightsteelblue;}.employee-container > div.content {  padding: 15px;  background-color: lightsteelblue;}.left{  float: left;  width: 33.33%;}.right{  float: right;  width: 33.33%;}.center{  margin: auto;  width: 33.33%;}.right-buffer {  clear:both;  }

<html><head>  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" />  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script></head>
<body>  <h1>Hello Plunker!</h1>  <div class="container">    <div class="row">      <div class="col-md-4">        <div class="employee-container">          <div class="left-buffer"></div>          <div class="content">            <p>Show me full width</p>          </div>          <div class="right-buffer"></div>        </div>        <div class="employee-container">          <div class="left-buffer"></div>          <div class="content left">            <p>Show me floating left</p>          </div>          <div class="right-buffer"></div>        </div>        <div class="employee-container">          <div class="left-buffer"></div>          <div class="content right">            <p>Show me floating right</p>          </div>          <div class="right-buffer"></div>        </div>        <div class="employee-container">          <div class="left-buffer"></div>          <div class="content center">            <p>Show me in the middle</p>          </div>          <div class="right-buffer"></div>        </div>      </div>    </div>  </div>
</body>
</html>

div on 3 columns using float

Put them in 3 columns/DIVs 33.33% wide which you float:

https://jsfiddle.net/8Lbc5pq7/4/

HTML:

<div class="column">
<div class="left">left-top</div>
<div class="left">left-bottom</div>
</div>
<div class="column">
<div class="center">center-top</div>
<div class="center">center-bottom</div>
</div>
<div class="column">
<div class="right">right-top</div>
<div class="right" style="clear:right">right-bottom</div>
</div>

CSS:

div {
  border: 1px solid red;
  width: 95%;
}
.column {
  float: left;
  border: none;
  width: 33.33%;
}

.left {
  float: left;
  height: 200px;
}

.right {
  float: right;
  height: 100px;
}

.center {
  margin: 0 auto;
  height: 50px;
}

---

Related Topics