CSS: Can a div be "float: middle" and not "float: left"; with edge left?

Question

I would like to

div 1 to float on the left div 2 to float in the center div 3 to float on the right. 

but there is no such thing as a “swim in the center"

solutions?

Answer 1

You can do this in some new browsers using the flexbox model: jsFiddle

HTML

 <div> <div>left div</div> <div>middle div</div> <div>right div</div> </div> 

CSS

 body { width: 100%; height: 50px; display: -webkit-box; /* iOS 6-, Safari 3.1-6 */ display: -moz-box; /* Firefox 19- */ display: -ms-flexbox; /* IE 10 */ display: -webkit-flex; /* Chrome */ display: flex; /* Opera 12.1, Firefox 20+ */ /* iOS 6-, Safari 3.1-6 */ -webkit-box-orient: horizontal; -webkit-box-pack: justify; /* Firefox 19- */ -moz-flex-direction: row; -moz-justify-content: space-between; /* Chrome */ -webkit-flex-direction: row; -webkit-justify-content: space-between; /* IE10 */ -ms-flex-direction: row; -ms-justify-content: space-between; /* Opera 12.1, Firefox 20+ */ flex-direction: row; justify-content: space-between; } div { width: 25%; background-color: #EFEFEF; } 

Differently the prefix property display: flex; tells the browser that the div should use the flexbox model to place content within itself.

Various prefix forms flex-direction: row; and justify-content: space-between; tell the browser to place the div inside the div with display: flex; as a string with the space between them equally divided.

As mentioned in the comments, the above is not very browser friendly, as the new flexbox model is not yet supported properly in all browsers. If you need IE8 + support, you can use the code below, which should work in all browsers and IE8 +. jsFiddle

HTML

 <div>left div</div> <div class="middle"> <div class="inthemiddle">middle div</div> </div> <div>right div</div> 

CSS

 html { display: table; width: 100%; } body { display: table-row; width: 100%; } div { display: table-cell; background-color: #EFEFEF; min-width: 200px; } div.middle { width: 100%; background-color: #FFF; text-align: center; } div.inthemiddle { text-align: left; display: inline-block; margin: 0px auto; } 

Answer 2

http://jsfiddle.net/dPEwc/1/

CSS does not obey the laws of physics. Stop trying to be a perfectionist with your "inside the universe, in the center is a dictator, not a left or right site." But here is how I will do it with HTML / CSS.

HTML

 <div id="wrapper"> <div id="one"> <div id="oneIn"> DIV ONE </div> </div> <div id="two"> <div id="twoIn"> DIV TWO </div> </div> <div id="three"> <div id="threeIn"> DIV THREE </div> </div> </div> 

CSS

 body{ background: black; } #wrapper{ width: 600px; margin: 0 auto; height: 200px; } #one{ width: 200px; height: 200px; margin: 0; float: left; } #oneIn{ width: 150px; height: 100%; background: white; float: left; } #two{ width: 200px; height: 200px; margin: 0; float: left; } #twoIn{ width: 150px; height: 100%; background: white; margin: 0 auto; } #three{ width: 200px; height: 200px; margin: 0; float: left; } #threeIn{ width: 150px; height: 100%; background: white; float: right; } 

Answer 3

You can use margin auto to center the div.

 <div style="text-align: center;"> <div style="width: 200px; background-color: lightblue; float: left; text-align: left;">1</div> <div style="width: 200px; background-color: lightblue; float: right; text-align: left;">3</div> <div style="width: 200px; background-color: lightblue; margin-left: auto; margin-right: auto; text-align: left;">2</div> </div> 

Answer 4

I do it this way, this is my compiled version - I hope this helps. If you make one of the boxes in static html, it will be cool - making it work dynamically is another :)

 <div class="boxes"> <div class="box leftbox"></div> <div class="box"></div> <div class="box rightbox"></div> </div> .boxes {width:100%; text-align:center;} .boxes .box {width:30%; height:150px; background:#f0f0f0; display:inline-block} .leftbox {float:left;} .rightbox {float:right;} 

So basically this is a wrapper with 100% width, css tells the wrapper to center all the divs inside. Display: the built-in unit places the boxes in a line, and the float left and right shows the left and right rectangles to float on the sides, despite being centered. Hope it works for you guys, works on most browsers for me, Cheers.

Answer 5

I assume there are 3 columns div 1 (1st), div 2 (2nd) and div 3 (3rd). then place div 1 to the left and lock the width to 200px or 20%. float div 2 left again, then div 2 sit next to div 1 (200px to the left of the left margin) and finally float div 3 to the right. do a little math so that all three divs can sit together.

Answer 6

You can use central tags, but they are usually frowned on.

Answer 7

A very late answer, but the guys at the site point provided a cool floating average https://www.sitepoint.com/community/t/css-test-your-css-skills-number-42-float-center-revisited/18797

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Untitled Document</title> <style type="text/css"> body { background:#ccc; } .wrap { width:70%; margin:auto; overflow:hidden; border:5px solid #000; background:#fff; position:relative; } .col1, .col2 { width:48%; float:left; margin:1%; background:#eee; text-align:justify; } .col2 { float:right } p { padding:5px; margin:0 0 1em; } .col1:before, .col2:before { float:right; width:1px; height:100px; content:" "; } .col2:before { float:left } .col1 div { float:right; clear:right; height:154px; width:95px; } .col2 p:first-child:before { float:left; clear:left; height:154px; width:90px; content:" "; } .col1 div img { width:165px; position:absolute; border:10px solid #fff; left:50%; margin:0 0 0 -93px; top:115px; } </style> </head> <body> <div class="wrap"> <div class="col1"> <div><img src="http://www.pmob.co.uk/SitePoint-quiz/tv-img2.jpg" width="165" height="124" alt="Sea"></div> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ultrices felis et neque egestas suscipit. Donec tortor odio, pulvinar non tristique ac, imperdiet sed libero. Nulla facilisi. Integer nisi nulla, consectetur auctor laoreet sed, gravida non nulla. Cras volutpat aliquet volutpat. Sed ligula nibh, feugiat at sollicitudin sit amet, dignissim eget velit. Aenean consectetur aliquam urna, non mattis risus dictum ac. In hac habitasse platea dictumst. Sed ac magna metus. Nulla facilisi. Integer nisi nulla, consectetur auctor laoreet sed, gravida non nulla. Cras volutpat aliquet volutpat. Sed ligula nibh, feugiat at sollicitudin sit amet, dignissim eget velit. Aenean consectetur aliquam urna, non mattis risus dictum ac. In hac habitasse platea dictumst. Sed ac magna metus</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ultrices felis et neque egestas suscipit. Donec tortor odio, pulvinar non tristique ac, imperdiet sed libero. Nulla facilisi. Integer nisi nulla, consectetur auctor laoreet sed, gravida non nulla. Cras volutpat aliquet volutpat. Sed ligula nibh, feugiat at sollicitudin sit amet, dignissim eget velit. Aenean consectetur aliquam urna, non mattis risus dictum ac. In hac habitasse platea dictumst. Sed ac magna metus. </p> </div> <div class="col2"> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus viverra erat quis massa hendrerit vestibulum. Donec laoreet convallis egestas. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam erat volutpat. Praesent posuere scelerisque euismod. Etiam ante justo, euismod quis feugiat ut, ullamcorper sit amet ligula. Donec congue odio eget nunc tincidunt nec vehicula mauris tincidunt. Integer ac pellentesque arcu. Vivamus ipsum sapien, auctor eu ornare ac, feugiat lobortis lectus. Nulla facilisi. Integer nisi nulla, consectetur auctor laoreet sed, gravida non nulla. Cras volutpat aliquet volutpat. Sed ligula nibh, feugiat at sollicitudin sit amet, dignissim eget velit. Aenean consectetur aliquam urna, non mattis risus dictum ac. In hac habitasse platea dictumst. Sed ac magna metus</p> <p>Pellentesque habitantxx morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus viverra erat quis massa hendrerit vestibulum. Donec laoreet convallis egestas. Pellentesque habitantxxx morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam erat volutpat. Praesent posuere scelerisque euismod. Etiam ante justo, euismod quis feugiat ut, ullamcorper sit amet ligula. Donec congue odio eget nunc tincidunt nec vehicula mauris tincidunt. Integer ac pellentesque arcu. Vivamus ipsum sapien, auctor eu ornare ac, feugiat lobortis lectus. </p> </div> </div> </body> </html>