How to put 2 divs next to each other, inside a container?

Question

I need to have a container div that will hold inside of it 2 child divs that will be aligned side by side, and together should take 100% of the container width.

The container div must take 85% of the screen view.
The RIGHT div should be 50px width, and 50px height (I will later put an image inside which have the same size: 50x50 pixels).
The LEFT div contain lot of text, and should take all the place that is left in the container, the place that is free.

I want to use only html & css please, and also without the flex command I don't like it. It should work for any width of the browser. Below is my starting code which of course doesn't work... If possible please fix it and show me the fixed code.

Thanks very much!

My code:

    .container{
      width: 85%;
      background-color: yellow;
      border: 1px solid red;
    }
    
    .leftDiv{
      width: auto;
      background-color: green;
      border: 1px solid black;
      float: left;
    }
    
    .rightDiv{
      width: 50px;
      height: 50px;
      background-color: blue;
      border: 1px solid black;
      float: left;
    }

<div class="container">

    <div class="leftDiv">
      Long text... Long text... Long text... Long text... Long text... 
      Long text... Long text... Long text... Long text... Long text... 
      Long text... Long text... Long text... Long text... Long text... 
      Long text... Long text... Long text... Long text... Long text... 
      Long text... Long text... Long text... Long text... Long text... 
      Long text... Long text... Long text... Long text... Long text... 
      Long text... Long text... Long text... Long text... Long text... 
      Long text... Long text... Long text... Long text... Long text... 
      Long text... Long text... Long text... Long text... Long text... 
      Long text... Long text... Long text... Long text... Long text... 
      Long text... Long text... Long text... Long text... Long text... 
      Long text... Long text... Long text... Long text... Long text... 
      Long text... Long text... Long text... Long text... Long text... 
      Long text... Long text... Long text... Long text... Long text... 
      Long text... Long text... Long text... Long text... Long text... 
      Long text... Long text... Long text... Long text... Long text... 
      Long text... Long text... Long text... Long text... Long text... 
      Long text... Long text... Long text... Long text... Long text... 
      Long text... Long text... Long text... Long text... Long text... 
      Long text... Long text... Long text... Long text... Long text... 
      Long text... Long text... Long text... Long text... Long text... 
      Long text... Long text... Long text... Long text... Long text... 
      Long text... Long text... Long text... Long text... Long text... 
      Long text... Long text... Long text... Long text... Long text... 
      Long text... Long text... Long text... Long text... Long text... 
      Long text... Long text... Long text... Long text... Long text... 
      Long text... Long text... Long text... Long text... Long text... 
      Long text... Long text... Long text... Long text... Long text... 
      Long text... Long text... Long text... Long text... Long text... 
      Long text... Long text... Long text... Long text... Long text... 
      Long text... Long text... Long text... Long text... Long text... 
      Long text... Long text... Long text... Long text... Long text... 
      Long text... Long text... Long text... Long text... Long text... 
      Long text... Long text... Long text... Long text... Long text... 
      Long text... Long text... Long text... Long text... Long text... 
      Long text... Long text... Long text... Long text... Long text... 
    </div>

    <div class="rightDiv"></div>
</div>

Your math isnt making a lot of sense. What is more important, the left div taking 85% of the width, or the other div having 50px? On a 320px resolution this will go over 100% — iagowp, Oct 18 '17 at 23:25

Mark Ormston · Answer 1 · 2017-10-18T23:35:13.910

You were pretty close to how I would have done it. Switch the rightDiv and leftDiv and make leftDiv just have a 52px margin on the right and not floating:

.container{
  width: 85%;
  background-color: yellow;
  border: 1px solid red;
}

.leftDiv{
  margin-right: 52px;
  background-color: green;
  border: 1px solid black;
}

