I need your help,
How can the existing code below be modified such that the height of my css boxes are then liquified (as it needs to be this way to adjust to the height of my users screen resolution)?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
* { margin:0; padding: 0 }
#container {
width: 100%;
margin: 0 auto;
}
#primary {
float: left;
width: 10%;
background: red;
height: 600px;
}
#content {
float: left;
width: 80%;
background: blue;
height: 600px;
}
#secondary {
float: left;
width: 10%;
background: green;
height: 600px;
}
</style>
</head>
<body>
<div id="container">
<div id="primary">
<p>left</p>
</div>
<div id="content">
<p>center</p>
</div>
<div id="secondary">
<p>right</p>
</div>
</div>
</body>
</html>
Equal height columns can easily be achieved by using the table* display properties.
http://cssdeck.com/labs/2iy6anjy
#container {
display: table;
width: 100%;
margin: 0 auto;
}
#primary {
display: table-cell;
width: 10%;
background: red;
}
#content {
display: table-cell;
width: 80%;
background: blue;
}
#secondary {
display: table-cell;
width: 10%;
background: green;
}
Have a look at the jQuery Equal Heights plugin by Filament:
https://github.com/filamentgroup/jQuery-Equal-Heights
Initialise it:
$('#container div').equalHeights();
remove fixed height and give overflow:hidden
Related
How can I tell a div to use the entire area marked with the red arrows no matter the size of the browser and no matter the div contents?
I tried: <div style='height:100%;width:'100%'>...</div> but it only takes the horizontal area, not the vertical. Is there a way to do this?
Check out this Fiddle
https://jsfiddle.net/o7u9hxou/
html
<body>
<div id="sidebar"></div>
<div id="wrapper">
<div id="topbar"></div>
<div id="else"></div>
</div>
</body>
css
body {
box-sizing: border-box;
height: 100vh;
margin: 0px;
padding: 0px;
}
#else {
background-color: green;
height: 90vh;
}
#sidebar {
background-color: pink;
display: inline-block;
float: left;
height: 100%;
min-width: 50px;
width: 10%;
}
#topbar {
background-color: yellow;
height: 10vh;
min-height: 20px;
}
#wrapper {
display: inline-block;
float: right;
height: 100%;
width: 90%;
}
I want to create container that has two elements with colors given in the picture. The two are different divs and must stay side by side. How do I do it?
Here is my code:
<html>
<head>
<title>Testing</title>
<style>
.container{
width: 50%;
height: 50%;
}
.sidenav{
width: 25%;
height: 100%;
background-color: black;
}
.bgrnd{
width: 75%;
height: 100%;
background-color: blue;
float: left;
}
</style>
</head>
<body>
<div class="container">
<div class="sidenav">
</div>
<div class="bgrnd">
</div>
</div>
</body>
</html>
You didn't set a height on the body of the document so setting a percentage on the divs won't do anything until you do. You also needed to float the sidenav div.
.container {
width: 50%;
height: 50%;
}
.sidenav {
width: 25%;
height: 100%;
background-color: black;
float: left
}
.bgrnd {
width: 75%;
height: 100%;
background-color: blue;
float: left;
}
html,
body {
height: 100%;
}
<div class="container">
<div class="sidenav">
</div>
<div class="bgrnd">
</div>
</div>
Your code Updated!
body, html{
padding:0px;
margin:0px;
height:100%;
}
.container{
width: 50%;
height: 50%;
}
.sidenav{
width: 25%;
height: 100%;
background-color: black;
float: left;
}
.bgrnd{
width: 75%;
height: 100%;
background-color: blue;
float: left;
}
<div class="container">
<div class="sidenav"></div>
<div class="bgrnd"></div>
</div>
How about this:
<div class="container">
<div class="sidenav">
test
</div>
<div class="bgrnd">
test
</div>
</div>
CSS:
.container {
width: 50%;
height: 50%;
}
.sidenav {
width: 25%;
height: 100%;
background-color: black;
color: #fff;
float: left;
}
.bgrnd {
width: 75%;
height: 100%;
background-color: blue;
color: #fff;
float: right;
}
You can set .sidenav and .bgrnd to position: absolute; and position them accordingly from there. Also, you've set .container to: width: 50%; and height: 50%; which I presume you don't want.
.container {
height: 100%;
width: 100%;
}
.sidenav {
width: 25%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background-color: black;
}
.bgrnd {
width: 75%;
height: 100%;
position: absolute;
top: 0;
left: 25%;
background-color: blue;
}
<!DOCTYPE html>
<html>
<head>
<title>Testing</title>
</head>
<body>
<div class="container">
<div class="sidenav"></div>
<div class="bgrnd"></div>
</div>
</body>
</html>
How about using css-flex.
#main {
width: 100%;
border: 1px solid #c3c3c3;
display: -webkit-flex; /* Safari */
-webkit-flex-direction: row-reverse; /* Safari 6.1+ */
display: flex;
flex-direction: row-reverse;
}
.div1 {
width: 25%;
height: 50px;
}
.div2 {
width: 75%;
height: 50px;
}
<div id="main">
<div class="div1" style="background-color:coral;">A</div>
<div class="div2" style="background-color:lightblue;">B</div>
</div>
I have a very not typical site where content is aligned by the middle of screen I mean vertically and horizontally, for getting this result used vertical-align: middle; for each item and for the main container
text-align: center; height: calc(100% - header - footer ))
but when the user is changing size
for the window the footer is also change his position but should not do it
Js fiddle
https://jsfiddle.net/hm97o1sa/
is there any way to fix it without "flex" ?
updated:
expected behavior
scrolled to the top
scrolled to the bottom
A possible solution would be to use calc together with Viewport units vh.
With calc(), you can perform calculations to determine CSS property values.
With Viewport units, you can get work with Viewport size, for example in this case 100% of the Viewport height (vh).
html,
body {
margin: 0;
padding: 0;
height: 100%;
}
#header {
height: 100px;
background: blue;
}
#content {
height: calc(100vh - 150px);
min-height: 250px;
text-align: center;
}
#vert-align {
display: inline-block;
height: 100%;
vertical-align: middle;
}
#item_1 {
background: yellow;
height: 250px;
width: 250px;
display: inline-block;
vertical-align: middle;
margin-right: 50px;
}
#item_2 {
background: red;
height: 250px;
width: 250px;
display: inline-block;
vertical-align: middle;
}
#footer {
height: 50px;
background: green;
}
<div id="header">HEADER</div>
<div id="content">
<div id="vert-align"></div>
<div id="item_1"></div>
<div id="item_2"></div>
</div>
<div id="footer">FOOTER</div>
Modify your CSS and your Final code will be:
html, body {
margin: 0;
padding: 0;
height: 100%;
}
#header {
height: 100px;
background: blue;
}
#content {
height: calc(100% - 150px);
text-align: center;
overflow-y: auto;
}
#vert-align {
display: inline-block;
height: 100%;
vertical-align: middle;
}
#item_1 {
background: yellow;
height: 250px;
width: 250px;
display: inline-block;
vertical-align: middle;
margin-right: 50px;
}
#item_2 {
background: red;
height: 250px;
width: 250px;
display: inline-block;
vertical-align: middle;
}
#footer {
height: 50px;
background: green;
}
<!DOCTYPE html>
<html>
<head>
<title>TA</title>
</head>
<body>
<div id="header">HEADER</div>
<div id="content">
<div id="vert-align"></div>
<div id="item_1"></div>
<div id="item_2"></div>
</div>
<div id="footer">FOOTER</div>
</body>
</html>
A quick fix is to apply a min-height: 250px on your #content
#content {
height: calc(100% - 150px);
min-height: 250px;
text-align: center;
}
Okay so I asked a question earlier on:
How to make a div fill the remaning vertical space using css
got an answer which Ive now been playing around with:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css" media="screen">
html, body{
padding: 0;
margin: 0 auto;
height: 100%;
}
#header {
float: top;
width: 100%;
height: 15%;
background-color: green;
}
#navbar {
float: left;
width: 20%;
height: 70%;
background-color: red;
}
#content {
float: right;
width: 80%;
height: 70%;
background-color: blue;
}
#footer {
float: bottom;
width: 100%;
height: 15%;
background-color: yellow;
}
</style>
</head>
<body>
<div id="header"> Header </div>
<div id="navbar"> Nav Bar </div>
<div id="content"> Body </div>
<div id="footer"> Footer</div>
</body>
</html>
Now ultimatley Id want to achieve this:
in which it covers 100% of the screen but I can choose how those percentages are spread i.e:
html, body{
padding: 0;
margin: 0 auto;
height: 100%;
}
#header {
float: top;
width: 100%;
height: 15%;
background-color: green;
}
#navbar {
float: left;
width: 20%;
height: 70%;
background-color: red;
}
#content {
float: right;
width: 80%;
height: 70%;
background-color: blue;
}
#footer {
float: bottom;
width: 100%;
height: 15%;
background-color: yellow;
}
As you can html and body have a height of 100% thus filling the screen. The header has a height percentage of 15% the nav bar and body have a percentage of 70% and the footer 15% which in total would make up the 100% of the visible screen...
Now everything seems fine except for my footer:
#footer {
float: bottom;
width: 100%;
height: 10%;
background-color: yellow;
}
if I remove height: 15% then I can see my background color of yellow:
if I dont its some greyish color. and looks to take up about 20% of the screen:
So basically how would I get my divs to take up the correct height percentage I assigned them?
I hope Im making sense.
Thanks in advance.
You can't float to top or bottom. That doesn't exist. So you have to remove that from your header and footer.
And clear the footer by doing:
footer {
clear: both;
}
your problem is that there is no:
float:top;
or
float:bottom;
What you need to do is make them both float:left;
here is a copy and paste of your code with the update:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css" media="screen">
html, body{
padding: 0;
margin: 0 auto;
height: 100%;
}
#header {
float: left;
width: 100%;
height: 15%;
background-color: green;
}
#navbar {
float: left;
width: 20%;
height: 70%;
background-color: red;
}
#content {
float: right;
width: 80%;
height: 70%;
background-color: blue;
}
#footer {
float: left;
width: 100%;
height: 15%;
background-color: yellow;
}
</style>
</head>
<body>
<div id="header"> Header </div>
<div id="navbar"> Nav Bar </div>
<div id="content"> Body </div>
<div id="footer"> Footer</div>
</body>
</html>
How to do to avoid having the scroller with a sticky footer to the bottom of the page (not bottom of window)?
When I remove height=100% from content and sidebar, I'm no more getting the scroller. However, when doing so, my content and sidebar do not fill all the space down to the footer.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Untitled 13</title>
<style media="all" type="text/css">
* {
margin: 0;
padding: 0;
}
html, body, #wrap, form {
height: 100%;
}
#wrap, #footer {
width: 750px;
margin: 0 auto;
}
#wrap {
background: #cff;
}
html, body {
color: #000;
background: #a7a09a;
}
body > #wrap {
height: 100%;
min-height: 100%;
}
form {
/*height: auto;*/
min-height: 100%;
}
#main {
background: #000;
height:100%;
min-height:100%;
height: auto !important; */
}
#content {
height:100%;
float: left;
padding: 10px;
float: left;
width: 570px;
background: #9c9;
}
#sidebar {
height:100%;
float: left;
width: 140px;
background: #c99;
padding: 10px;
}
#footer {
position: relative;
margin-top: -100px;
height: 100px;
clear: both;
background: #cc9;
bottom: 0;
}
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
display: inline-block;
}
* html .clearfix {
height: 1%;
}
.clearfix {
display: block;
}
#header {
/*padding: 5px 10px;*/
background: #ddd;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div id="wrap">
<div id="main" class="clearfix">
<div id="header">
<h1>header</h1>
</div>
<div id="sidebar">
<h2>sidebar</h2>
</div>
<div id="content">
<h2>main content</h2>
</div>
</div>
</div>
<div id="footer">
<h2>footer</h2>
</div>
</form>
</body>
</html>
Here is finally one solution (I don't remember where I get this code .... it's not mine ;-) ) :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="Content-Type">
<title>CSS Layout - 100% height</title>
<style type="text/css">
html, body {
margin: 0;
padding: 0;
height: 100%; /* needed for container min-height */;
background: gray;
font-family: arial,sans-serif;
font-size: small;
color: #666;
}
div#container {
position: relative; /* needed for footer positioning*/;
margin: 0 auto;
/* center, not in IE5 */ width: 750px;
background: #f0f0f0;
height: auto !important; /* real browsers */;
height: 100%; /* IE6: treaded as min-height*/;
min-height: 100%; /* real browsers */
}
div#header {
padding: 1em;
/*background: #ddd url("../csslayout.gif") 98% 10px no-repeat;*/
border-bottom: 6px double gray;
}
div#content {
padding: 1em 1em 5em; /* bottom padding for footer */
}
div#footer {
position: absolute;
width: 100%;
bottom: 0; /* stick to bottom */;
background: #ddd;
border-top: 6px double gray;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
entete </div>
<div id="content">
contenu </div>
<div id="footer">
pied de page
</div>
</div>
</body>
</html>
I've done this using a container div with a 100% min-height. Then, I have the page content and footer div's in the container. Here's my HTML:
<div id="MainContainer">
<div id="FullPage">
</div>
<div id="Footer">
</div>
</div>
And here's my corresponding CSS:
html, body, #MainContainer
{
min-height: 100%; /*Sets the min height to the height of the viewport.*/
height: 100%; /*Effectively, this is min height for IE5+/Win, since IE wrongly expands an element to enclose its content. This mis-behavior screws up modern browsers*/
margin: 0;
padding: 0;
}
html > body #MainContainer
{
height: auto; /*this undoes the IE hack, hiding it from IE using the child selector*/
}
#MainContainer
{
position: absolute;
top: 0;
left: 0;
width: 100%;
}
#FullPage
{
height: auto;
width: 100%;
min-height: 100%;
margin: 0;
padding: 0 0 25px 0;
overflow: hidden;
}
#Footer
{
clear: both;
left: 0;
width: 100%;
height: 20px;
position: absolute;
bottom: 0;
}