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..
Not likely to be a common want/need, but you've stumbled across an area that I am faced with every day. Our copywriters are big on zero orphans. I made a...
.mnav-ul-li:hover > ul - add position: absolute; .mnav-ul-li { float: left; display: block; position: relative; } .mnav-ul-li a { display:inline-block; padding:10px 25px; } .mnav-ul-ul { display: none; } .mnav-ul-li:hover >...
As feeela says, using position is how you will accomplish this. .parent_with_height200px { height: 200px; position: relative; background-color: #DDDDDD; } .left { width: 50%; position: absolute; bottom: 0px; left: 0px;...
This is the intended behavior. Font sizes set in px or pt do not inherit from the parent element. 16px is 16px, no matter what. Font sizes set in em...
You can set ranges with nth-child. To start from a position (defined by the last part + 2) and select all children that follow, use n, if you want to...
You could use media queries to reduce the font size of the <h2> when the screen size is smaller than a certain size. @media (max-width: 400px){ div.header-image-single h2 { font-size:...
Ok so after searching high and low and no luck I have figured it out!!! CSS section li { position: relative; width: 100%; height: auto; display: block; background: url(_images/daybg_03.png) center...
I apologize that I couldn't get the CSS exactly like in the screenshots, but I tried my best. It is possible to create shapes with pure CSS only. Please take...
After some more hours and many tries I figured out how to solve this. Here is the jsfiddle: http://jsfiddle.net/promatik/wZwJz/18/ So the trick is to add the class before the specific...
To indent each <code> block, you can use something like: code{ display: block; margin: 0 40px; } To indent only the first line of each <code> block, code{ text-indent: 40px;...
The issue is because the request is sent to load the new page immediately, hence the current UI is unloaded straight away with few further updates. To get around this...
If you don't want a scrollbar, but do want to scroll, then the most apparent solution would be to use some javascript. If you're into jquery, here's some: http://www.net-kit.com/jquery-custom-scrollbar-plugins/ I've...
This is more of a math question rather than programming, but what you should basically do is is calculate the x and y differences between your character and its target,...
To set the id: tbl.setAttribute('id', thisTablesId ); But probably what you want is to set the class attribute instead. Those don't need to be unique. You can change the css...
ul li:nth-child(3n){ background-color: transparent; } ul li:nth-child(2n){ background-color: red; } ...
Classically, this would look like this: CSS: #div1 { float:left; width:400px; height:200px; background-color: gray; } #div2 { margin-left: 400px; margin-right: 400px; width:auto; height:200px; background-color: silver; } #div3 { float:right; width:400px;...
There is no way of doing this that works in IE6 without: using inline style on the first paragraph; giving the first paragraph a class to use in a selector;...
You can't. Sprites only work when you can limit the size of the element to the size of the section of the image you want to display. Use separate images....
Please, don't reinvent the wheel! Scrollbars are there to make it easy for the user to scroll the page/content. Browser developers have taken care of all the necessary event handling,...
if you're using jquery, you can just do $('#test').css('display','none'); That will hide the element and leave the background untouched. [Edit] I don't think I understood the question before. Per your...
you can set in JQuery by below Line of Code, Here is DEMO $('#container').css('-webkit-mask-box-image',"url('masks/4.png')") ...
I would place a div around the images and place the height of the divs to 25%. HTML <div class="header"> <div class="headercontent"> <div class="socialbuttonstop"> <div class="social_btn"> <img src="Images/facebooksmall.png"/> </div> <div...
Unquestionably you would use a class for this: <div id="Card0" class="card"> <div draggable="true" id="carte0"> <div id="no">8</div> <div id="Trefle"></div> </div> </div> <div id="Card1" class="card"> <div draggable="true" id="carte1"> <div...
You could use pseudo-elements :before and :after to give the door some thickness. I made a rough example for you but please modify (change colors, add prefixes to the css...
You can't apply margins or position other than static on table cells or rows, so even if you weren't using transitions it wouldn't work. You need to... <td> <div class="page">...
You can use parseInt, it will remove the px var rozmiar = parseInt(divek.style.fontSize); ...
Do you mean like this? HTML: <table id="table"> <tr> <th><a href="main.html">edit</a> </th> <th><a href="main2.html">update</a> </th> <th>........</th> </tr> <tr> <th><a href="main.html">edit</a> </th>...
http://jsbin.com/mewuk/1/watch?html,css,output <body> <div class="container"> <div class="wrapper"> <div class="thumbnail"><img src="http://png-2.findicons.com/files/icons/1620/crystal_project/32/thumbnail.png"></div> <div class="thumbnail"><img...
The images aren't scaling because they aren't bound by a fixed height on their immediate containers. For example, the first image in the layout (in the header section), has neither...
.inline_table{ display: inline-table; position: relative; } is another property you might want to look at ... any element which has both position relative AND inline table .. will be aligned...