CODEWITHSUNDEEP
htmlcss
Adjit
Adjit

Reputation: 10305

CSS Styling for div layout

Please see my HTML structure below - I am trying to have the .prod divs to be to the right of the logo, and the logo to be the full height of the .row div

I know this can be done using tables and floats but I want to try and avoid using those.

Here's my structure:

.row {
  width: 100%;
}

.row > div {
  display: inline-block;
}

.row .image {
  height: 100%;
  width: 24%;
}

.row .prod {
  width: 75%;
  height: auto;
}

.prod > div {
  display: inline-block;
  width: Calc(50% - 4px);
}

div {
  border: solid 1px black;
}
<div class="row">
  <div class="image">
    <img alt="Full Height Logo" src="" />
  </div>

  <div class="prod">
    <div class="prod_image">
      <img alt="Product Image" src="" />
    </div>
    <div class="prod_info">
      Prod Info
    </div>
  </div>

  <div class="prod">
    <div class="prod_image">
      <img alt="Product Image" src="" />
    </div>
    <div class="prod_info">
      Prod Info
    </div>
  </div>
</div>

Upvotes: 2

Views: 91

Answers (3)

m4n0
m4n0

Reputation: 32255

Wrap the additional info inside another div and give it the remaining width.

I have given it 74% because of the extra space from inline-block elements. Adjust it to your requirement. I would prefer flexbox if you are implementing it for modern browsers.

.row {
  width: 100%;
}
.row > div {
  display: inline-block;
}
.row .image {
  height: 100%;
  width: 24%;
  vertical-align: top; /* Default to baseline, align to the top */
}
.row .product_info { 
  width: 74%; /* Remaining width */
}
.row .product_info .prod {
  /* width: 75% */ Remove
  height: auto;
}
.prod > div {
  display: inline-block;
  width: Calc(50% - 4px);
}
div {
  border: solid 1px black;
}
<div class="row">
  <div class="image">
    <img alt="Full Height Logo" src="" />
  </div>
  <div class="product_info">
    <div class="prod">
      <div class="prod_image">
        <img alt="Product Image" src="" />
      </div>
      <div class="prod_info">
        Prod Info
      </div>
    </div>

    <div class="prod">
      <div class="prod_image">
        <img alt="Product Image" src="" />
      </div>
      <div class="prod_info">
        Prod Info
      </div>
    </div>
  </div>
</div>

Upvotes: 3

Paulie_D
Paulie_D

Reputation: 114991

flexbox can do that.

.row {
  display: flex;
}
.image,
.prod {
  flex: 1;
  background: lightblue;
  text-align: center;
  height: 75px;
}
.image {
  flex: 0 0 auto;
  background: orange;
  display: flex;
  flex-direction: column;
}
.image img {
  height: 100%;
  width: auto;
}
<div class="row">
  <div class="image">
    <img alt="Full Height Logo" src="http://lorempixel.com/output/food-q-c-50-50-1.jpg" />
  </div>

  <div class="prod">
    <div class="prod_image">
      <img alt="Product Image" src="" />
    </div>
    <div class="prod_info">
      Prod Info
    </div>
  </div>

  <div class="prod">
    <div class="prod_image">
      <img alt="Product Image" src="" />
    </div>
    <div class="prod_info">
      Prod Info
    </div>
  </div>
</div>

Upvotes: 2

la1ch3
la1ch3

Reputation: 507

Flexbox?

I'm still pretty new to flexbox myself, but you could use the align-items: stretch property on your container to cause your items to stretch, but give the .prod div's a max-height so that they only stretch so much. You can also set various widths properties using the flex property on your flex items so that you get the width your after.

For more information: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Upvotes: 0

Related Questions