CODEWITHSUNDEEP
htmlcss
el_nariz
el_nariz

Reputation: 259

CSS align 2 divs side by side

How do you align two divs next to each other when one has a set width and the other should automatically use up the rest of the space. If the set width div is omitted from the help, the other div should resize to take up all of the space from the container div.

It is being used for image / content design. I want it so if there is no image, the content takes up it's space.

Here's my code:

CSS

.sub-row-wrapper { 
    background: #f00; 
    text-align: left; 
    width: auto; 
    position:relative; 
    padding: 12px; 
    margin-bottom: 12px; 
    border-bottom: 1px; 
    border-style: solid; 
    border-color: #ccc; 
} 

.sub-row-left-col { 
    background: #ff0; 
    display:inline-block; 
    width: 25%;
   text-align: left; 
}

.sub-row-right-col { 
    background: #f0f; 
    display:inline-block; 
    width: auto;  
}

HTML

<div class="sub-row-wrapper">

    <div class="sub-row-left-col">
        <p>Left img</p>
    </div>

    <div class="sub-row-right-col">
        <p>This should be positioned right of 'left img' and should not go underneath the left img</p>
    </div>
</div>

I have the following code

http://jsfiddle.net/fr9zvaj3/

What I want on the first div is for the yellow box to sit to the left of the purple box. The yellow box should be 25% wide and the purple box should use up whatever space is left.

When I remove the yellow box, the purple box should automatically go full width (as it does on row 2)

Upvotes: 1

Views: 2875

Answers (2)

Alex Char
Alex Char

Reputation: 33228

One solution is to use display: flex to container and set width: 100% to purple div:

.sub-row-wrapper {
  background: #f00;
  text-align: left;
  width: auto;
  position: relative;
  padding: 12px;
  margin-bottom: 12px;
  border-bottom: 1px;
  border-style: solid;
  border-color: #ccc;
  display: flex;/*set display to flex*/
}
.sub-row-left-col {
  background: #ff0;
  display: inline-block;
  width: 25%;
  text-align: left;
}
.sub-row-right-col {
  background: #f0f;
  display: inline-block;
  width: 100%;/*set width to 100%*/
}
<body>

  <div class="sub-row-wrapper">

    <div class="sub-row-left-col">
      <p>Left img</p>
    </div>

    <div class="sub-row-right-col">
      <div class="post-content">
        <p>This should be positioned right of 'left img' and should not go underneath the left img</p>
      </div>
    </div>

  </div>

  <div class="sub-row-wrapper">

    <div class="sub-row-right-col">
      <div class="post-content">
        <p>This should be full width when I put enough content in to make it full width</p>
      </div>
    </div>

  </div>

</body>

Reference

flex

Upvotes: 2

qrikko
qrikko

Reputation: 2603

.sub-row-left-col { 
    background: #ff0; 
    display:inline-block; 
    width: 25%;
   text-align: left; 
   float: left;
}

.sub-row-right-col { 
    background: #f0f; 
    display:inline-block; 
    width: 100%;  
}

should do the trick i believe. float: left; and width:100%

Upvotes: 0

Related Questions