I am trying to build a layout that has two div blocks next to each other. Both of them are centered to the page. The left block (1) varies in width depending on how much space their is available in the window (from 300px min to 400px max). Block 2 has a fixed width of 640px and does not change. Both block's height extend to the bottom of the page. If one block is longer than the other than the other block would compensate with white space (with the background color still applied).
Youtube's video page can be used as an example, however in my case the larger block is on the right. Notice how youtube's right block (suggested videos) gets larger or smaller from 300-400px when the window is resized.
This is the best I can come with:
http://jsfiddle.net/7dL5z/
body {
margin:0;
padding:0;
height:100%;
}
#wrapper {
max-width:1040px;
min-width:940px;
margin:0 auto;
height: auto;
min-height: 100%;
}
#left {
float:left;
min-width:300px;
max-width:400px;
height:100%;
background:#EEE;
}
#right {
float:right;
width:640px;
height:100%;
background:#666;
}
<html>
<body>
<div id="wrapper">
<div id="left">left</div>
<div id="right">right</div>
</div>
</body>
</html>
Two problems:
1) I can't get the divs to extend to the bottom.
2) Adding a float to block 1 renders the min-width property useless
I am looking for a JS and CSS media query free solution if possible.
Any one have a clue?
A few things:
You need to add
html {
height:100%;
}
to get html's sub elements to fit the window. Then remove height:auto from the wrapper.
If you have a max-width set in pixels on the wrapper without telling it a variable width relative to the window (like width:90%), the contents can't change size when the browser resizes, because their width is fixed.
So I added width:90% for demo purposes. You can set it to whatever percentage you think looks nice in the window.
Put your right div before your left in your html like so:
<div id="wrapper">
<div id="right">right</div>
<div id="left">left</div>
</div>
and then you can use left to fill the space left by right without having to float it or tell it a width. Setting the max & min width on the wrapper will keep left from getting too small or big.
So the final css would be:
html, body{
margin:0;
padding:0;
height:100%;
}
#wrapper {
max-width:1040px;
min-width:940px;
margin:0 auto;
height: 100%;
width:90%;
}
#left {
overflow:hidden;
height:100%;
background:#EEE;
}
#right {
float:right;
width:640px;
height:100%;
background:#666;
}
Here is one way of doing it using display: table-cell.
html {
height: 100%;
}
body {
margin:0;
padding:0;
height:100%;
}
#wrapper {
margin:0 auto;
height: 100%;
display: table;
min-width: 940px;
}
#left {
display: table-cell;
height:100%;
min-width: 300px;
max-width: 400px;
background:#EEE;
}
#right {
display: table-cell;
width: 640px;
height: 100%;
background:#666;
}
To get the panels to extent to 100% of the browser height, you need to set the height on the html element.
The behavior may be close to what you need.
See demo at: http://jsfiddle.net/audetwebdesign/ZVN97/
Something like this http://jsfiddle.net/pmj7Z/ maybe?
html, body {
margin:0;
padding:0;
height:100%;
}
#wrapper {
max-width:1040px;
min-width:940px;
margin:0 auto;
height: 100%;
}
#left {
display: block;
float: left;
min-width:300px;
max-width:400px;
height:100%;
background:#EEE;
}
#right {
float: right;
width:640px;
height:100%;
background:#666;
}
My solution is set wrapper to display: table & its childs to display:table-cell.
Both areas will expand bottom when one of them overflow the screen size. If not, both will expand to bottom (100%).
http://jsfiddle.net/7dL5z/4/
HTML:
<body>
<div id="wrapper">
<div id="left">
<p>left</p><p>left</p><p>left</p><p>left</p><p>left</p><p>left</p><p>left</p><p>left</p><p>left</p>
</div>
<div id="right">right</div>
</div>
</body>
CSS:
body {
margin:0;
padding:0;
height:100%;
}
#wrapper {
display: table;
height: 100%;
margin:0 auto;
max-width:700px;
min-width:500px;
width: 100%;
}
#left {
background:#EEE;
display: table-cell;
max-width: 300px;
min-width: 100px;
width: 40%;
}
#right {
display: table-cell;
background:#666;
}
If you use jQuery, here is my answer:
$(document).ready(function() {
layoutInit();
$(window).resize(function() {
layoutInit();
});
function layoutInit() {
// you can also hard code the max-width and min-width in the javascript,
// following function is used to remove "px" on "1040px"-like strings from CSS
var pxStriper = function(str) {
return str.substr(0, str.length - 2);
}
// all parameters you need to update the layout:
var bodyWidth = $("body").width(),
bodyHeight = $("body").width(),
wrapperMaxWidth = pxStriper($("#wrapper").css("max-width")),
wrapperMinWidth = pxStriper($("#wrapper").css("min-width")),
rightWidth = pxStriper($("#right").css("width"));
// 3 different situations with width of the body:
if (bodyWidth <= wrapperMaxWidth && bodyWidth >= wrapperMinWidth) {
// 1:
$("#wrapper").css('width', bodyWidth);
$("#left").css('width', bodyWidth - rightWidth);
} else {
if (bodyWidth > wrapperMaxWidth) {
// 2:
$("#wrapper").css('width', wrapperMaxWidth);
$("#left").css('width', wrapperMaxWidth - rightWidth);
} else {
// 3:
$("#wrapper").css('width', wrapperMinWidth);
$("#left").css('width', wrapperMinWidth - rightWidth);
}
}
// update the height:
$("#wrapper").height(bodyHeight)
}});
Related
So, i have this dilemma with a three column div.
what i'm trying to achieve is the Center Div should be responsive and aligned center with a max width of 1000px. this can easily achieve using these css codes:
#center{max-width:1000px; width:100%; margin:0px auto; }
and then the left and right div should cover the remaining space. it's like the width of the Left and right = Total width MINUS the width of the center div.
http://jsfiddle.net/bendaggers/zb38d/4/
HTML:
<div class="wrapper">
<div class="left"></div>
<div class="center">Image Logo JPG here
</div>
<div class="right"></div>
</div>
CSS:
body {
width:100%;
}
.wrapper {
display:table;
width:100%;
}
.left {
display:table-cell;
width:50%;
background-color:blue;
}
.right {
display:table-cell;
width:50%;
background-color:black;
}
.center {
display:table-cell;
}
.center a{
display:inline-block;
width:100%; max-width:1000px;
}
the problem is its not working. here's the fiddle.
can some one help?
In case you would like to have the center responsive and you would like to have 3 equal width columns then you should set the width to 33.3%. One trick you could set the width of your central column as 34% and the left and right as 33% width.
If you want to avoid to take into account of border and padding applied to those 3 columns you could also apply box-sizing:border-box;
/* apply a natural box layout model to all elements */
*, *:before, *:after {
-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
This way border and padding will not expand the width of the column but instead will be applied inside each column width.
Also you can then center the a link inside the center column.
body {
width:100%;
}
.wrapper {
display:table;
width:100%;
}
.left {
display:table-cell;
width:33%;
background-color:blue;
}
.right {
display:table-cell;
width:33%;
background-color:black;
}
.center {
display:table-cell;
width:34%; max-width:1000px;
text-align:center;
}
DEMO: http://jsfiddle.net/zb38d/7/
Otherwise if you want the center to be fixed width then simply set a width in pixels or em:
.center{ width: 1000px; } but then you will need to set a different percentage of your left and right column then, different from 33%. Otherwise you will support only very high resolutions this way because you are setting a fixed width of 1000px for the center column.
The best bet is to re-think how you're designing this. The first answer with percentages is the best. White space is key to good design; filling up a page is not necessary.
Anyway, this uses jQuery to calculate the left and right, plus it uses the display-table, which doesn't allow for max-width, just width. Using just floats had a hard time with sub-pixels, so the display table worked better. It only makes sense to use this type of layout at 1450px and greater, then rely on different css for the other sizes below that. Because of the jQuery, it calculates the width and sticks the style into the parsed html, so !important is required for css below the 1450 min-width.
DEMO: http://jsbin.com/miqetu/1
Only tested on Firefox on a desktop. I have know idea if this works on touch devices or other browsers without issue.
body,
html {
margin: 0;
padding: 0;
height: 100%;
}
.col {
box-sizing: border-box;
float: none!important;
clear: both!important;
}
.inner {
padding: 20px
}
.column-1 {
background: #ccc
}
.column-2 {
background: #ddd
}
.column-3 {
background: #eee
}
#media (max-width:1449px) {
/* used to over-ride jQuery*/
.wrapper {
display: block!important
}
.col {
display: block!important
}
.column-1,
.column-2,
.column-3 {
clear: both;
float: none!important;
width: 100%!important;
}
}
#media (min-width:1450px) {
.inner {
padding: 30px
}
.wrapper {
display: table;
height: 100%;
}
.col {
display: table-cell;
height: 100%;
}
.column-2 {
width: 800px /*max-width won't work */
}
}
#media (min-width:1500px) {
.column-2 {
width: 1000px /*max-width won't work */
}
}
HTML
<div class="wrapper">
<div class="col column-1"><div class="inner">...</div></div>
<div class="col column-2"><div class="inner">....</div></div>
<div class="col column-3"><div class="inner">...</div></div>
</div>
JQuery:
$(window).on("load resize", function() {
if ($('body').width() >= 1450) {
var ww = $(window).width();
var rem = ww - $('.column-2').width();
$('.column-1, .column-3').css('width', rem / 2);
}
});
I've searched around the forums but can't get an exact answer to the question. I want to tweak my blog layout at http://techtites.com/ to make the content area flexible width that adjusts when the browser changes width without pushing the sidebar to the bottom.
It is currently a fixed width layout.
Main styles that I've been playing with are:
#wrapper {
width:960px;
margin:0 auto;
}
#content {
padding:25px 0;
}
section {
float:left;
width:660px;
margin-right:20px;
}
aside {
float:left;
width:280px;
}
I want to make the section width to be dynamic, while retaining the aside to sit at the right of the window.
use positioning. set your #wrapper div to position: relative; this will position all child elements of that div relative to it rather than the browser window.
now position your aside to the top left of your #wrapper div
aside {
width: 280px;
position: absolute;
right: 0;
top: 0;
}
and finally, give enough padding to the section div so that it can still expand and contract, but it leaves enough room for the aside. You want the padding to equal the width of the aside (in this case 280px).
section {
padding-right: 280px;
}
I put up an example of all of this on jsFiddle: jsfiddle.net/2e9HM/6/
BONUS: if you really want to get fancy, you can set the max-width of your #wrapper div so that the page is flexible within that size. If you do this, make sure you set a min-width as well (equal to the size of your aside) so that the aside doesn't fall outside of the #wrapper when the window is shrunk down all the way.
Morphius solution is the best so far - for an example, see
http://codepen.io/anon/pen/wBBdgg
.blbx {
background:blue;
width: calc(100% - 100px);
height:50px;
display:inline-block;
vertical-align:top;
text-align:center;
}
.rdbx {
background:red;
display:inline-block;
height:50px;
width: 100px;
vertical-align:top;
}
.surround {
width: 100%;
height:50px;
}
.myimg { max-width:100%;
max-height:100%;
}
<div class='surround'>
<div class="blbx" ><img class='myimg' src="http://assets.cdpn.io/assets/logos/codepen-logo.svg">
</div><div class="rdbx"></div></div>
Change your styles to this
section {
float:left;
width:100%;
margin-right: -280px;
}
aside {
float:left;
width:280px;
}
Live example
Maybe this would do:
section {
float:left;
width:100%;
padding-right:250px;
height:100px;
}
aside {
float: left;
width: 250px;
min-height: 100%;
}
section {
float:left;
width:660px;
margin-right:20px;
height:100px;
}
aside {
height:100px;
margin-left: 670px;
}
live demo
I want to create an HTML page which:
Appears centred horizontally
Has a white background the entire height of the window
Contains a fixed header and scrollable content
I am having two issues related to {width: 100%} and {height: 100%}.
My header is 100% of the page width, when I expect it to be 100% of its parent width.
The background appears at 100% of the window height, but it then scrolls up with the content.
I would appreciate any help in understanding how CSS treats the 100% value in these two cases. I am not asking for a workaround: I already have that. I am asking for insights into the way CSS thinks.
Many thanks in advance,
James
Here's a demo of the issue
And here's the barebones HTML:
<!DOCTYPE html>
<head>
<title>Width & Height 100%</title>
<style>
html {
height:100%;
}
body {
background: #666;
height: 100%;
margin: 0;
}
#container {
position: relative;
height:100%;
background: white;
width: 400px;
margin: 0 auto;
padding: 0 0;
}
#header {
position:fixed;
z-index:100;
background:#ffe;
/* width:760px; */
width:100%;
height:64px;
}
#content {
position: absolute;
left:20px;
width:360px;
height:360px;
margin:64px 0 0 0;
background:#efe;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
Fixed header
</div>
<div id="content">
Scrollable content
</div>
</div>
</body>
</html>
All of these fixed positions are going to give you headaches.
About the widths: the box model is usually the problem. I start every CSS with body height and width set to 100%, and then reset my box model so it matches across browsers, and applies all of my padding to the inside of a box instead of the outside:
/* Set box models to match across browsers. */
* {
box-sizing:border-box;
-moz-box-sizing:border-box;
webkit-box-sizing:border-box;
max-width:100%;
}
Then set your width on a container using padding, first the mobile width, then the screen width to override:
#container {
padding: 0px 10px;
}
#media only screen
and (min-width : 700px) {
#container {
padding: 0% 30%;
}
}
For a full layout, you can visit my site:
http://instancia.net/fluid-sticky-footer-layout/
I should probably add the mobile bit to that page. :)
Fix header
Change the header position fixed to position absolute
Fix content height
* {
margin: 0;
}
html, body {
height: 100%;
}
#container{
min-height: 100%;
height: auto !important;
height: 100%;
background:#efe;
}
#content {
padding: 64px 20px 0;
}
Live example with pos fixed
http://jsfiddle.net/qB4sD/1/
I have two divs on a page. a grid-container that takes a background and an internal grid that needs to be positioned in the center of the other grid. My css:
html, body{
margin:0;
padding:0;
width:100%;
}
#grid-container{
background:#f8f8f8 url(../images/grid-container-bg.gif) repeat-x top left;
width:100%;
}
#grid{
width:1140px;
margin:0px auto;
}
At this point, the bg image of the #grid-container only fills the window, not the full width of the html. The symptom of this is that if you narrow the browser window so that a horizontal scrollbar is required and refresh the page, the bg image ends where the browser window ends. When I scroll to the right, the bg image is not there. Ideas?
EDIT: ok, per requests, I've edited my css/html. When I remove the width designation in the #grid-container, it shrinks to the width of the container within, which is even worse. Here's what I have now:
html, body{
margin:0;
padding:0;
min-width:1140px;
}
body{
background:url(../images/page-background.jpg) repeat-x top left !important;
height:100%;
}
#grid-container{
background:#f8f8f8 url(../images/grid-container-bg.gif) repeat-x top left;
padding-top:1px;
}
#grid-container2{
width:1140px;
margin:0px auto;
}
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.clearfix {
display: inline-block;
}
html[xmlns] .clearfix {
display: block;
}
* html .clearfix {
height: 1%;
}
and the html:
<!DOCTYPE HTML>
<html>
<head>
---
</head>
<body>
...
<div id="grid-container" class="clearfix">
<div id="grid">..all kinds of things in here</div>
</div>
The problem is caused by your #grid having a width:1140px.
You need to set a min-width:1140px on the body.
This will stop the body from getting smaller than the #grid. Remove width:100% as block level elements take up the available width by default. Live example: http://jsfiddle.net/tw16/LX8R3/
html, body{
margin:0;
padding:0;
min-width: 1140px; /* this is the important part*/
}
#grid-container{
background:#f8f8f8 url(../images/grid-container-bg.gif) repeat-x top left;
}
#grid{
width:1140px;
margin:0px auto;
}
html, body{
width:100%;
}
This tells the html to be 100% wide. But 100% refers to the whole browser window width, so no more than that.
You may want to set a min width instead.
html, body{
min-width:100%;
}
So it will be 100% as a minimum, bot more if needed.
Remove the width:100%; declarations.
Block elements should take up the whole available width by default.
I'm trying to get a fixed height header and a content area the fills the screen. The content div contains a telerik mvc grid. I've tried a few suggested on stackoverflow but the control that is the content area always seems to size incorrectly because it doesn't take into account the header fixed height, so it will scroll the extra 40px if the header is 40px. Any suggestions?
<div id="header">
</div>
<div id="content">
<telerik mvc grid control>
</div>
Css
html,body
{
margin:0;
padding:0;
height:100%;
}
#header {
position:absolute;
height: 40px;
left:0;
top:0;
width:100%;
background:green;
}
#content {
position: absolute;
top:40px;
left:0;
width:100%;
height:100%;
background:#eee;
}
UPDATE:
Had to manually re-size the grid on load and window re-size.
Add
.ClientEvents(events => events.OnLoad("resizeGrid"))
<script type="text/javascript">
window.onresize = function () {
resizeContentArea($("#Grid")[0]);
}
function resizeGrid(e) {
debugger;
resizeContentArea($("#Grid")[0]);
}
function resizeContentArea(element) {
var newHeight = parseInt($(element).outerHeight(), 10) - parseInt($(".t-grid-header", element).outerHeight(), 10) - parseInt($(".t-grid-pager", element).outerHeight(), 10);
$(".t-grid-content", element).css("height", newHeight + "px");
}
</script>
DEMO
HTML
<div id="wrapper">
<div id="header">HEADER</div>
<div id="content">CONTENT</div>
</div>
CSS
html, body {
height:100%;
margin:0;
padding:0;
}
#wrapper {
width:400px; /*set to desired width*/
height:100%;
margin:auto;
position:relative;
}
#header {
height:40px; /* set to desired height*/
}
#content {
position:absolute;
bottom:0;
top:40px; /*must match the height of #header*/
width:100%;
overflow:auto;
}
You could place the #header element inside of the #content element, the content element will take 100% height.
Here's an example, HTML:
<div id="content">
<div id="header">
Header.
</div>
Content Area.
</div>
CSS:
body,html {
height:100%;
margin:0;
padding:0;
}
#header {
background:#666;
height:30px;
}
#content {
height:100%;
background:#999;
width:100%;
}
Demo:
http://jsfiddle.net/Rz2tN/
With box-sizing you can do like
http://jsfiddle.net/Wener/Vat4C/1/
No matter the header is in wrapper or out of wrapper, it will work.
Only add :
#wrapper
{
box-sizing: border-box;
padding-top: 40px;
margin-top: -40px;
}
#header
{
/* add this if header out of wrapper */
position: relative;
z-index: 9;
}
#content
{
/* remove
position:absolute;
bottom:0px;
top: 40px;*/
/* add */
height: 100%;
}
This is more flexible, the content's position is no absolute, but it need the box-sizing property.
About the box-sizing, I defined less function as fallow:
.box-sizing(#type: content-box) {
-webkit-box-sizing: #type; /* <=iOS4, <= Android 2.3 */
-moz-box-sizing: #type; /* Firefox 1+ */
box-sizing: #type; /* Chrome, IE8+, Opera, Safari 5.1*/
}
.border-box()
{
.box-sizing(border-box);
}
Set the outer to be 100% height, inside make your fixed with header, and auto height for the content should suffice.
to fix the scrolling, take a look at the overflow porperty. visible will prevent scrolling.
Put a 25px top-margin on the content div and make sure the content div does not include the header.
If the content div must include the header, create a new div for your grid using the same properties stated above.
For Vertical Scroll we can use the following and for horizontal scroll just use a div
<div class="DataGridXScroll">
#(Html.Telerik().Grid(listCustomerStatus)
.Name("grvSalesAdjustment")
.DataKeys(keys => keys.Add(k => k.CustCode))
.Columns(column =>
{
})
.Selectable()
.Pageable(page => page.PageSize(100))
.Scrollable(scroll => scroll.Height(300))
)
</div>
add the following CSS
.DataGridXScroll
{
width: 1000px;
overflow-x: scroll;
text-align:left;
}
This is work in Firefox and other browser. For IE just use the following CSS
.t-grid
{
position: static;
overflow:hidden;
}
.t-grid-content
{
overflow-x: hidden;
position:static;
width:100%;
}
.t-grid-header-wrap
{
position:static;
}
.t-grid-content
{
overflow-x: hidden;
}
.t-grid-footer-wrap
{
position:static;
}
This is a very Simple solution and I think every one enjoy it.