CSS: how to position 3 blocks

Question

I want to position the 3 blocks in the following way. The first block takes 50% of space (50% width and 100% height). The second block located left from the first block and takes 50% of width and 50% height. The third block located left from first and bottom from second and has the same parameters as second one. The problem is the blocks is flexible. The takes only space around the text. The code:

<body>
<div class="div1">
  <div class="table-display">
    <div class="cell-display div2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam magnam provident deserunt, deleniti neque vitae soluta id eveniet inventore animi laudantium iste vero, cupiditate doloremque et sint, dolor unde ab. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborios, deleniti neque vitae soluta id eveniet inventore animi laudantium iste vero, cupiditate doloremque et sint, dolor unde ab. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam magnam provident deserunt, deleniti neque vitae soluta id eveniet inventore animi laudantium iste vero, cupiditate doloremque et sint, dolor unde ab.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam magnam provident deserunt, deleniti neque vitae soluta id eveniet inventore animi laudantium iste vero, 
    niet inventore animi laudantium iste vero, cupiditate doloremque et sint, dolor unde ab. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborios, deleniti neque vitae soluta id eveniet inventore animi laudantium iste vero, cupiditate doloremque et sint, dolor unde ab. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam magnam provident deserunt, deleniti neque vitae soluta id eveniet inventore animi laudantium iste vero, 
    niet inventore animi laudantium iste vero, cupiditate doloremque et sint, dolor unde ab. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborios, deleniti neque vitae soluta id eveniet inventore animi laudanor sit amet, consectetur adipisicing elit. Laboriosam magnam provident deserunt, deleniti neque vitae soluta id eveniet inventore animi laudantium iste vero, cupiditate doloremque et sint, dolor unde ab.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam magnam provident deserunt, deleniti neque vitae soluta id eveniet invenor sit amet, consectetur adipisicing elit. Laboriosam magnam provident deserunt, deleniti neque vitae soluta id eveniet inventore animi laudantium iste vero, cupiditate doloremque et sint, dolor unde ab.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam magnam provident deserunt, deleniti neque vitae soluta id eveniet invenor sit amet, consectetur adipisicing elit. Laboriosam magnam provident deserunt, deleniti neque vitae soluta id eveniet inventore animi laudantium iste vero, cupiditate doloremque et sint, dolor unde ab.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam magnam provident deserunt, deleniti neque vitae soluta id eveniet invenor sit amet, consectetur adipisicing elit. Laboriosam magnam provident deserunt, deleniti neque vitae soluta id eveniet inventore animi laudantium iste vero, cupiditate doloremque et sint, dolor unde ab.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam magnam provident deserunt, deleniti neque vitae soluta id eveniet inventium iste vero, cupiditate doloremque et sint, dolor unde ab. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam magnam provident deserunt, deleniti neque vitae soluta id eveniet inventore animi laudantium iste vero, 
    niet inventore animi laudantium iste vero, cupiditate doloremque et sint, dolor unde ab. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborios, deleniti neque vitae soluta id eveniet inventore animi laudantium iste vero, cupiditate doloremque et sint, dolor unde ab. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam magnam provident deserunt, deleniti neque vitae soluta id eveniet inventore animi laudantium iste vero, 
    cupiditate doloremque et sint, dolor unde ab. </div>
    <div class="cell-display">
      <div class="div3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam magnam provident deserunt, deleniti neque vitae soluta id eveniet inventore animi laudantium iste vero, cupiditate doloremque et sint, dolor unde ab. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam magnam provident deserunt, deleniti neque vitae soluta id eveniet inventore animi laudantium iste vero, cupiditate doloremque et sint, dolor unde ab.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam magnam provident deserunt, deleniti neque vitae soluta id eveniet inventore animi laudantium iste vero, cupiditate doloremque et sint, dolor unde ab. </div>
      <div class="div4">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam magnam provident deserunt, deleniti neque vitae soluta id eveniet inventore animi laudantium iste vero, cupiditate doloremque et sint, dolor unde ab. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam magnam provident deserunt, deleniti neque vitae soluta id eveniet inventore animi laudantium iste vero, cupiditate doloremque et sint, dolor unde ab.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam magnam provident deserunt, deleniti neque vitae soluta id eveniet inventore animi laudantium iste vero, cupiditate doloremque et sint, dolor unde ab. </div>
    </div>
  </div>

</div>
</body>
</html>

.table-display {
  display: table;
  width: 100%;
}
.cell-display {
  display: table-cell;
  width: 50%;
  position: relative;
}
.div1, .div2, .div3, .div4 {
  padding: 40px;
}
.div1 {
  background: #ABC;
}
.div2 {
  background: #DEF;
}
.div3 {
margin: 40px;
margin-top:0;
  background: #CAD;

  heighth:50%;

}
.div4 {
margin: 40px;
margin-bottom:0;
height:50%;
  background: #FAD;
}

Sandbox: https://jsfiddle.net/224wb7v4/

Without (probably) actually answering your question, have you tried Flexbox model? http://www.sketchingwithcss.com/samplechapter/cheatsheet.html In my experience things tend to be much easier with that than trying to figure out what's wrong with "old-style" CSS... — Jan Schuermann, Feb 26 '17 at 06:46
Oh, clearfix? Take a look at the link. http://stackoverflow.com/a/29562362/7621384 — Dražen, Feb 26 '17 at 07:06

Jeff Miller · Answer 1 · 2017-02-26T07:14:56.977

1

You can accomplish what you're trying to do by adding the height CSS property to .table-display and modifying what you had on .div3:

.table-display {
  height: 100%;
}

/* note how i changed your 50% to using calc() in this selector. this will subtract the top margin. */
.div3 {
  height: calc(50% - 40px);
}

Working example on JSFiddle.

edited Feb 26 '17 at 07:14

answered Feb 26 '17 at 07:02

Jeff Miller

2,405
1
26
41

score 1 · Answer 2 · answered Feb 26 '17 at 07:05

1

you should use flexbox to style this.

If you want more details, check out this video.

https://www.youtube.com/watch?v=JJSoEo8JSnc&t=595s

answered Feb 26 '17 at 07:05

W.Chen

407
1
4
6

CSS: how to position 3 blocks

2 Answers2