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 align div horizontally in this case

    Why my easypie number don't show inside?

    How to expand textarea to fit text vertically and horizontally?

    How to prevent iOS keyboard from pushing the view off screen with CSS or JS

    How do I create a cut-out hexagon shape?

    How to Make a Pentagram with CSS Border Attributes

    Horizontal
      navigation - how to vertical align contents of

    How can I get a relative div to expand to fit its absolute contents?

    How to neutralize CSS definitions without overriding

    Make converted joomla template show 2 colums in main content

    How to get rid of space between buttons and content/paragraph? (CSS)

    How to set css class on active menu item using a masterpage?

    How to modify CSS when requirements change?

    How to add a id tag in php output?

    CSS media query height greater than width and visa versa (or how to imitate with JavaScript)

    How to give different views for same url for different devices with same resolution?

    How to change background [closed]

    How to add missing browser-specific css declaration properties and prefixes to epub [closed]

    how to get image to show up to the left of panel (both in same row)

    How to Change Elements Before & After Navbar Collapse?

    How To Add Links To Right Of Header?

    How to move image in div with CSS?

    How to insert database values into the template stylesheet?

    How can i position a background image to the top left and bottom right of a html element?

    How to retain CSS transform scale on checked state

    How to strach div in some line to “all left space” with css

    how to use the CSS contains-element selector with input elements?

    How to center data table header and data using in bootstrap w/o using CSS?

    How to make a footer stay on the bottom?

    How can I give seperate margin to individual control and also keeping same style in CSS for all of them HTML5 [closed]