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


Tags: css,responsive-design,grid-layout

Problem :

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.



Solution :

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.


    CSS Howto..

    Understanding how VS parses CSS in .ascx docs

    How Should I Display This Background Using CSS?

    How to create a margin between two seperate divs?

    How to make cut off in CSS as shown in the attached image?

    Show div on hover span styling

    Show another element with hover

    How to select nth child with css? [duplicate]

    How to center a CSS Hexagon

    how to apply css class condtionally in angularjs

    How to get rid of css inherited from a css file?

    How to enforce input text to take 100% width of its parent

    How to get cropped image with gray/ sepia in my editor.?

    How can I convert a CSS stylesheet to inlined CSS styles? [closed]

    popup mask is very very quickly shown

    Wordpress nav menu images not showing up in mobile safari

    Modernizr: how do I detect CSS display:table-cell support?

    JavaFX - Where is the css file for definition of StageStyle located or how can I change it?

    How can I stop this ugly font smoothing with custom fonts in CSS?

    How to make my two sections vertically align, even when scaled, with different amounts of content?

    How can I overlap 2 images on image product in Magento?

    How to apply icons to links using css?

    How to make this slider more fluid?

    How to combine slide-in panels with sticky header?

    How to make Media Query work when IE loads?

    How to Change Text Color with CSS Transitions?

    How to change div border automatically when more children are added to it

    How do you put two divs next to each other so they fill up the available space

    How to combine 2 SASS functions as they do almost the same thing just using a different calculation?

    How to change default comments pattern in Atom (specifically for CSS)

    How to align text under image using HTML/CSS?