CODEWITHSUNDEEP
htmlcsscss-position
Steven
Steven

Reputation: 25

Position div under parent div

I have a layout like this (simplified):

<div class="row row-1">
  <div class="block">block title 1</div>
  <div class="content">Content of the 1st block</div>
</div>
<div class="row row-2">
  <div class="block">Block title 2</div>
</div>
<div class="row row-3">
  <div class="block">Block title 3</div>
</div>
<div class="row row-4">
  <div class="block">Block title 4</div>
</div>

My CSS (responsive design)

.row {
  width: 49%;
  float: left;
  display: block;
  border: 1px solid black;
}
@media screen and (min-width: 768px) {
  .row {
    width: 32%;
  }
}

The first two blocks are displayed next to each other on small screens, 3 blocks are displayed in 1 row for larger screens. The content div of the row-1 div must be displayed under the first row of blocks. the next block(s) is/are positioned under all this.

I tried to use position:absolute; on the content div, but then it's positioned outside the page flow. The content overlaps the next blocks. Content will be variable, so a fixed height (and a fixed margin-top for the next div) is no option.

How can I solve this?

Thanks!

Upvotes: 0

Views: 985

Answers (2)

zer00ne
zer00ne

Reputation: 43853

Although Ryan Muller is spot on, you can use flexbox as well.

FIDDLE

I wrapped everything in one <section class="flex">

Relavent CSS

    .flex { 
       display: flex; 
    }

    @media screen and (max-width: 768px) {
    .flex { 
       display: flex;
       flex-flow: column wrap; 
     }
   }

Note: I changed your media query from min-width: 768px to max-width: 768px on the assumption that your intention was to accommodate mobile devices.

Upvotes: 0

Ryan Kennedy
Ryan Kennedy

Reputation: 3615

The float:left is what's killing this. Typically as a rule of thumb, you should only use CSS float as a very last resort, because it often introduces unwanted interactions with other floated elements.

Set display: inline-block and vertical-align: top. This will cause the blocks to keep their block shape and yet flow like text.

Example at JSFiddle.

.row {
  width: 49%;
  display: inline-block;
  border: 1px solid black;
  vertical-align: top;
}
@media screen and (min-width: 768px) {
  .row {
    width: 32%;
  }
}

Upvotes: 2

Related Questions