<html style="margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;">
<body style="height:100%;width:100%;">
<div style="height:20px;background-color:red;"></div>
<div style="background-color:black;"></div>
<div style="height:20px;background-color:blue;"></div>
</body>
</html>
How can I make the second div stretch to fill remaining space (after placing the first and third div) in the body?
If you want the stick footer system, then use this technique:
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -20px;
}
.footer, .push {
height: 20px;
}
http://ryanfait.com/resources/footer-stick-to-bottom-of-page/
If I understand your intent properly (who knows..):
Live Demo (edit)
HTML:
<div id="top"></div>
<div id="mid"></div>
<div id="bot"></div>
CSS:
html, body {
margin: 0;
padding: 0;
border: 0;
}
body {
color: #fff
}
#top, #mid, #bot {
position: absolute;
width: 100%
}
#top {
height: 20px;
background: red;
top: 0;
}
#mid {
background: #000;
top: 20px;
bottom: 20px
}
#bot {
height: 20px;
background: blue;
bottom: 0
}
Use all % or all pixels(find screen pixel height in js)
<html style="margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;">
<body style="height:100%;width:100%;">
<div style="height:3%;background-color:red;"></div>
<div style="background-color:black; height:94%;"></div>
<div style="height:3%;background-color:blue;"></div>
</body>
</html>
Other perfect answer derived from above answer
<html >
<style type="text/css">
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -20px;
}
.footer, .push {
height: 20px;
}
.header {
height: 20px;
}
</style>
<body >
<div class="wrapper" style="background-color:#ffcc00">
<div class="header" style="background-color:#cccccc"></div>
<div class="push"></div>
</div>
<div class="footer" style="background-color:#cccccc"></div>
</body>
</html>
Related
I've been struggling with this for hours and cannot find the solution. I've made a simple layout to display two pairs of gauge+thermometer visualizations to show the temperatures uploaded by ESP8266. The basic layout is:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>The title</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container_main">
<div id="heading"><h1>The title</h1></div>
<div class="graph">
<div id="container">
<div id="inner">
<div id="gauge_div"></div>
<div class="below_gauge">Text #1</div>
<div class="below_gauge2">Here I would like to display some text but would not like the left square to be misaligned with the right one.</div>
</div>
<div id="thermometer">
<canvas id="termometar_cnv" width="160" height="600"></canvas>
</div>
<div id="inner2">
<div id="gauge2_div"></div>
<div class="below_gauge">Text #2</div>
</div>
<div id="thermometer2">
<canvas id="termometar2_cnv" width="160" height="600"></canvas>
</div>
</div>
<div id="below">Description.
</div>
</div>
</div>
</body>
</html>
body {
background-color: #ddd;
}
h1 {
color: #FFFFFF;
background-color: #0000FF;
padding: 5px;
}
#container {
height: 100%;
width: 100%;
display: table;
}
#inner {
vertical-align: middle;
display: table-cell;
}
#inner2 {
vertical-align: middle;
display: table-cell;
}
#gauge_div {
width: 240px;
height: 240px;
margin: 0 auto;
background-color: green;
}
#gauge2_div {
width: 240px;
height: 240px;
margin: 0 auto;
background-color: green;
}
#heading {
width: 100%;
margin: 0 auto;
text-align: center;
color: blue;
}
#below {
margin: 0 20px;
text-align: center;
color: blue;
}
.graph {
margin: 0 auto;
padding: 10px 0;
text-align: center;
color: blue;
border: thin solid #00F;
}
#container_main {
padding-right: 100px;
padding-left: 100px;
}
#thermometer {
margin: 0 auto;
padding: 10px 0px 10px 0;
background-color: gray;
}
#thermometer2 {
margin: 0 auto;
padding: 10px 20px 10px 0;
background-color: gray;
}
.below_gauge {
font-weight: bold;
color: blue;
}
.below_gauge2 {
width: 240px;
margin: 0 auto;
color: blue;
}
When <div class="below_gauge2"> is removed from the HTML the layout is exactly how I would like it to be. However, after adding that DIV, the green div moves up so it is not anymore vertically aligned with the second green div at the right.
What can be done so <div class="below_gauge2"> would be displayed below the left green DIV, but in a such way the green DIV would stay where it was before adding the <div class="below_gauge2">?
check this fiddle
#inner {
vertical-align: middle;
display: table-cell;
//added
position: relative;
}
.below_gauge2 {
width: 240px;
margin: 0 auto;
color: blue;
//added
position: absolute;
left: 0;
right: 0;
margin: auto;
}
I tried css stylesheet reset which didn't do anything, and other solutions but to no fix. Margins are set to 0 on container and there is still a margin on the right hand side. If i disable the margin left 0 the extra whitespace appears on the left side. Thanks in advance.
body {
padding-top: 50px;
}
.container {
overflow: hidden;
margin-left: 0 auto;
margin-right: 0 auto;
padding: 0 0 0 0;
}
#content {
overflow: auto;
background-color: #FFFFFF;
margin-left: 0;
margin-right: 0;
}
#content-left {
color: #FFFFFF;
float: left;
background-color: #666666;
width: 30%;
}
#content-right {
color: #FFFFFF;
float: right;
background-color: #333333;
width: 70%;
}
<body>
<div class="container" id="main">
<div id="content">
<div id="content-left">
<div>LEFT</div>
</div>
<div id="content-right">
<div>RIGHT</div>
</div>
</div>
</div>
</body>
Set the margin for all elements to 0px, this will remove the extra margin
* {
margin: 0px;
}
Also add width: 100% to your .container
Note: Add this as the first style in your CSS. This can be overridden by the styles specified below.
Below is an update to your code.
* {
margin: 0px;
}
body {
padding-top: 50px;
}
.container {
width: 100%;
overflow: hidden;
margin-left: 0 auto;
margin-right: 0 auto;
padding: 0 0 0 0;
}
#content {
overflow: auto;
background-color: #FFFFFF;
margin-left: 0;
margin-right: 0;
}
#content-left {
color: #FFFFFF;
float: left;
background-color: #666666;
width: 30%;
}
#content-right {
color: #FFFFFF;
float: right;
background-color: #333333;
width: 70%;
}
<body>
<div class="container" id="main">
<div id="content">
<div id="content-left">
<div>LEFT</div>
</div>
<div id="content-right">
<div>RIGHT</div>
</div>
</div>
</div>
</body>
Setting the width of the #content div to 100% will fix your problem. It's not a margin issue. For the width % to work on the inner divs, it needs a container width to base off of.
#content{
overflow: auto;
background-color:#FFFFFF;
margin-left: 0;
margin-right: 0;
width: 100%;
}
Trying to get the left box at 62% of the width to the left and the right box at 38%. Where ever I add the percentages, they still sit at 50%. Any ideas? Thank you for any help/advice you can share.
<!DOCTYPE html>
<html>
<head>
<style>
#sides {
display: flex;
padding: 0px 0px;
background-color: white;
}
.sideleft {
flex: 1;
padding: 20px;
margin: 0;
}
.sideright {
flex: 1;
padding: 20px;
margin: 0;
}
#left {
background-color: #333333;
}
#right {
background-color: #018DCA;
}
h1 {
color: #FFFFFF;
}
h2 {
color: #FFFFFF;
}
</style>
</head>
<body>
<div id="sides">
<div class="sideleft" id="left" align="right">
<h1>text</h1>
<h2>text</h2>
</div>
<div class="sideright" id="right">
<h1>text</h1>
<h2>text</h2>
</div>
</div>
</body>
</html>
flex property is the combination of flex-grow: flex-shrink: flex-basis: ,
so to set width you need to set flex-basis:
for ex.: flex: 0 1 38%;
fiddle
You just have to make the left and right side, float left and have display:inline-block here is the css with it working. You also have to set your container div in this case sides to 100%
#sides {
display: flex;
width: 100%;
background-color: white;
margin: 0px;
}
.sideleft {
flex: 1;
width: 62%;
margin: 0px;
display: inline-block;
float: left;
}
.sideright {
flex: 1;
width: 38%;
margin: 0px;
display: inline-block;
float: left;
}
Try this please:
<!DOCTYPE html>
<html>
<head>
<style>
#sides {
padding: 0px 0px;
background-color: white;
}
.sideleft {
flex: 1;
padding: 00px;
margin: 0;
}
.sideright {
flex: 1;
padding: 00px;
}
#left {
background-color: #333333;
}
#right {
background-color: #018DCA;
}
h1 {
color: #FFFFFF;
}
h2 {
color: #FFFFFF;
}
</style>
</head>
<body>
<div id="sides">
<div class="sideleft" id="left" style=" width:62%">
<h1>text</h1>
<h2>text</h2>
</div>
<div class="sideright" id="right" style=" width:38%; margin-left:62%">
<h1>text</h1>
<h2>text</h2>
</div>
</div>
</body>
</html>
css width box
Yeah I know the topic was explained probably million times, but have a look at this. I cant make #content and/or .content-bg go all the way down and show the pattern down to the bottom:
html, body {
height: 100%;
}
body {
min-width: 500px;
margin: 0px;
padding: 0px;
}
#wrapper {
position: relative;
width: 100%;
min-height: 100%;
height: auto !important;
margin: 0px auto -97px;
}
#header {
width: 100%;
height: 100px;
position: relative;
background-color: #ccc;
}
#content {
min-height: 100%;
}
.content-bg {
background: url("http://www.squidfingers.com/_patterns/files/pattern_136.gif") repeat scroll 0% 0% #F9EDE4;
overflow: hidden;
}
#footer {
background-color: #ccc;
height: 97px;
}
<body>
<div id="wrapper">
<div id="header">
header content
</div>
<div id="content">
<div class="content-bg">
content
</div>
</div>
</div>
<div id="footer">
footer content
</div>
</body>
Any ideas?
I've been trying various techniques to implement Ryan Fait's Sticky Footer technique and none seem to work. My footer content always overlaps my main content when the browser is vertically challenged. It could be because I have many fixed positioned DIVs nested within the footer. When I wrap these DIVs around a parent DIV (#footer), this parent DIV doesn't seem to even appear, nor can I apply styles to it to control its position (and the content within).
HTML:
<body>
<div class="wrapper">
<div id="content"> Juicy stuff goes here</div>
<div class="push"></div>
<div class="footer">
<div id="print_blank"></div>
<div id="logo"></div>
<div id="nav_bar"></div>
<div id="footerarea">Contains other Text</div>
</div><!-- Footer Area -->
</body>
CSS:
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -240px;
}
.footer, .push {
height: 240px;
}
#print_blank {
padding-top: 0px;
bottom: 160px;
position: fixed;
z-index: 11000;
width: 100% !important;
text-align: center;
min-width: 980px;
}
#logo {
width: 180px;
padding-top: 5px;
bottom: 86px;
position: fixed;
z-index: 9999999;
left: 45px;
}
#nav_bar {
padding-top: 0px;
bottom: 77px;
position: fixed;
z-index: 99999;
width: 100% !important;
text-align: center;
min-width: 980px;
}
#footerarea {
bottom: 0px;
position: fixed;
width: 100%;
padding-top: 20px;
background-color: #F16924;
height: auto;
text-align: justify;
min-width: 960px;
z-index: 999999;
}
Thanks!
This is a better way to do it:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style media="all">
html, body {height: 100%; margin: 0; padding: 0;}
* html #outer {/* ie6 and under only*/
height:100%;
}
.wrapper {
min-height: 100%;
margin: -240px auto 0;
}
.content {padding-top: 240px;}
.footer {
height: 240px; background: #F16924;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="content">Juicy stuff goes here</div>
<div class="push"></div>
<!-- end wrapper --></div>
<div class="footer"></div>
</body>
</html>
The limitation of sticky footers is that the footer must stay at a fixed height. But the elements you have in there shouldn't affect the layout as long as you are careful.
EDIT: Here's a revised template with the footer elements included:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style media="all">
html, body {height: 100%; margin: 0; padding: 0;}
* html #outer {/* ie6 and under only*/
height:100%;
}
.wrapper {
min-height: 100%;
margin: -240px auto 0;
}
.content {padding-top: 240px;}
.footer {
height: 240px; background: #F16924; position: relative;
}
#print_blank {
padding-top: 0px;
bottom: 160px;
position: absolute;;
z-index: 11000;
width: 100% !important;
text-align: center;
min-width: 980px;
}
#logo {
width: 180px;
padding-top: 5px;
bottom: 86px;
position: absolute;;
z-index: 9999999;
left: 45px;
}
#nav_bar {
padding-top: 0px;
bottom: 77px;
position: absolute;;
z-index: 99999;
width: 100% !important;
text-align: center;
min-width: 980px;
}
#footerarea {
bottom: 0px;
position: absolute;
width: 100%;
padding-top: 20px;
background-color: #F16924;
height: auto;
text-align: justify;
min-width: 960px;
z-index: 999999;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="content">Juicy stuff goes here</div>
<div class="push"></div>
<!-- end wrapper --></div>
<div class="footer">
<div id="print_blank"></div>
<div id="logo"></div>
<div id="nav_bar"></div>
<div id="footerarea">Contains other Text</div>
</div>
</body>
</html>