Horizontal alignment of 3 sections on one line

Question

I am trying to get 3 divs to appear on the same line in the formation: left - centered - right

For example, one div aligned to the left, next to the center and last aligned to the right.

Does anyone know how to do this? I have 2 divs left and right, but if I represent a centered div in the middle, it moves the rightmost div to a new line.

Answer 1

.left-col { float: left; width:25%; } .center-col { float: left; width: 50%; } .right-col { float: left; width: 25%; } <div class="left-col">purple</div> <div class="center-col">monkey</div> <div class="right-col">dishwasher</div> 

Answer 2

One easy way to do this is to use any framework. For example: 960gs → http://960.gs/ .

With this structure, you can set columns on your page. Example here: http://960.gs/demo.html

Answer 3

you can use: display: flex;

A tool to help you create code and understand how it works: http://the-echoplex.net/flexyboxes/

For example, in your case it could be:

 .flex-container { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-direction: normal; -moz-box-direction: normal; -webkit-box-orient: horizontal; -moz-box-orient: horizontal; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-flex-wrap: nowrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-box-pack: justify; -moz-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; -webkit-align-content: stretch; -ms-flex-line-pack: stretch; align-content: stretch; -webkit-box-align: start; -moz-box-align: start; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; } .flex-item:nth-child(1) { -webkit-box-ordinal-group: 1; -moz-box-ordinal-group: 1; -webkit-order: 0; -ms-flex-order: 0; order: 0; -webkit-box-flex: 0; -moz-box-flex: 0; -webkit-flex: 0 1 auto; -ms-flex: 0 1 auto; flex: 0 1 auto; -webkit-align-self: auto; -ms-flex-item-align: auto; align-self: auto; } .flex-item:nth-child(2) { -webkit-box-ordinal-group: 1; -moz-box-ordinal-group: 1; -webkit-order: 0; -ms-flex-order: 0; order: 0; -webkit-box-flex: 0; -moz-box-flex: 0; -webkit-flex: 0 1 auto; -ms-flex: 0 1 auto; flex: 0 1 auto; -webkit-align-self: auto; -ms-flex-item-align: auto; align-self: auto; } .flex-item:nth-child(3) { -webkit-box-ordinal-group: 1; -moz-box-ordinal-group: 1; -webkit-order: 0; -ms-flex-order: 0; order: 0; -webkit-box-flex: 0; -moz-box-flex: 0; -webkit-flex: 0 1 auto; -ms-flex: 0 1 auto; flex: 0 1 auto; -webkit-align-self: auto; -ms-flex-item-align: auto; align-self: auto; } /* Legacy Firefox implementation treats all flex containers as inline-block elements. */ @-moz-document url-prefix() { .flex-container { width: 100%; -moz-box-sizing: border-box; } } 

another way to fake horizontal-align-content:justify (this rule is made up). http://codepen.io/gcyrillus/pen/Babcs

with less CSS to adapt to older IES

 .justify { text-align:justify; line-height:0; } .justify:after, .justify span.ie { content:''; display:inline-block; width:100%; vertical-align:top; } .justify > div { text-align:left; line-height:1.2em; display:inline-block; *display:inline; zoom:1; width:50%; border:solid; } .justify > div:nth-child(odd) { width:20%; } 

Float and display: the table has already been discussed :)

Answer 4

So you want to create a table with a div? :)

ok should be something like:

 <div style="float:left; width:20%;"></div> <div style="float:left; width:20%;"></div> <div style="float:left; width:20%;"></div> 

this should be in the css rule, although you probably want to change the width of each div

Answer 5

You can do something like this:

 body { /* or parent element of below child elements */ position: relative; } .left-col { float: left; width:25%; height:100px; background-color:blue; position:absolute; top:0; left: 0; } .center-col { width: 10%; height:100px; margin: 0 auto; background-color: cornflowerblue; text-align:center; } .right-col { width: 25%; height:100px; background-color:green; text-align: right; position:absolute; top:0; right: 0; } 

Working script

Care should be taken so that the sum of the width of the three elements does not exceed 100%. if you want to use borders for these elements, then create child elements for each element and give them position: absolute . Something like that:

 .childDiv{ position: absolute; top: 2px; /* acts as border-top for parent element*/ bottom: 2px; /* border-bottom */ left: 2px; /* border-left */ right: 2px; /* border-right */ background-color: black; /* acts as border-color for parent element */ }