Avoid overlapping divs horizontally

Question

I want to modify CSS or do a javascript for success two conditions:

Example: (------------------main div-----------------------------)(------right div -----)

Conditions:
1) If there are a div in the right of my main div, display my main div like the example.
2) If the right div dont exist, my main div must get all width.

I can set width with a determinated size but this dont meet all conditions.

Somebody can help me?.

Where's your code? What have you tried? Where have you gone wrong? — Shaggy, Apr 22 '15 at 15:57
This is a duplicate of _countless_ questions, try searching the site using different keywords. — Etheryte, Apr 22 '15 at 15:58

score 0 · Answer 1 · edited May 23 '17 at 12:06

This is already answered here : 2 column div layout: right column with fixed width, left fluid

Use width:auto and overflow:hidden css styles for your main div so that it takes only the required width.

Example HTML :

<div class="right">
    right div fixed width
</div>
<div class="left">
    left main div flexible width
</div>

CSS :

.right {
  width: 180px;
  float: right;
  background: #aafed6;
}

.left {
  width: auto;
  background:blue;
  overflow: hidden;
 }

Avoid overlapping divs horizontally

1 Answers1