CSS: Can a div "float:middle" rather than "float:left;" with margin-left?

Question

i would like

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 "float in the center"

solutions ?

There is no float:middle. You have to work with left/right and margins/paddings — TGH, May 20 '13 at 05:49
give it also `float: left` or keep in a div which occupies the space and give it `text-align: center`. — Mr_Green, May 20 '13 at 05:50
`panpiper` auto-margin only works if the whole container is empty. — , May 20 '13 at 05:51
`Mr. Alien`, i want the middle div to expand without touching the divs on the left and right based on div that is over everything. — , May 20 '13 at 05:54
How is the middle div suppose to automatically expand and contract without touching either left or right divs that are floating left and right — , May 20 '13 at 05:54
`float` isn't like `gravity` in say Android, it's just not. You'll need to use `text-align:center` or `margin:0 auto` or some similar method that works in CSS (not "the universe"). — Daniel Imms, May 20 '13 at 06:03
This is actually a very good question, even if it may not be a sensible thing to try to do! Understanding why float works the way it does is important. Not sure why it'd been voted down to -3 — Highly Irregular, Sep 23 '14 at 23:42

Mathijs Flietstra · Answer 1 · 2013-05-20T06:42:35.457

You can do this in some new browsers with 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;
}

The variously prefixed display: flex; property tells the browser that the div should use the flexbox model to layout the contents inside itself.

The variously prefixed forms of flex-direction: row; and justify-content: space-between; tell the browser to lay out the div's inside the div with display: flex; set as a row with the space between them equally split.

As mentioned in the comments, the above is not really cross-browser friendly, as the new flexbox model is not yet properly supported in all browsers. If you need IE8+ support, you could use the code below instead, 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;
}

You should explain how it works, also warn the OP that this is not cross browser friendly method — Mr. Alien, May 20 '13 at 05:56

score 7 · Answer 2 · answered May 21 '13 at 16:51

7

You can use margin auto to center a 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>

answered May 21 '13 at 16:51

the_lotus

12,668
3
36
53

2

Good solution. I put it into a JSFiddle: http://jsfiddle.net/divzero/JD9uP/ It's good that things stay aligned even with uneven div widths. – William Denniss Dec 18 '13 at 07:47

Zera42 · Answer 3 · 2013-05-20T06:30:31.923

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

CSS does not obey the laws of physics. Stop trying to be a perfectionist with your "inside the universe, the center is the dictator, not the left or the right site" talk. But here's how I would 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;
}

Nice job, simple and clean CSS. – bumerang May 20 '13 at 06:48 — bumerang, May 20 '13 at 06:48

score 1 · Answer 4 · answered May 06 '14 at 14:25

I do it this way, this is my made up version - hopefully it helps. If you're doing one off boxes in static html, it'll be cool - making it work dynamically is another thing :)

<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 it's a wrapper with 100% width, css tells the wrapper to centre all divs inside. The display:inline block puts the boxes in line and the float left and right tell the left and right boxes to float to their sides despite being centred. Hope it works for you guys, works on most browsers for me, Cheers.

score 0 · Answer 5 · answered May 20 '13 at 05:55

I assume there are 3 column div 1 (1st), div 2(2nd) and div 3(3rd). then float div 1 to left and fixed an width like 200px or 20%. again float div 2 left then div 2 sit beside the div 1 (200px left from left margin) and finally float div 3 to right. do a little math so all three div can sit together.

score 0 · Answer 6 · answered Mar 24 '14 at 21:11

0

You can use center tags but they are usually frowned upon.

answered Mar 24 '14 at 21:11

noahdotgansallo

763
1
6
15

score 0 · Answer 7 · answered Dec 11 '17 at 16:26

A very late reply, but the guys at sitepoint have provided a cool float middle 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>

CSS: Can a div "float:middle" rather than "float:left;" with margin-left?

7 Answers7

Linked