Make 2 fixed-width floating divs center-screen

StackOverflow https://stackoverflow.com/questions/23157011

Question

I have two fixed-width divs, first one 'main box' and the other 'other box'

I want them center-screen and, when browser-width permits, next to one another.

I achieve the latter by making them float:left but then since they're "out of the flow" I can't make them center screen (by margin: auto on outer div)?

Is it possible some other way?

Was it helpful?

Solution

Please see demo:

http://jsbin.com/jitus/1

When you set .a and .b to inline-block elements, you can set their parent to text-align center. Then this is your requirement.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
    .tc{text-align:center;}
    .a, .b{display:inline-block; width:300px; *display:inline; *zoom:1;}
    .a{background:blue;}
    .b{background:red;}
  </style>
</head>
<body>

  <div class="tc">
    <div class="a">aaa</div>
    <div class="b">bbb</div>
  </div>

</body>
</html>

OTHER TIPS

If I understood the question right HERE you can find a fiddle 

#cont{
    margin: 0 auto;
    max-width:600px;
}
#a{

    width:300px;
    height: 300px;
    background:red;
    float:left;
}
#b{
    width:300px;
    height: 300px;
    background:lime;
    float:left;
}

HTML:

<div id="cont">
  <div id="a"></div>
  <div id="b"></div>
</div>
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top