How do I make this responsive layout with CSS?


Tags: css

Problem :

Sorry, I'm a total noob with css and web stuff.

I want to create a responsive grid layout to preserve these ratios:

  • B.width/C.width = 5/7
  • A.width = B.width
  • C.height = 100% screen height
  • A.width = B.width

Here's an illustration where A, B, and C should all be div elements.

|--5--|---7---|
|     |       |
|  B  5   C   |
|     |       |
|-----|       |
|  A  1       |
|-----|-------| 

What I've tried doesn't work for several reasons:

  • When the window is small, the columns stack up on each other in rows
  • The "A" div is well below the "B" div because of how far the "C" div extends
  • The height of C is not 100% the height of the window.

Here's the code for it

<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet"/>
<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.0/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div class="row-fluid">
    <div class="span5">
        <div class="well">
            B
            <br/>
            <br/>
            <br/>
            <br/>
        </div>
    </div>
    <div class="span7">
        <div class="well">
            C
            <br/>
            <br/>
            <br/>
            <br/>
            <br/>
            <br/>
        </div>
    </div>
</div>
<div class="row-fluid">
    <div class="span5">
        <div class="well">
            A
        </div>
    </div>
</div>



Solution :

You can simply use percentages if you want the boxes to behave the same regardless of screen size. Mind though, that for small screens it might be better to display the blocks underneath each other and that is also the power of a grid system as introduced by Bootstrap.

Anyway for a simple and pure CSS fixed percentages solution:

html, body {
  padding: 0;
  margin: 0;
  height: 100%; /* This is to make the height percentages work */
}

.A, .B, .C { /* This is just to show the boxes */
  box-sizing: border-box;
  border: 3px solid silver;
  border-bottom-color: black;
  border-right-color: black;
}

.C {
  width: 58.33%; /* 7/12, rounded down */
  height: 100%; /* Relative to parent. Have a look at `vh` instead of % for viewport height */
  float: right; /* Float to the right, so A and B will move left of C*/
}
.B,
.A {
  width: 41.66%; /* 5/12, rounded down  */
}
.B {
  height: 83.33%; /* 5/6, Relative to parent (= body) */
}
.A {
  height: 16.66%; /* 1/6 */
}
<div class="C">C</div>
<div class="B">B</div>
<div class="A">A</div>


    CSS Howto..

    How to avoid orphaned headings in CSS columns?

    css ul li nested menu with a padding. How on hoover retain width of the menu?

    How to align the bottom of two left- and right aligned texts with bottom of parent container?

    How HTML Inheritance works with conflicting styles rules in CSS?

    How to access CSS children properly?

    How to fix text with limited height and absolute position overflows

    When using padding-top to retain aspect ratio for fluid layout, how do I vertically center text to background image?

    How to implement geometric div backgroud shapes in css

    How to change scrollbar css at runtime with javascript?

    How do I indent elements? Example in details

    How to delay a hyperlink until a CSS animation ends?

    how scrollable text line inside a div without showing scroll bars

    How to get the rotation of degree with getBoundingClientRect?

    How to id dom table so I can position it on page?

    How to override nth-child

    How to apply remaining width to a div in the middle of 2 other divs

    How to style first paragraph

    of the content differently without using css class , ID or javascript, with IE6 compatibility?

    How to sprite body background in CSS

    How do I make a div scrollable, without showing a nasty scrollbar?

    How can i override css property

    How can I set -webkit-mask-box-image through javascript?

    how to space 4 images equally within a div?

    How to do something like #Card%{ } in CSS

    How to make rotating shape look thick?

    How to use css3 transition on hover for td?

    How to define variable with CSS value from HTML tag? [closed]

    css: How to select first anchor tag inside table

    how to make image in over than other like this

    How to reduce responsively the height of images in the flexbox layout to fit window height?

    How to align a picture,name and the post with css like facebook does?