CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Michael Pasqualone
Michael Pasqualone

Reputation: 2037

2 stacked containers to the right of an image

I'm trying to achieve the following layout for a search result box. Specifically a 100% width and height image that on the right has two stacked containers that equals the height of the image, each with differing background colours that are butted up right against the image.

Screenshot example

All attempts to achieve this simple layout are failing miserably. The issue I keep hitting is the when using something like:

<div class="search-result-box">
    <div class="row">
        <div class="col-md-3">
            <img src="" class="img-responsive" style="height: 196px;" height="196">
        </div>

        <div class="col-md-9">
            ...
        </div>
    </div>
</div>

The image doesn't quite fill the col-md-3 column completely and thus you see the column's background.

What's the best way to do this?

Upvotes: 0

Views: 33

Answers (2)

Henri Hietala
Henri Hietala

Reputation: 3041

Bootstrap columns have a padding of 15px by default. Also the image width has to be 100%. You can do something like this:

<div class="search-result-box">
  <div class="row">
    <div class="col-md-3" style="padding: 0;">
      <img src="" class="img-responsive" style="width: 100%;">
    </div>

    <div class="col-md-9">
      ...
    </div>
  </div>
</div>

Jsfiddle: http://jsfiddle.net/HM4gE/1/

I wouldn't use Bootstrap columns though to achieve this since you seem to have some fixed heights and widths for columns. Instead I would do it like this (given that the height and the width of the image is always 196px): http://jsfiddle.net/HM4gE/2/

Check browser support for calc() before using it: http://caniuse.com/calc

Upvotes: 1

MrDevel
MrDevel

Reputation: 168

Here a possible answer:

<div class="search-result-box">
    <div class="row">
        <div class="col-md-3">
             <img src="" class="img-responsive" style="height: 196px;" height="196" />
        </div>
        <div class="col-md-9">
            <div class="title">Title</div>
            <div>Link1</div>
        </div>
    </div>
 </div>

.search-result-box {
    display: table;
    width: 100%;
}

.row  {
    display: table-row;   
}

.row > * {
    display: table-cell;
}

.col-md-3 {
    background: orange;
    width: 260px;
    height: 196px;
}

.col-md-9 {
    vertical-align:top;
    background: grey;
}

.title {
    background: #ccc;
    width: 100%;
    height: 150px;
}

http://jsfiddle.net/junkie/fAPQ6/2/

Upvotes: 0

Related Questions