.rightDiv{
  width: 50px;
  height: 50px;
  background-color: blue;
  border: 1px solid black;
  float: right;
}

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<div class="container">

    <div class="rightDiv"></div>

    <div class="leftDiv">
    Long text... Long text... Long text... Long text... Long text... 
    Long text... Long text... Long text... Long text... Long text... 
    Long text... Long text... Long text... Long text... Long text... 
    Long text... Long text... Long text... Long text... Long text... 
    Long text... Long text... Long text... Long text... Long text... 
    Long text... Long text... Long text... Long text... Long text... 
    Long text... Long text... Long text... Long text... Long text... 
    Long text... Long text... Long text... Long text... Long text... 
    Long text... Long text... Long text... Long text... Long text... 
    Long text... Long text... Long text... Long text... Long text... 
    Long text... Long text... Long text... Long text... Long text... 
    Long text... Long text... Long text... Long text... Long text... 
    Long text... Long text... Long text... Long text... Long text... 
    Long text... Long text... Long text... Long text... Long text... 
    Long text... Long text... Long text... Long text... Long text... 
    Long text... Long text... Long text... Long text... Long text... 
    Long text... Long text... Long text... Long text... Long text... 
    Long text... Long text... Long text... Long text... Long text... 
    Long text... Long text... Long text... Long text... Long text... 
    Long text... Long text... Long text... Long text... Long text... 
    Long text... Long text... Long text... Long text... Long text... 
    Long text... Long text... Long text... Long text... Long text... 
    Long text... Long text... Long text... Long text... Long text... 
    Long text... Long text... Long text... Long text... Long text... 
    Long text... Long text... Long text... Long text... Long text... 
    Long text... Long text... Long text... Long text... Long text... 
    Long text... Long text... Long text... Long text... Long text... 
    Long text... Long text... Long text... Long text... Long text... 
    Long text... Long text... Long text... Long text... Long text... 
    Long text... Long text... Long text... Long text... Long text... 
    Long text... Long text... Long text... Long text... Long text... 
    Long text... Long text... Long text... Long text... Long text... 
    Long text... Long text... Long text... Long text... Long text... 
    Long text... Long text... Long text... Long text... Long text... 
    Long text... Long text... Long text... Long text... Long text... 
    Long text... Long text... Long text... Long text... Long text... 
    </div>
</div>

</body>
</html>

It's 52px because your floating region is 50px wide with a 1px border all around (adding 2px). Without it being 52px, and only 50px, the left 2px of the right div will overlap the left div. Yes, if you remove the border on the right div, you only need to use 50px. — Mark Ormston, Oct 19 '17 at 16:43

score 0 · Answer 2 · answered Oct 18 '17 at 23:31

use clac() method .rightDiv{ width: calc(100% - 54px);}

<!DOCTYPE html>
<html>
<head>
<style>
.container{
  width: 85%;
  background-color: yellow;
  border: 1px solid red;
}

.leftDiv{
  width: calc(100% - 54px);
  background-color: green;
  border: 1px solid black;
  float: left;
}

.rightDiv{
  width: 50px;
  height: 50px;
  background-color: blue;
  border: 1px solid black;
  float: left;
}

</style>
</head>
<body>

<div class="container">

    <div class="leftDiv">
    Long text... Long text... Long text... Long text... Long text... 
    Long text... Long text... Long text... Long text... Long text... 
    Long text... Long text... Long text... Long text... Long text... 
    Long text... Long text... Long text... Long text... Long text... 
    Long text... Long text... Long text... Long text... Long text... 
    Long text... Long text... Long text... Long text... Long text... 
    Long text... Long text... Long text... Long text... Long text... 
    Long text... Long text... Long text... Long text... Long text... 
    Long text... Long text... Long text... Long text... Long text... 
    Long text... Long text... Long text... Long text... Long text... 
    Long text... Long text... Long text... Long text... Long text... 
    Long text... Long text... Long text... Long text... Long text... 
    Long text... Long text... Long text... Long text... Long text... 
    Long text... Long text... Long text... Long text... Long text... 
    Long text... Long text... Long text... Long text... Long text... 
    Long text... Long text... Long text... Long text... Long text... 
    Long text... Long text... Long text... Long text... Long text... 
    Long text... Long text... Long text... Long text... Long text... 
    Long text... Long text... Long text... Long text... Long text... 
    Long text... Long text... Long text... Long text... Long text... 
    Long text... Long text... Long text... Long text... Long text... 
    Long text... Long text... Long text... Long text... Long text... 
    Long text... Long text... Long text... Long text... Long text... 
    Long text... Long text... Long text... Long text... Long text... 
    Long text... Long text... Long text... Long text... Long text... 
    Long text... Long text... Long text... Long text... Long text... 
    Long text... Long text... Long text... Long text... Long text... 
    Long text... Long text... Long text... Long text... Long text... 
    Long text... Long text... Long text... Long text... Long text... 
    Long text... Long text... Long text... Long text... Long text... 
    Long text... Long text... Long text... Long text... Long text... 
    Long text... Long text... Long text... Long text... Long text... 
    Long text... Long text... Long text... Long text... Long text... 
    Long text... Long text... Long text... Long text... Long text... 
    Long text... Long text... Long text... Long text... Long text... 
    Long text... Long text... Long text... Long text... Long text... 
    </div>

    <div class="rightDiv"></div>
</div>

</body>
</html>

calc complicated? oh boy you need to study CSS then – dippas Oct 18 '17 at 23:38 — dippas, Oct 18 '17 at 23:38
IE8 is deprecated and IE9 it's on its way to it. Anyway... – dippas Oct 18 '17 at 23:45 — dippas, Oct 18 '17 at 23:45
you can only use `calc` or `js` there is no other way :( – ferhado Oct 19 '17 at 00:06 — ferhado, Oct 19 '17 at 00:06

How to put 2 divs next to each other, inside a container?

2 Answers2