CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
user3648646
user3648646

Reputation: 711

how do i keep two div's side by side when one is fixed size

I would like to keep two div's side by side, regardless of the container width when one has a fixed size. Here is my sample html

<div class="container-fluid">
  <div class="row">
    <div class="item">
      <div class="date">
        <div class="month">APR</div>
        <div class="day">6</div>
        <div class="weekday">Mon</div>
      </div>
      <div class="details">
        <p>Kickstarter sustainable readymade Neutra viral, crucifix PBR. Migas tote bag art party, narwhal flannel hashtag YOLO XOXO polaroid. Ennui iPhone pour-over kitsch, lumbersexual stumptown gastropub flexitarian. </p>
      </div>
    </div>
  </div>
</div>

and here is my sample css

  .date{
    display: block;
    text-align: center;
    width: 4em;
    background-image: linear-gradient(#fff,#fff 1em,#e7e7e7);
    border-radius: 5px;
  }
  .month{
      background-color: blue;
      color: white;
      border-top-left-radius: 5px;
      border-top-right-radius:5px;
      padding: 2px 0 2px 0;
    }
  .day{
      font-size: 2em;
    }
  .details{
      width:100% - 5em;
      padding: 5px;
      border-radius: 6.5px;
      background-color: white;
      border: 1px solid rgb(204, 204, 204);
    }
    .item{
        border-radius: 6.5px;
        margin: 5px;
        padding: 5px;
        display: block;
        border: 0;
        background-color: rgba(0, 0, 0, 0);
        background-image: linear-gradient(rgb(242, 242, 242), rgb(242, 242, 242) 1em, rgb(255, 255, 255));
    }

I am using bootstrap and I don't want to use tables to make this happen. The left hand side is fixed width of 4em and the right should fill up the rest of the width. I have been toying around with this for a while and thought maybe stack over flow crowd could point me in the right direction.

here is a plunker

Upvotes: 0

Views: 268

Answers (3)

j08691
j08691

Reputation: 207861

You could set the display property for your date and details divs to table-cell:

.date,.details {
    display:table-cell;
}

bootply example

Upvotes: 3

Alessandro Incarnati
Alessandro Incarnati

Reputation: 7248

You can just float:left the .date div and apply a margin-left:4em or more to the .details div.

DEMO

http://plnkr.co/edit/V45nM6qPSuIclCvVDQe0?p=preview

Upvotes: 2

BenM
BenM

Reputation: 53198

Just float the date container to the left, and add a margin to .details:

.date{
    display: block;
    text-align: center;
    width: 4em;
    background-image: linear-gradient(#fff,#fff 1em,#e7e7e7);
    border-radius: 5px;
    float: left;
}

And similarly:

.details{
    padding: 5px;
    border-radius: 6.5px;
    background-color: white;
    border: 1px solid rgb(204, 204, 204);
    margin-left: 5em;
}

Notice that there is no requirement for a width property of .details using this method.

Updated Plunker

Upvotes: 4

Related Questions