I am new with CSS and need some help, please. Although it seems to be simple to solve, I am already working in this problem for about 4 hours. I found many similar questions on internet, but each case is particulary different from mine, and the "solutions" can't solve my problem (already tried most of them).
Here is the basic structure of my html page:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html >
<head>
<title>Test</title>
</head>
<body>
<div id="main">
<div id="head">
<div id="head_content">
HEARDER
</div>
</div>
<div id="body">
<div id="menu">
MENU
</div>
<div id="page">
PAGE CONTENT
</div>
</div>
<div id="foot">
<div id="foot_content">
FOOTER
</div>
</div>
</div>
</body>
</html>
And here is the CSS I am trying to implement:
html {
height: 100%;
}
body {
margin:0;
padding:0;
width:100%;
height: 100%;
min-height: 100%;
background: #DEDEDE;
}
#main {
width: 100%;
min-height:100%;
position:relative;
}
#head {
width: 100%;
height: 58px;
border-bottom: 1px solid #115293;
background-color: #1976D2;
}
#head #head_content {
width: 1000px;
padding: 6px;
color: #FFFFFF;
margin: 0 auto;
text-align: center;
}
#body {
width: 1000px;
// height: 100%;
// min-height: 100%;
margin: 0 auto;
// padding-bottom: 50px;
border-left: 1px solid #BFBFBF;
border-right: 1px solid #BFBFBF;
}
#body #menu {
float: left;
width: 220px;
// height: 100%;
// min-height: 100%;
background-color: #94C9FF;
}
#body #page {
overflow: hidden;
// height: 100%;
// min-height: 100%;
padding: 10px;
color: #5C5C5C;
border-left: 1px solid #BFBFBF;
background-color: #FFFFFF;
}
#foot {
position:absolute;
bottom: 0;
left: 0;
width: 100%;
height: 58px;
color: #FFFFFF;
border-top: 1px solid #115293;
background-color: #1976D2;
}
#foot #foot_content {
position: relative;
width: 1000px;
padding: 6px;
margin: 0 auto;
text-align: center;
}
Obs: Commented lines are SOME of the solutions I already tried.
Here is what I got so far:
And finally here is what I really need:
The reason you were having trouble getting the #body div to be the full height of the remaining space is because each of the wrapping elements needed height:100% not just one of them. That means #main, #body, #page and #menu.
html {
height: 100%;
}
body {
margin:0;
padding:0;
width:100%;
height: 100%;
min-height: 100%;
background: #DEDEDE;
}
#main {
width: 100%;
min-height:100%;
position:relative;
height:100%;
}
#head {
width: 100%;
height: 58px;
border-bottom: 1px solid #115293;
background-color: #1976D2;
}
#head #head_content {
width: 1000px;
padding: 6px;
color: #FFFFFF;
margin: 0 auto;
text-align: center;
}
#body {
height:100%;
width: 1000px;
margin: 0 auto;
border-left: 1px solid #BFBFBF;
border-right: 1px solid #BFBFBF;
}
#body #menu {
float: left;
width: 220px;
background-color: #94C9FF;
height:100%;
}
#body #page {
overflow: hidden;
padding: 10px;
color: #5C5C5C;
border-left: 1px solid #BFBFBF;
background-color: #FFFFFF;
height:100%;
}
#foot {
position:absolute;
bottom: 0;
left: 0;
width: 100%;
height: 58px;
color: #FFFFFF;
border-top: 1px solid #115293;
background-color: #1976D2;
}
#foot #foot_content {
position: relative;
width: 1000px;
padding: 6px;
margin: 0 auto;
text-align: center;
}
<html >
<head>
<title>Test</title>
</head>
<body>
<div id="main">
<div id="head">
<div id="head_content">
HEARDER
</div>
</div>
<div id="body">
<div id="menu">
MENU
</div>
<div id="page">
PAGE CONTENT
</div>
</div>
<div id="foot">
<div id="foot_content">
FOOTER
</div>
</div>
</div>
</body>
</html>
you can add the following to css based on the size of content you require the content to be, just change the pixels based on the content you want:-
div#page {
width: 100%;
height: 600px;
}
I hope it will help
You can do this in the following way--
Just use the height unit as vh(viewport height) relative to viewport. Add rest of your css to get desired width effect.
checkout the snippet
#main {
background-color:blue;
height: 10vh;
}
#body {
background-color:grey;
height:80vh;
}
#foot {
background-color:blue;
height: 10vh;
}
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html >
<head>
<title>Test</title>
</head>
<body>
<div id="main">
<div id="head">
<div id="head_content">
HEARDER
</div>
</div>
<div id="body">
<div id="menu">
MENU
</div>
<div id="page">
PAGE CONTENT
</div>
</div>
<div id="foot">
<div id="foot_content">
FOOTER
</div>
</div>
</div>
</body>
</html>
You can find compatibility here---
vh compatibility
EDIT
As fallback for vh unit I think you can use javascript . Through javascript you can get the window size. Then specify the height of the footer as percentage of the window height.
This question can be good starting point
Related
I'm trying to generate a "A4" html as a template previous for saving as PDF, my page has 5 divs that cover 100% of the area to print.
I am using position absolute for every div, but somehow they are overlapping a little bit, why that is happening??
body {
background: rgb(204,204,204);
}
page[size="A4"] {
background: white;
width: 210mm;
height: 297mm;
display: block;
margin: 0 auto;
margin-bottom: 0.5cm;
box-shadow: 0 0 0.5cm rgba(0,0,0,0.5);
}
#media print {
body, page[size="A4"] {
margin: 0;
box-shadow: 0;
}
}
.area100{
border:1px solid black;
position:absolute;
width:210mm;
}
.area50{
font-size:9px;
padding:10px;
text-align: justify;
border:1px solid black;
position:absolute;
width:105mm;
height:98mm;
overflow:hidden;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
</head>
<body>
<page size="A4">
<div id="header" class="area100" style="height:20mm;">
This is header
</div>
<div id="main" class="area100" style="height:129mm; top: 20mm;">
This is main
</div>
<div id="bottom-left" class="area50" style="top: 149mm">
{agreement}
</div>
<div id="bottom-right" class="area50" style="left:105mm; top: 149mm">
right
</div>
<div id="footer" class="area100" style="top: 247mm; height:50mm">
This is footer
</div>
</page>
</body>
</html>
Always set top and left attributes for position: absolute; because browser will try to guess it and sometimes it's not what you want.
Also element actual width consists of width + padding, so when you set width: 105mm; padding: 10px; than your actual width is 105mm + 20px
body {
background: rgb(204, 204, 204);
}
page[size="A4"] {
background: white;
width: 210mm;
height: 297mm;
display: block;
margin: 0 auto;
margin-bottom: 0.5cm;
box-shadow: 0 0 0.5cm rgba(0, 0, 0, 0.5);
}
#media print {
body,
page[size="A4"] {
margin: 0;
box-shadow: 0;
}
}
.area100 {
border: 1px solid black;
position: absolute;
top: 0;
left: 0;
width: 210mm;
}
.area50 {
font-size: 9px;
padding: 10px;
text-align: justify;
border: 1px solid black;
position: absolute;
width: 99mm;
height: 98mm;
overflow: hidden;
top: 0;
left: 0;
}
<page size="A4">
<div id="header" class="area100" style="height:20mm;">
This is header
</div>
<div id="main" class="area100" style="height:129mm; top: 20mm;">
This is main
</div>
<div id="bottom-left" class="area50" style="top: 149mm">
{agreement}
</div>
<div id="bottom-right" class="area50" style="left:105mm; top: 149mm">
right
</div>
<div id="footer" class="area100" style="top: 247mm; height:50mm">
This is footer
</div>
</page>
I'm trying to create a webpage that will have a fixed sidebar and scrollable content. It does work if I don't have a header div. If I scroll page I have some empty space that previously was a header (i marked it with red color). I'd like my sidebar to cover the empty space after I scroll through header div.
Here's my HTML Code - how can I fix this?
<!doctype html>
<head>
<link rel="stylesheet" href="style.css"type=" text/css"/>
</head>
<body>
<div id="page">
<div id="header">
</div>
<div id="navigation">
<ul>
<li>home</li>
<li>news</li>
<li>contact</li>
<li>about</li>
</ul>
</div>
<div id="content">
<div id="abcd">
</div>
</div>
</body>
CSS
#page
{
position:relative;
width:100%;
height:3000px;
background-color:yellow;
}
#header
{
background-color: blue;
width:100%;
height:150px;
}
#navigation
{
background-color: red;
width:10%;
height:3000px;
float:left;
}
#content
{
float:left;
background-color: green;
width:90%;
overflow: auto;
height:1000px;
}
body
{
margin: 0;
}
ul
{
list-style-type: none;
margin: 0;
padding: 0;
width: 10%;
background-color: #f1f1f1;
position: fixed;
height: 100%;
overflow: auto;
}
li a
{
display: block;
color: #000;
padding: 8px 0 8px 16px;
text-decoration: none;
}
You have to place your navigation div in outermost part i.e. in body(not in any other div).
I have tested this and its now working fine.
Your new code should be
<html>
<head>
<link rel="stylesheet" href="style.css" type=" text/css" />
</head>
<body>
<div id="navigation">
<ul>
<li>home</li>
<li>news</li>
<li>contact</li>
<li>about</li>
</ul>
</div>
<div id="page">
<div id="header">
</div>
<div id="content">
<div id="abcd">
</div>
</div>
</div>
</body>
</html>
And your modified css:-
#page {
position: relative;
width: 100%;
height: 3000px;
background-color: yellow;
}
#header {
background-color: blue;
width: 100%;
height: 150px;
display: block;
}
#navigation
{
background-color: red;
width:10%;
height:100%;
float:left;
position: absolute;
z-index:1;
}
#content {
float: left;
background-color: green;
width: 90%;
overflow: auto;
height: 1000px;
}
body {
margin: 0;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 10%;
background-color: #f1f1f1;
position: fixed;
height: 100%;
overflow: auto;
}
li a {
display: block;
color: #000;
padding: 8px 0 8px 16px;
text-decoration: none;
}
In css I have changed the navigation's height to 100% and its z-index to 1.
Also you didn't close the div tag with class "page".
Reference:- w3 css sidenav
Please try this:
#navigation {
background-color: red;
width: 10%;
height: 3000px;
float: left;
position: absolute;
z-index: 99999;
left: 0;
top: 0;
}
Basically, when I try to add a paragraph into one of the <div>'s I run into trouble. The page seems to be messed up. Is there anything wrong with my code? And, what are some things that my code needs to be improved?
Thanks!
<!DOCTYPE HTML>
<html>
<style>
* {
font-family: georgia;
}
body {
background-color: white;
}
#content {
width: 60%;
height: 1500px;
margin: auto;
}
#header {
height: 200px;
border: 1px dashed;
background-color: #44424D;
}
#left {
width: 20%;
height: 100%;
display: inline-block;
}
#right {
height: 100%;
width: 20%;
display: inline-block;
position: relative;
left: 676px;
}
#name {
font-family: big john;
font-size: 50px;
width: 100%;
margin: 0 auto;
border-bottom: 1px solid;
color: white;
}
.wot {
background-color: #E6C88C;
}
</style>
<head><title>Film Club</title></head>
<body>
<div id="content">
<div id="header">
<h1 id="name">The Film Club</h1>
</div>
<div id="left", class="wot">
<p>Test</p>
</div>
<div id="right", class="wot">
</div>
</div>
</body>
</html>
First of all, you have commas in your HTML, which is incorrect.
<div id="content">
<div id="header">
<h1 id="name">The Film Club</h1>
</div>
<div id="left" class="wot">
<p>Test</p>
</div>
<div id="right" class="wot">
</div>
</div>
Second, the heights of the divs with the text in is set to 100% and the height of you #content div set to 1500px so the divs expand to this full height. The height of a div is only applied when it contains content which is why it changes when you put text in. You can remove the height from the CSS, or set it to a more appropriate value.
Two of your <div>s have commas separating the properties. Properties in html tags do not need to be separated by commas. They should just be separated by a space (this probably isn't even required, but you should do it in the interest of good style).
I'm going to assume the improper indentation is a result of posting the code, but if that's not the case, proper indentation is always a good way to improve your code.
I have change the following CSS code css
#left {
width: 20%;
height: 100%;
float:left;
display: inline-block;
}
#right {
height: 100%;
width: 20%;
display: inline-block;
position: relative;
float: right;
}
<!DOCTYPE HTML>
<html>
<style>
* {
font-family: georgia;
}
body {
background-color: white;
}
#content {
width: 60%;
height: 1500px;
margin: auto;
}
#header {
height: 200px;
border: 1px dashed;
background-color: #44424D;
}
#left {
width: 20%;
height: 100%;
float:left;
display: inline-block;
}
#right {
height: 100%;
width: 20%;
display: inline-block;
position: relative;
float: right;
}
#name {
font-family: big john;
font-size: 50px;
width: 100%;
margin: 0 auto;
border-bottom: 1px solid;
color: white;
}
.wot {
background-color: #E6C88C;
}
</style>
<head><title>Film Club</title></head>
<body>
<div id="content">
<div id="header">
<h1 id="name">The Film Club</h1>
</div>
<div id="left", class="wot">
<p>Test</p>
</div>
<div id="right", class="wot">
</div>
</div>
</body>
</html>
I'm trying to get a css layout for all modern browsers going and having a hard time. I am not a css guru but hoping one could guide me in the right direction. I'm trying to get a layout similar to this one but with a 100% height left nav and 100% width for the rest. see below layout image.
Based on the link above, I have this, but missing the 100% height...
.wrapper {
width: 100%;
border: 3px solid #666;
overflow: hidden
}
.menu-vertical {
width: 230px;
float: left;
padding: 10px;
border: 2px solid #f0f
}
.mainContent {
overflow: hidden;
border: 2px solid #00f
}
.banner {
background-color: red;
height: 50px;
}
.contentBox {
background-color: pink;
height: 200px;
margin: 20px;
}
<div class="wrapper">
<div class="menu-vertical">side</div>
<div class="mainContent">
<div class="banner">banner</div>
<div class="contentBox">content</div>
</div>
</div>
Any help is appreciated, thank-you
here's the code:
<!DOCTYPE html>
<html>
<body>
<div style="height:100%;position:absolute; width:10%; margin:0; top:0; left:0; background-color:red;">Content</div>
<div style="height:10%; position:absolute;width:90%; margin:0; top:0; left:10%;background-color:blue;">Content</div>
<div style="height:90%;position:absolute; width:90%; margin:0; top:10%; left:10%; background-color:yellow;margin:0 auto;"><div style="background-color:green;width:95%;height:95%;position:relative;top:20px;left:30px;">Content</div></div>
</body>
</html>
I am attempting to layout a site:
http://kenzshop.com/Brandon/index
I cannot get the main content area (blue colored)to align correctly.
The header (red) has a fluid with, the sidebar (yellow) has a fluid height, the main content area should be fluid width and height, but I cannot figure out how to get it to align correctly.
It should align width-wise with the header.
Can anyone see what my issue is?
HTML:
<!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>
<title>Title of document</title>
<meta http-equiv="Content-Type" content="text/xhtml; charset=utf-8"></meta>
<meta http-equiv="Content-Type" content="text/css; charset=utf-8"></meta>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<div id="header"></div>
<div id="main"><!--<iframe src="http://www.cnn.com/"/> --></div>
<div id="sidebar"></div>
</body>
</html>
CSS:
body {
margin:0;
padding:0;
height:100%;
}
#header{
height: 80px;
border: 1px solid black;
padding: 5px;
margin-top: 5px;
margin-left: 5px;
margin-right: 5px;
background-color:red;
}
#main{
position:absolute;
left:0;
top:90px;
right: 263px;
padding:0;
margin-top: 12px;
margin-left: 5px;
margin-bottom:5px;
height:99% !important; /* works only if parent container is assigned a height value */
width:100%;
border:1px solid black;
background-color:blue;
}
iframe{
margin: 5px;
display:block;
width:100%!important;
height:100%!important;
}
#sidebar{
position:absolute;
right:0;
top:102px;
padding:0;
margin-right:5px;
margin-bottom:5px;
width:250px;
height:99%; /* works only if parent container is assigned a height value */
border:1px solid black;
background-color:yellow;
}
Since their are little to no variables, this is easily solved by relying on position: absolute, without affecting flexibility.
The HTML:
<header class="header"></header>
<div class="content">
<iframe src="http://www.cnn.com/"></iframe>
</div>
<div class="sidebar"></div>
The CSS:
* {
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.header,
.content,
.sidebar {
position: absolute;
border: 1px solid black;
}
.header {
top: 5px;
right: 5px;
left: 5px;
height: 80px;
background: red;
}
.content,
.sidebar {
top: 90px;
bottom: 5px;
}
.content {
left: 5px;
right: 260px;
}
.content iframe {
width: 100%;
height: 100%;
}
.sidebar {
right: 5px;
width: 250px;
background: green;
}
Take a look at it here: http://jsfiddle.net/joplomacedo/WBRCj/
Something like this?
HTML:
<div id="header"></div>
<div id="main"></div>
<div id="sidebar"></div>
CSS:
#header {
height: 60px;
background: red;
margin-bottom: 10px
}
#main {
width: 68%;
background: blue;
float: left;
height: 800px;
}
#sidebar {
width: 30%;
background:yellow;
float: right;
height: 800px;
}
And the Fiddle
P.S. Wasn't sure whether to base it off your current site, or your image posted, as both seem to follow different concepts. Did image for now.