'How to center two divs floating next to one another

I have written the following HTML trying to center two div's next to each other.

<div id='wrapper' style='text-align:center;'>
    <div style='float:left;'>
        Lorem ipsum<br />
        dolor sit amet
    </div>
    <div style='float:left;'>
    Lorem ipsum<br />
    dolor sit amet
    </div>
</div>

However, the code I've written results in the two div's floating all the way to the left. What this does do correctly is float the two div's side by side.

What do I need to change to center the two div's side by side?

htmlcsscss-float


Solution 1:[1]

You will have to automatically set the margin and probably a specific width to your wrapper div

<div id="wrapper"></div>

In your CSS:

#wrapper {
    width: 70%;
    margin: 0 auto;
}

Solution 2:[2]

Instead of using float: left, use display: inline-block:

<div id='wrapper' style='text-align: center;'>
    <div style='display: inline-block; vertical-align: top;'>
        Lorem ipsum<br />
        dolor sit amet,<br />
        consectetur adipisicing elit
    </div>
    <div style='display: inline-block; vertical-align: top;'>
        Lorem ipsum<br />
        dolor sit amet
    </div>
</div>

The top of each inner div is kept aligned by using vertical-align: top.

Example: http://jsfiddle.net/hCV8f/1/

Solution 3:[3]

Try this:

<div id='wrapper' style='text-align:center;'>
    <div style='float:left;background-color:red;width:50%'>
        Lorem ipsum<br />dolor sit amet
    </div>
    <div style='float:right;background-color:blue;width:50%'>
         Lorem ipsum<br />dolor sit amet
    </div>
</div>

http://jsfiddle.net/JDAyt/

Solution 4:[4]

Do you know the width of both divs in advance? If so, you can just do something like

<div class="wrapper" style="margin: 0 auto; width: 200px">
  <div class="inner1" style="width: 100px; float:left;"></div>
  <div class="inner2" style="width: 100px; margin-left: 100px"></div>
</div>

Solution 5:[5]

Below worked for me

<div id='wrapper'>
    <div class='inner'>
        content 1
    </div>
    <div class='inner'>
        content 2
    </div>
</div>

CSS:

#wrapper
{
text-align: center;width:auto;margin:0 auto
}
.inner
{
display:inline-block;
}

Solution 6:[6]

For the left div, set the left margin. For the right div, set the right. Like this:

#leftDiv {
    margin-left: auto;
}

#rightDiv {
    margin-right: auto;
}

This puts them back to back in the center of the screen.

Solution 7:[7]

Below code works fine with Zebra GC420d Printer:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta charset="utf-8">
    <style type="text/css"> 
    html, body { padding: 0px; margin: 0px; width: 100%; height: 100%; }
    #div { min-height: 100%; }
    </style>
    </head>
    <body>
    <div style="border: 0px solid red;">
    <table border="0" width="100%" align="center">
    <tr>
    <td style="text-align: center;">
    <?php
    echo $name;
    ?>
    </td>
    </tr>
    <tr><td></td></tr>
    <tr>
    <td style="text-align: center;">
    <?php
    echo 'https://goo.gl/2QvRXf';
    ?>
    </td>
    </tr>

    </table>
    </div>

    </body>
    </html>

Hope it helps !

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Daff
Solution 2 jason_ruz
Solution 3
Solution 4 Jacob
Solution 5
Solution 6 corpico
Solution 7 Aditya P Bhatt

Related Questions