CODEWITHSUNDEEP
cssresponsive-designgrid-layout
dialogik
dialogik

Reputation: 9552

How to create an easy responsive grid with one column and two boxes?

I want to create a CSS grid (without using any external library) where I have two columns. The first column contains one box. The second column contains two boxes.

The box in the first/left column shall have the height of the two boxes (respecting margin bottom accordingly). Have a look at the following graphic - the red box represents the unwanted behaviour, the green the wanted one.

Visual Example

First of all: Is this possible without using any JavaScript (like calculating the sum of the two right boxes and dynamically setting height of left box)?

And if yes, how can I most effectively realize this using CSS? And how can I assure that this also works on mobile devices like tablets and smartphones? I want to avoid using a table.

I always get confused with position, display and float when trying to achieve this. But this is what I have tried so far but the problem is that I set the height of the left box statically.

The display: inline-block; width: 40%; min-width: 420px is my try to keep it responsive.

CSS

.box-layout {
  display: inline-block;
  width: 40%;
  float: left;
  outline: 1px solid #C3C3C3;
  padding: 10px 20px;
  margin: 0 10px;
  background-color: #FAFAFA;
  min-width: 420px;
}

.left-box {
  min-height: 440px;
}

HTML

<div class="box-layout left-box">
    <h1>Left large box</h1>
</div>

<div class="box-layout right-box right-box-first">
    <h1>Right first box</h1>
</div>

<div class="box-layout right-box right-box-second">
    <h1>Right second box</h1>
</div>

Here is a jsFiddle.

Upvotes: 2

Views: 1829

Answers (1)

tallrye
tallrye

Reputation: 181

If you want to achieve this with only using CSS, I'd recommend to use a parent container

.container{
    width:1024px;
    margin:0 auto;
    height:440px;
}

Here is a sample JSFiddle

At this point, you need to decide the height of these boxes. And if you want height dynamic, as far as I know you should use JS, like this;

$(document).ready(function(){
    var height = $(window).height();
    var leftBoxHeight = height;
    var rightBoxHeight = height / 2 - 20;
    $('.left-box').css('height', leftBoxHeight + 'px');
    $('.right-box').css('height', rightBoxHeight + 'px');
});

And here is my second JSFiddle

Hope this helps.

Upvotes: 1

Related Questions