Hi all. I need help in arrange the div of my website.
My website has 3 main DIVs.
1. DIV1 - My Header (fixed height)
2. DIV2 - Dynamic Content area so height varies
3. DIV3 - My Footer (fixed height)
All DIVs have 100% width.
The DIV1 header must have 0px with respect to the top of the browser. I wanted the 3 DIVs must be on top of each other as shown in the image. If the user has a resolution taller than my 3 DIVs, what will be at the most bottom after the DIVs are just empty spaces. However, I cant seem to get that layout working. the DIV3 footer keep giving me trouble.
I've following CSS code:
div1 {
position: fixed;
top: 0px;
}
div2 {
position: relative;
top: 0px;
}
div3 {
position: fixed;
top: 0px;
}
If I use position: fixed for DIV3, and my DIV2 has a shorter content, the whole website will look weird.
If I try changed to position: relative for DIV3, DIV3 will overlap and appear in front of DIV1.
Is there any better suggestion for that?
Thank you very much.
Is there any reason why you're using positioning to layout the div's?
Div's will naturally stack on top of each other without any need for positioning.
I think that you want fixed header and footer positioning.
http://www.cssplay.co.uk/layouts/basics2.html
HTML
<div class="div1">header</div>
<div class="div2">Content area</div>
<div class="div3">Footer</div>
CSS
.div1 {
height:100px; background:red; width:100%
}
.div2 {
position: relative;
top: 0px; background:green; width:100%; height:100px;
}
.div3 {
background:blue; width:100%; height:100px;
}
Demo http://jsfiddle.net/K3Unz/2/
I hope this may be helpful to you
use footer as bottom: 0px; if you want to fixed this in bottom
Here the demo: fiddle
body{
background:green;
}
div.one {
position: fixed;
top: 0px;
width: 100%;
height: 50px;
background: #4f4f4f;
}
div.two {
height: 100%;
width: 100%;
margin-top: 50px;
}
div.three {
position: fixed;
bottom: 0px;
width: 100%;
height: 50px;
background: red;
}
Check this: CSS layout generator.
EDIT:
Check this fiddle
Try using:
.head{
position:fixed;
top:0px;
}
.footer{
position:fixed;
bottom:0px;
}
In style, I put same height for div1,div2,div3 = 100px :
<style>
body
{
margin: 0 auto;
}
#div1 {
height: 100px;
width:100%;
top: 0px;
background-color:#F00;
}
#div2 {
height: 100px;
width:100%;
top: 0px;
background-color:#00F;
}
#div3 {
height: 100px;
width:100%;
top: 0px;
background-color:#FF0;
}
</style>
and in html tags:
<body>
<div id="div1">Header</div>
<div id="div2">Cotent</div>
<div id="div3">Footer</div>
</body>
I hope this will fit your requirements,
Related
http://jsfiddle.net/P8g3C/
I am trying to create the layout above. I am not getting the scroll bar to the right side of the content.
Also, suggest if there is any alternate way which better than my current approach
My html code is
<div class="header"></div>
<div class="content">
<div class="content-left">Menu</div>
<div class="content-right">Content which should be scrollable</div>
</div>
<div class="footer"></div>
My CSS is
body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
.header {
position: fixed;
width: 100%;
height: 100px;
top: 0;
left: 0;
background-color: aqua;
}
.content {
position: fixed;
top: 100px;
bottom: 35px;
left: 0;
width: 100%;
}
.content-left {
position: absolute;
top: 0;
left: 0;
width: 200px;
height:100%;
background-color: aquamarine;
}
.content-right{
position:absolute;
top:0;
left:200px;
width:100%;
height:100%;
overflow:auto;
background-color:blanchedalmond;
}
.footer {
position: fixed;
width: 100%;
height: 35px;
bottom: 0;
left: 0;
background-color: yellow;
}
You can just remove width:100% of .content-right:
Update:
Because you use absolute positiong for the .content-right we can just set the left and right for it to make the width dynamic:
.content-right{
position:absolute;
top:0;
/* add this */
right:0;
left:200px;
height:100%;
overflow:auto;
background-color:blanchedalmond;
}
Demo.
It's because you are assigning a width of 100% to .content-right, yet already occupy 200px with the menu column, hence pushing the scrollbar off.
Try this:
.content-right {
width:calc(100% -200px);
}
Alternately, you can remove the width property altogether, as #King King suggested
Here's a Fiddle of your original demo code showing the fix in action.
Please correct a width of class .content-right{ width:61%;}. because you have give a width of 100% that why you are not able to see a overflow scroll.
I have four DIVs :
The first div has a fixed height and located on top (header).
The second div also has a fixed height and located below the first div.
The fourth div has a fixed height located on bottom.
The third div will have a variable height: it will expand to make the total of four divs are full to vertical space in browser IF the content is less than that. But it will follow the content's height if the content's height is larger than that. So at all times, I want the first div (the header) to stick at the top of the page, and the fourth div (the footer) to stick at the bottom of the page. I have no way to know how tall the content will be.
header
header
header
header
the CSS file:
#container { width:800px; height:*; }
#header { height:200px; }
#menu { height:50px; }
#content { height:*; }
#footer { height:150px; }
can I actually do this? how is the correct css way to do this? I get the feeling this should be not too hard, but I can't find relatable answers anywhere. Thank you.
What you could do is something like this:
#content { height: 100vh; /*100% of viewport height*/
margin-top: 250px;
margin-bottom: 150px; }
This way it will always be 100% of the screen height in total.
Well that turned out looking cool, JSBin
HTML
<div class="header">Header !</div>
<div class="menu">Menu !</div>
<div class="content">Content !</div>
<div class="footer">Footer !</div>
CSS
body { margin: 0; }
.header { width: 100%; height: 200px; position: fixed; top: 0; }
.menu { width: 100%; height: 50px; position: fixed; top: 200px; }
.footer { width: 100%; height: 150px; position: fixed; bottom: 0; }
.content { width: 100%; position: fixed; top: 250px; bottom: 150px;
overflow: auto; }
I have what is a fairly common page layout where the content div is centralised on the page using margin:auto 0. The width of the div itself varies depending on available page width.
I want another div featuring a logo to 'stick' to the outside left hand side of this div (ie no gap or overlap between the two) at a fixed height. What CSS should I use for this?
something like
html:
<html>
<div id='content'>
<div id='stickything'>a</div>
</div>
</html>
css:
html {
width: 100%;
}
#content {
position: relative;
width: 100px;
height: 600px;
margin: auto;
background-color: green;
}
#stickything {
position: fixed;
width: 25px;
height: 30px;
top: 0px;
margin-left: -25px;
background-color: red;
}
http://jsfiddle.net/Kkcnn/
Use position:absolute. It must help:
.container-div{
position: relative
}
.outer-div{
position:absolute;
top: 0 (your choice)
left: -/outer div's width/
}
I am trying to create sidebar. Well, the design is supposed to be 3 divs. Header (Which is already done), Sidebar, and the main div.
The sidebar is intended to be on the left side on the screen, extending all the way down to the bottom (height:100%). The problem I am stuck at is that I am not able to make a 100% Div as its height only extends to the number of lines of text I have in the div.
Here is the CSS for the sidebar that I currently have:
#sidebar {
float: left;
margin-top:36px;
width: 300px;
height:100%;
background-color: #111211;
}
Here is the CSS code for the body that I currently have:
body {
margin:0;
padding:0px;
background-color:#87AFC7;
}
Here is the HTML code:
<body>
<div id="sidebar"> left-sidebar </div>
</body>
You need to set the height of the parent of the sidebar to 100%, and in turn the parent of that. Since the sidebar is an immediate child of the body element, just add this to your CSS:
html,body { height:100%; }
You may try something like;
CSS
#container {
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
}
#top, #left, #right {
position: absolute
}
#top {
top: 0;
width: 100%;
height: 50px;
background: #00b7f0
}
#left {
top: 50px;
width: 50px;
bottom: 0px;
background: #787878
}
#right {
top: 50px;
left: 50px;
right: 0;
bottom: 0px;
background: #ff7e00
}
HTML
<div id="container">
<div id="top"></div>
<div id="left"></div>
<div id="right"></div>
</div>
Here is a working Live Demo.
Hope this helps..
Please try this and let me know
#sidebar {
position:fixed;
right:0px;
margin-top:36px;
width: 300px;
height:100%;
background-color: #111211;
}
body, html {
hieght:100%
}
You can use pixels instead of percentages:
height:1000px;
I have a two column layout:
<html>
<head></head>
<body>
<div id="container">
<div id="header"></div>
<div id="sidewrapper"></div>
<div id="contentwrapper"></div>
</div>
</body>
</html>
I want to have both sidebar and content be 100% in height but the most top container's min-height should be 100%.
I tried to solve it with the following css:
* {
margin: 0;
padding: 0;
}
html {
font-family: Georgia, serif;
color: #000; height:100%; min-height:100px;
}
body {
background: #fff; height:100%; min-height:100px; overflow:hidden;
}
#header {
width: 100%;
position: relative;
float: left;
height: 23px;
}
#container {
position:relative;
width: 100%; height:100%;
margin: auto; background:blue;
}
#contentwrapper {
float:left;
background:red;
position: relative;
width: 700px; padding:0px; margin:0px;
height: auto;
}
#sidewrapper {
float:left;
position: relative;
width: 159px; height:100%;
padding:0px; margin:0px;
}
...but I get a scrollbar because of the header's 23px height. I tried to solve it with overflow:hidden for the body element but I do not know if that is the right solution.
Any ideas?
If my assumption I put forward in my comment to the question is right, then sidebar is 100% high, and on top of that you have a 23px header, so that causs your container to be 100% + 23px high.
In the future you will have in css calc() http://hacks.mozilla.org/2010/06/css3-calc/ . This will solve your problem.
Now, I guess you should calculate the height of the sidebar ( = height of container - 23px), by javascript.
Make #header position absolute. This will cut that block out of the normal flow and you'll be able to make heights of other blocks equal to their parent.
#header {
position: absolute;
width: 100%; height: 23px;
top: 0; left: 0;
}
#sidewrapper,
#contentwrapper {
float: left;
width: 50%;
height: 100%;
}
#sidewrapper .content,
#contentwrapper .content {
margin-top: 23px;
}
The height of an element is compared with its father element. In your case, I recommend you specify the concrete width & height for "containter", because it'll be hard to pretend the size of the screen on many machines.
If you insists use percent, I recommend you use for both element, such as header 25% height and content 75% height.
Lets say I've a html body and a div inside and I want to make the height of the div to the entire browser without scroll bar and side gaps. Then understand the following example below, and implement your own.
Html:
<body>
<div id="yellowDiv">
<div>
</body>
CSS:
body{
margin:0px;
}
yellowDiv{
background-color:yellow;
height:100vh;
}