I've been fiddling with this the entire day and the closest I got is the following layout that works in Chrome (but not in Firefox).
Is it possible to do without the tables (and without js)?
Is it possible to make it cross-browser(tables or not but no js)?
To see the desired behavior, try changing the height of the window/display box.
Main points are:
1. The layout is always at least the size of the window, but can expand past it if the content on the left pushes it.
2. The scrollable area on the right always takes up the whole interior space, but doesn't expand it, meaning the height of the interior is determined by the left content (or size of window, whichever is larger).
Here is a JSFiddle link: http://jsfiddle.net/BNmJM/
And the code:
<!doctype html>
<html>
<head>
<style type="text/css">
*{
margin: 0;
padding: 0;
border: 0;
}
html, body {
height: 100%;
}
td{
vertical-align:top;
}
#wrapper{
border-collapse: collapse;
border-spacing: 0;
width:500px;
margin:0 auto;
border-left:2px dashed black;
border-right:2px dashed black;
height: 100%;
}
</style>
</head>
<body>
<table id="wrapper">
<tr><td colspan=2 style="height:20px;">
<div style="border-bottom:2px dashed black;height:20px;text-align:center;">header</div>
</td></tr>
<tr>
<td>
<div id="contentLeft" style="height:300px; width:100px;border:6px dashed green;"></div>
</td>
<td style="width:100px;border-left:2px dashed black">
<div style="height:100%;width:100px;overflow-y:scroll;">
<div id="contentRight" style="height:500px; width:60px;border:6px dashed red;"></div>
</div>
</td>
</tr>
<tr><td colspan=2 style="height:20px;">
<div style="border-top:2px dashed black;height:20px;text-align:center;">footer</div>
</td></tr>
</table>
</body>
</html>
This actually seems to work in both the browsers (Chrome and Firefox). You can start from here and tweak accordingly.
<!doctype html>
<html>
<head>
<style type="text/css">
*{
margin: 0;
padding: 0;
border: 0;
}
html, body {
height: 100%;
}
td{
vertical-align:top;
}
#wrapper{
position: absolute;
top 0px;
bottom: 0px;
left: 0px;
right: 0px;
border-collapse: collapse;
border-spacing: 0;
width:500px;
margin:0 auto;
border-left:2px dashed black;
border-right:2px dashed black;
height: 100%;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="left-menu" style="width: 100px; height: 100px; border: 1px solid black; float: left;"></div>
<div id="middle-content" style="width: 100px; height: 100px; border: 1px solid black; float: left;"></div>
<div id="right-scroll" style="width: 100px; height: 100%; overflow-y: scroll; border: 1px solid black; float: left;"></div>
<div style="clear: both;"> </div>
</div>
</body>
</html>
http://jsfiddle.net/cSTzA/5/
Here's a start that works in Chrome and Firefox. It shows a layout that is always 100% with a fixed header and footer, and a scrolling right-hand pane.
Unfortunately it does not account for the left side growing but it should give you some ideas on how to proceed. It is possible but the complete solution isn't coming to me at the moment.
Here are several tricks that I use which may assist you in finding the complete solution:
negative margins
box-sizing
a mix of absolute and relative positioning
a mix of display styles (inline-block can be handy)
Finally figured it out using some box-sizing hacks, thanks to #Tim Medora for the help!
Unfortunately though, box-sizing doesn't work in IE7.
Here is the JSFiddle if anyone needs it: http://jsfiddle.net/vfMNw/
And the code:
<!doctype html>
<html><head>
<style media="screen" type="text/css">
html,
body {
margin:0;
padding:0;
height:100%;
}
#container {
min-height:100%;
position:relative;
}
#header {
position:absolute;
z-index:2;
background:#ff0;
padding:10px;
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box;
height:70px;
width:100%;
}
#body {
padding:10px;
padding-bottom:60px; /* Height of the footer */
}
#body1 {
height: 100%;
background-color: #aaa;
position: absolute;
border-top: 70px solid black;
top: 0;
border-bottom: 50px solid black;
overflow-y: scroll;
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box;
right: 0;
width:100px;
}
#footer {
position:absolute;
bottom:0;
width:100%;
height:50px; /* Height of the footer */
background:#6cf;
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box;
}
/* other non-essential CSS */
#header p,
#header h1 {
margin:0;
padding:10px 0 0 10px;
}
#footer p {
margin:0;
padding:10px;
}
</style>
<!--[if lt IE 7]>
<style media="screen" type="text/css">
#container {
height:100%;
}
</style>
<![endif]-->
</head>
<body>
<div id="container">
<div id="header">
<h1>How to keep footers at the bottom of the page (CSS demo)</h1>
</div>
<div id="body">h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br></div>
<div id="body1">
h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>
</div>
<div id="footer">
<p><strong>Footer</strong> (always at the bottom). View more website layouts and web design articles.</p>
</div>
</div>
</body>
</html>
Related
HTML:
<html>
<head>
<title>Parallax</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav>
<br><br>
</nav>
<h2>One ring to rule them all</h2>
<button>View Our Work</button>
</body>
</html>
CSS:
*
{
margin: 0;
}
body
{
background-image: url("background.jpg");
color: white;
font-family: Helvetica;
padding: 0;
}
h2
{
font-family: "Kingthings Calligraphica";
font-size: 30pt;
text-align: center;
margin-top: 30%;
}
nav
{
border: 1px solid red;
position: fixed;
padding: 10px 20px;
width: 100%;
top: 0;
}
nav div
{
float: left;
height: 100%;
width: 20%;
background-color: rgba(0,0,0,0.6);
transition: background-color 0.5s;
}
nav div:hover
{
background-color: rgba(0,0,0,0);
cursor: pointer;
}
button
{
border: 1px solid white;
border-radius: 3px;
background-color: rgba(0,0,0,0);
color: white;
padding: 10px 20px;
width: 100%;
}
Result:
Why does the nav go off the screen but the button doesn't?
That's cause you use
width:100%;
and
border: 1px solid red;
which equals to
100% + 2px;
than you also add padding
and it just adds to the math.
This will work: http://jsbin.com/vubug/2/edit
nav{
box-shadow: inset 0 0 0 1px red;
position: fixed;
width:100%;
top: 0;
}
To let the browser do the math you can also use the calc CSS property. (*2014 still experimental)
Also worth to note: action elements (input, button etc) act differently across browsers and even OS. The padding applied to a 100% width button is applied inwards, while applied to a 100% width block level DIV element it acts outwards adding to the set width.
One of the logic reasons is that you cannot have block-level elements inside the <button></button> (and have a valid markup) that will allow you to use that element's padding instead, so browsers try to compensate that applying the padding in the inner button's space. TEST CASE
Using CSS3 box-sizing: border-box ;
DEMO
<div id="widthAuto">DIV {width: auto;}</div> <!-- DESIRED -->
<div id="width100">DIV {width: 100%;}</div> <!-- OVERFLOWS -->
<div id="fixed">DIV {position:fixed;}</div> <!-- LOOSES WIDTH -->
<div id="fixed_width100">DIV {position:fixed; width:100%;}</div> <!-- OVERFLOWS -->
<div id="fixed_width100_boxSizing">DIV {position:fixed; width:100%; box-sizing: border-box;}</div>
CSS:
div{
background:#ddd;
border:10px solid red;
padding:10px;
margin-bottom:5px;
font-family:monospace;
}
div[id^=fi]{border-color:blue}
#widthAuto{
width:auto;
}
#width100{
width:100%;
}
#fixed{
position:fixed; /* Not in flow and looses the "auto" width :( */
/*just for preview*/ top:200px;
}
#fixed_width100{
position:fixed;
width: 100%; /* same issue as #width100 */
/*just for preview*/ top:300px;
}
#fixed_width100_boxSizing{
position:fixed;
width:100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
/*just for preview*/ top:400px;
}
Simplest solution
Or simply use the fixed element as a 100% width dummy wrapper and apply padding, border, whatever you need to an inner element. That's the way I do.
I can't seem to be able to wrap my mind around this one.
It seems that by adding some padding (padding-left: 3px) to my textarea, and it pushes it right out of my div with the border. Adding some padding for text inside the summary box would be useful as it would be more legible to the user.
Here is the result:
This is what it should look like:
Here is the HTML / CSS markup:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
.fcontent_text {
font-size: 8.5pt;
text-align: right;
color: rgb(11,63,113);
}
#fcontent_container {
width: 800px;
display: block;
position: relative;
margin: 5px;
}
#fcontent_wrapper {
border: 1px solid rgb(128,128,128);
}
#summary {
width: 100%;
margin: 0;
border: 0;
position: relative;
padding-left: 3px;
height: 50px;
}
</style>
</head>
<body>
<div id="fcontent_container">
<div class="fcontent_text">Summary</div>
<div id="fcontent_wrapper"><textarea class="normal" id="summary"></textarea></div>
</div>
</body>
</html>
Add box-sizing: border-box to #summary so that you can set both width: 100% and left and right padding without the contents spilling over into the container.
box-sizing
border-box
The width and height properties include the padding and border, but not the margin. This is the box model used by Internet Explorer when the document is in Quirks mode.
For cross-browser compatibility, be sure to include prefixes:
#summary {
width: 100%;
margin: 0;
border: 0;
position: relative;
padding-left: 3px;
height: 50px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
Using box-sizing
You can use box-sizing: border-box;
Check this out: http://codepen.io/gopkar/pen/HiEjn
Without box-sizing
Change the width of your textarea from width: 100% to width: 795px;
Have a look at http://codepen.io/gopkar/pen/csxKo
width = <div-width> - <padding-you-have-given>
For some odd reason this solution seems to circumvent everything and works flawlessly:
<div style="width: 800px">
<div style="text-align: right;">Expand</div>
<div style="padding-right: 6px;">
<textarea style="width: 100%; padding: 2px; margin: 0; border : solid 1px #999"></textarea>
</div>
</div>
I have the following html:
<!DOCTYPE html>
<html>
<head>
<title>JBA</title>
<style type="text/css">
body {
margin:0;
padding:0;
}
#layout {
float: left;
}
#title {
padding: 10px;
border: 1px solid #ccc;
position: relative;
}
#content {
position: absolute;
top: 26px;
left: 0;
right: 0;
bottom: 0;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<div id="layout">
<label id="title">Below is content:</label>
<div id="content">
</div>
</div>
</body>
<script>
</script>
</html>
What I need is to position #content div right below the #title label. However, float and position settings shouldn't be changed. So, how to calculate #content's top? 26px seems to work for Chrome but, for IE it needs to be 28px. Why?
give position relative to the "#layout" div
#layout {
float: left;
position:relative;
}
I have tested it in chromium as well as IE9. For both position top: 28 is working properly. Screenshot is attached.
Are you expecting something like this LINK
some changes in your CSS :
body {
margin:0;
padding:0;
}
#layout {
float: left;
}
#title {
padding: 5px;
border: 1px solid #ccc;
float:left;
}
#content {
clear:both;
width:400px;
height:400px;
border: 1px solid #ccc;
}
You should set padding and margin to 0 on #content since browsers render this differently (Even though it´s not set).
Why in the following code there is no bottom padding in Internet Explorer 8 ?
HTML:
<div id="wrapper">
<div class="a">Hello</div>
<div class="a">Stack</div>
<div class="a">Overflow</div>
</div>
CSS:
#wrapper {
border: 1px solid red;
padding: 10px;
height: 30px;
overflow: auto;
}
.a {
border: 1px solid black;
}
Any workarounds for browser compatibility ?
browser interpretation of the specs?
A value of 'scroll' would tell UAs
that support a visible scrolling
mechanism to display one so that users
could access the clipped content.
Taken literally that means they, the browsers, can please themselves and they only have to provide access to the content not the padding or borders ;)
a compatible workaround:
#scroller {
border: 1px solid red;
height: 50px;
overflow: auto;
}
.wrap {padding: 10px;}
.a {
border: 1px solid black;
}
HTML:
<div id="scroller">
<div class="wrap">
<div class="a">Hello</div>
<div class="a">Stack</div>
<div class="a">Overflow</div>
</div>
</div>
How about going dirty? (Heck, I'm a programmer, not a designer lol).
<style type="text/css">
#wrapper {
border: 1px solid red;
padding: 10px;
height: 30px;
overflow: auto;
}
.a {
border: 1px solid black;
}
.b {
display:none;
}
</style>
<!--[if IE 8]>
<style type="text/css">
.b {
display:block;
height: 10px;
}
</style>
<![endif]-->
And:
<div id="wrapper">
<div class="a">Hello</div>
<div class="a">Stack</div>
<div class="a">Overflow</div>
<div class="b"></div>
</div>
:D
Read this post i think it will be helpful it did the trick for me
add display: block; to #wrapper {} - I had exactly the same issue, with this added padding-bottom started to work properly under IE8 and other browsers was not affected (keep the proper output)
You can add a pseudo-element «after» only for IE8:
<!--[if IE 8]>
<style type="text/css">
#wrapper:after {
content: '';
display: block;
height: 10px;
}
</style>
<![endif]-->
I'd like to have a [Fixed][Liquid][Fixed] cross-browser compatible layout.
HTML:
body
div#col-1
div#col-2
div#col-3
CSS:
#col-1 {
width:150px;
float:left;
}
#col-2 {
width:100%;
padding:0 150x;
}
#col-3 {
positon:absolute:
right:0;
width:150px;
}
Would this work/better way to do it?
This is pretty simple.
here is the code
<html>
<head>
<style type="text/css">
#left {
float: left;
width: 150px;
border: 1px solid black;
background-color: #999;
height: 50px;
}
#right {
float: right;
width: 150px;
border: 1px solid black;
background-color: #999;
height: 50px;
}
#center {
/* margin with 10px margin between the blocks*/
margin: 0 160px;
border: 1px solid black;
height: 50px;
}
</style>
</head>
<body>
<div id="left">Text</div>
<div id="right">Text</div>
<div id="center">Text</div>
</body>
</html>
I'm using floats instead of position absolute. The advantage of using floats above absolute positioning is that you can put a nother div beneath it, lets say the footer. And just give it a clear: both and it will automatically display at the bottom of the page.
here is an example with a footer
<html>
<head>
<style type="text/css">
#left {
float: left;
width: 150px;
border: 1px solid black;
background-color: #999;
height: 50px;
}
#right {
float: right;
width: 150px;
border: 1px solid black;
background-color: #999;
height: 50px;
}
#center {
/* margin with 10px margin between the blocks*/
margin: 0 160px;
border: 1px solid black;
height: 50px;
}
#footer {
clear: both;
margin-top: 10px;
border: 1px solid black;
}
</style>
</head>
<body>
<div id="left">Text</div>
<div id="right">Text</div>
<div id="center">Text</div>
<div id="footer">footer</div>
</body>
</html>
Voila! You've got your liquid layout.
check this out:
http://siteroller.net/articles/3-column-no-tables-no-floats
But no,I don't think that would work. There are plenty of links in said article though to address your issue.
And if there is any interest, I will extend what is written there.
Okay, got it: http://www.dynamicdrive.com/style/layouts/item/css-liquid-layout-31-fixed-fluid-fixed/
I like Robert's answer. I would also add a wrapper around the left, right, center and footer. Here, I set the id to "page":
<body>
<div id="page">
<div id="left">Text</div>
<div id="right">Text</div>
<div id="center">Text</div>
<div id="footer">footer</div>
</div>
</body>
Then, you can also add the style for the "page":
#page {
min-width: 600px;
}
This way, if the user shrinks their browser down to a very small size, the content still looks good.