CSS: Can A Div "float:middle" Rather Than "float:left;" With Margin-left?

March 27, 2023 Post a Comment

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 ?

Solution 1:

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;
}

Solution 2:

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>

Solution 3:

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;
}

Solution 4:

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.

Solution 5:

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.

Html5 Pros