Mr x Mr x - 6 months ago 8
HTML Question

Get 2div boxes in left and right corner

I want to have two div boxes one at left and another at right corner.

With the help off following code it comes but both are not in same align.
It comes one after another.
Here is my code

<style>
html { margin:0; padding:0; font-size:62.5%; }
body { max-width:300px; font-size:14px; font-size:1.4em; }
h1 { font-size:1.8em; }
.demo { overflow:auto; border:1px solid silver; min-height:100px;min-width: 200px;float: left }
.demo1 { overflow:auto; border:1px solid silver; min-height:100px;min-width: 200px; float: right}
</style>
<link rel="stylesheet" href="style.min.css" />
</head>

<body><div id="frmt" class="demo"></div>
<div id="frmt1" class="demo1"></div>
</body>


So it comes like
enter image description here

and I want it to look like
enter image description here

Answer

It's because of max-width: 300px; in you body. Removing that would do the trick.

demo and demo1 are having a min-width of 200px each, summing to 400px. But the body have a max-width of only 300px.

<head>
  <style>
    html {
      margin: 0;
      padding: 0;
      font-size: 62.5%;
    }
    body {
      font-size: 14px;
      font-size: 1.4em;
    }
    h1 {
      font-size: 1.8em;
    }
    .demo {
      overflow: auto;
      border: 1px solid silver;
      min-height: 100px;
      min-width: 200px;
      float: left
    }
    .demo1 {
      overflow: auto;
      border: 1px solid silver;
      min-height: 100px;
      min-width: 200px;
      float: right
    }
  </style>
  <link rel="stylesheet" href="style.min.css" />
</head>

<body>
  <div id="frmt" class="demo"></div>
  <div id="frmt1" class="demo1"></div>
</body>

Comments