How To Make Three Divs Line Up Horizontally

trying to make three divs line up. heres what I'm working with

About

Contact&l

Solution 1:

You can use float:left or display:inline-block to achieve this. Try this snippet

.sub-cat {
  float: left;
  background: #ccc;
  padding: 5px10px;
  margin-right: 10px;
}

<divid="final_space"><divclass="sub-cat"id="sub_cat_1">About</div><divclass="sub-cat"id="sub_cat_2">Contact</div><divclass="sub-cat"id="sub_cat_3">F.A.Q.</div></div>

Solution 2:

There are many methods, but the most manageable way to get just a horizontal layout is to display the inner div elements as table-cell:

div#final_space>div {
    display: table-cell;
}

Note that the selector above is more usable than trying to class the inner div elements.

To spread them out evenly takes a little more work. You need to change the display of the container div.

div#final_space {
    display: table;
    width: 100%;
    table-layout: fixed;
}

This works in all current browsers, even IE8.

div#final_space>div {
	display: table-cell;
	/* For visibility only: */text-align: center;
	border: thin solid #999;
}
div#final_space {
	display: table;
	width: 100%;
	table-layout: fixed;
}

<divid="final_space"><divid="sub_cat_1">About</div><divid="sub_cat_2">Contact</div><divid="sub_cat_3">F.A.Q.</div></div>

Solution 3:

You can have a look at the like its exactly how you want it.

http://jsfiddle.net/d4kVk/179/

div { height: 45px; }
div.side {
    background-color: skyblue;
    width: 72px;
    float: left;
}
div#range {
    background-color: tomato;
    width: 216px;
    float: left;
}
span {
    width:100%;
    text-align: center;
    display: block;
    margin: 3px auto;
    /* background-color: gold; */
}

Solution 4:

float centre doesn't exist. You should you classes here rather than divs. You can do it a number of ways. The first way:

.sub_cat {
  float: left;
  width: 33.3333%;
}

.final_space:before,
.final_space:after {
  content: "";
  display: table;
}
.final_space:after {
  clear: both;
}
.final_space {
  *zoom: 1;
}

Alternatively you could do it like this with inline block.

.sub_cat {
     display: inline-block;
     margin-left: -4px;
   }

Flexbox is another way but not cross browser yet.

Solution 5:

best is to use bootstrap grid system

 <div id="final_space" class="row">

<div class="col-sm-4"id="sub_cat_1">About</div>
<div class="col-sm-4"id="sub_cat_2">Contact</div>
<div class="col-sm-4"id="sub_cat_3">F.A.Q.</div>
</div>

Share