CODEWITHSUNDEEP
htmlcssimage
user7280974
user7280974

Reputation:

CSS columns: left/right split, middle content stacked

I have a problem with my images. I want to make 4 images look like this: Image

But unfortunately image number 4 is under the rest of them and sticked to the left side of the document. I want it to be sticked to number 2 and 3.

Here is my code:

<div id="images">
<div class="off1"><img src='img/off1.jpg' /></div>
<div class="off2"><img src='img/off2.jpg' /></div>
<div class="off3"><img src='img/off3.jpg' /></div>
<div class="off4"><img src='img/off4.jpg' /></div>
</div>

And css:

.off1
{
float: left;
display: block;
}



.off2
{

display: block;

}

.off3
{
display: block;
position: relative;
bottom: 3px;
}

.off4
{
display: inline-block;
}

Thanks for help!

Upvotes: 0

Views: 265

Answers (2)

jeremiah.trein
jeremiah.trein

Reputation: 806

Use a mix of floats, positioning, and source-ordering. NO ADDED MARKUP.

Hope this helps you. Source-ordering can be a burden (which is why it's hard to do float:right on .off4. Yet, with CSS there's always a way!

/* added style for example only */

.off1 {
  background-color: red;
  height: 300px;
  width: 100px;
}
.off2 {
  background-color: #AAA;
  width: auto;
  height: 150px;
}
.off3 {
  background-color: #ae5433;
  width: auto;
  height: 150px;
}
.off4 {
  background-color: purple;
  width: 100px;
  height: 300px;
}
/* end added, example style */

#images {
  position: relative;
}
.off1 {
  float: left;
}
.off2,
.off3 {
  width: auto;
}
.off4 {
  position: absolute;
  top: 0;
  right: 0;
}
<div id="images">
  <div class="off1">
    <img src='img/off1.jpg' />
  </div>
  <div class="off2">
    <img src='img/off2.jpg' />
  </div>
  <div class="off3">
    <img src='img/off3.jpg' />
  </div>
  <div class="off4">
    <img src='img/off4.jpg' />
  </div>
</div>

Upvotes: 0

Johannes
Johannes

Reputation: 67778

Add a wrapper element for image div 2 and 3, make that and divs 1 and 4 floats and give div 3 line-height: 0 to avoid a gap between 2 and 3:

http://codepen.io/anon/pen/gLdOyY

Upvotes: 1

Related Questions