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; }
Related
There are 3 divs, side by side to each other.
so div1 div2 div3
Is there a way to focus the scroll only on div2? so that the contents of div1 and div3 is always seen while the user 'scrolls' only on div2?
Preferably a css solution if possible. If not, what solutions are possible?
#div1, #div3
{
overflow: hidden;
}
#div2
{
overflow:scroll;
}
If you want to hide horizontal scroll use: overflow-x:hidden and for vertical use overflow-y:hidden
Add the following css:
body, #div1, #div3
{
overflow:hidden;
}
#div2
{
overflow-y:scroll;
}
Note that you need to set a width and height to the elements, and anything that goes outside of the width and height of div1,div3 and the body won't be shown, while in div2 it will be scrollable.
You could fix the position of the first and last div, so only the center div will scroll;
HTML
<div class="l">left</div>
<div class="m">middle</div>
<div class="r">right</div>
CSS:
html, body {
height: 100%;
margin: 0;
padding: 0;
}
.l, .r {
width: 33%;
height: 100%;
position: fixed;
background: lightgreen;
top: 0;
}
.l { left: 0; }
.r { right: 0; }
.m {
margin: 0 33%;
min-height: 100%;
background: lightblue;
}
Also check this JSFiddle.
You could use the position: fixed in css. My solution makes the body scrollable. If one would refresh the page, it would hop back to where they were, not sure if the overflow-method does that. Also, this allows you to user anchors to parts of you content ()
This is a quick draft:
<div id="divWrap">
<div id="div1">1</div>
<div id="div2">2</div>
<div id="div3">3</div>
</div>
.
/* This wrapper places content centered in the page, the relative is important */
#divWrap{
position: relative;
margin: 0 auto;
width: 500px;
}
/* Place this one fixed, top, left */
#div1{
position: fixed;
left: 0;
top: 0;
width: 100px;
}
/* This div acts normal */
#div2{
margin: 0 100px 0 200px; /* margins => the widths of 1 & 2 */
width: 200px;
}
/* Place this one fixed, top, right */
#div3{
position: fixed;
right: 0;
top: 0;
width: 200px;
}
hmm do you mean so div1 and div3 are fixed on the page, meaning that when you scroll only div2 is scrolled? if so, something like
HTML
<div class="container">
<div class="div-one"></div>
<div class="div-two"></div>
<div class="div-thee"></div>
</div>
CSS
.container { position: relative; }
.div-one, .div-two { position: fixed; }
This won't work right off the bat but you get the idea.
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 have a two-column fluid layout, with the left-hand side set to width: 40% and the right-hide side set to width: 60%. I'd like to allow users to resize their browser as large or small as they'd like, but I must have the left-hand side display a minimum width of 300px.
The following is the code I am currently using for the fluid layout, which includes the min-width specification. But, CSS is ignoring it! It allows the left-hand column to shrink below 300px.
I've also attempted to set min-width to a percentage, such as 20%, but CSS ignores this specification as well.
div#left {
background: #ccc;
position: fixed;
top: 0;
bottom: 0;
left: 0;
width: 40%;
min-width:300px;
height: 100%;
}
div#right {
background: #aaa;
position: fixed;
top: 0;
width:60%;
right: 0;
bottom: 0;
}
jsFiddle Fullscreen Example: http://jsfiddle.net/umgvR/3/embedded/result/
jsFiddle Code: http://jsfiddle.net/umgvR/3/
What is causing this? How can the code be corrected?
If you're not too attached to the fixed positioning, this should do what you want.
View on JSFiddle
HTML
<div id="left">Left</div><div id="right">Right</div>
Note the lack of whitespace between the elements
CSS
html, body {
height: 100%;
}
body {
min-width: 800px;
}
div#left {
background: #ccc;
display: inline-block;
width: 40%;
min-width:300px;
height: 100%;
}
div#right {
background: #aaa;
display: inline-block;
width:60%;
height: 100%;
}
This should also work...
html
<div id="container">
<div id="left">Left</div>
<div id="right">Right</div>
</div>
css
body, div {width:100%;
height:100%;
margin: 0;
}
#container {
display:block;position: fixed;
}
#left, #right {
display: inline-block;
}
div#left {
background: #ccc;
min-width: 300px;
max-width: 40%;
}
div#right {position:fixed;
background: #aaa;
width: 60%;
}
I found out that the left hand div is keeping the minimum width, but its going underneath the right div. If you bring it forward, you can see it on top of the right div. I don't think that this is ideal though.
z-index: 1;
I used z-index: 1; on the left right and z-index: 0; on the right div.
It works but I think there are better solutions out there.
I've 3 divs, each of them has position: absolute.
First is header, and its working.
Header has constant height, and second div "content" also works.
Third div is "footer".
"Content" has changeable height and when "content" is higher than web-browser window the "footer" is ON "content". I want to "footer" under "content" irrespective of content height.
My header is 300px height, content has margin-top: 300px. I can't use the same for the footer, because content hasn't got constant height.
I don't want to set one div with position: absolute, and these 3 divs place inside this one.
div#header{
width: 960px;
height: 200px;
left: 50%;
margin-left: -480px;
position: absolute;
}
div#content{
width: 960px;
border: 1px solid black;
left: 50%;
margin-left: -480px;
position: absolute;
margin-top: 200px;
}
div#footer{
width: 960px;
height: 30px;
left: 50%;
margin-left: -480px;
position: absolute;
bottom: 10px; /*with this i've div fixed to the bottom of web-browsers' window */
clear: both;
}
You're over positioning.
You do not need to position everything absolutely unless there's something you aren't sharing.
JSBin Example
If you are willing to use position : relative which is a tad better than position : absolute in cases like this, http://jsfiddle.net/vFTXg/1/ - Try editing the value of your content's height here and your footer will be automatically adjusted.
CSS
.header {
position : relative;
width : 100%;
height : 90px;
background-color : #000;
}
.content{
position:relative;
width : 100%;
min-height : 200px;
background-color : #f00;
}
.footer{
position:relative;
width : 100%;
height : 50px;
background-color : #0f0;
}
HTML
<div class='header'></div>
<div class='content'></div>
<div class='footer'></div>
I would recommend using CSS floats
Do something like this:
<div id="wrapper">
<div id="header">...</div>
<div id="content">...</div>
<div id="footer">...</div>
<div class="clear"></div>
</div>
Set the site-width on the wrapper and let the other divs have the same width.
Use float:left on header, content and footer
Set clear:both on the clear-div.
Now you can set the height on the elements you want to have a fixed hight - and you don't have to bother with absolute positioning.. If you insist on using positioning, you could just position the wrapper.
In the future browser can calculate. For your example this could be nice to calculate the min-height for the content to set the foorter to the bottom if content height is low and to set the footer after the content if it has a heigh value. E.g.:
HTML:
<div id="header" class="content">header</div>
<div id="content" class="content">content</div>
<div id="footer" class="content">footer</div>
CSS:
html, body {
height: 100%;
}
.content {
position: relative;
width: 960px;
}
#header {
height: 200px;
}
#content {
border: 1px solid black;
min-height: -moz-calc(100% - 302px);
min-height: -webkit-calc(100% - 302px);
min-height: calc(100% - 302px);
}
#footer {
height: 100px;
}
Unfortunately only firefox and IE9 and higher support calc at the moment, so this is more theoretically. If you want to test it, see this jsfiddle.
If you want to do this with all current browser you need to use javascript.
If you want something to be of constant width and centered try this
#footer,
#header,
#footer {
width: 960px;
margin: 0 auto;
}
and forget about
left: 50%;
margin-left: -480px;
position: absolute;
So I'm trying to create this layout.
Here is a picture of the 3 "boxes" that constitute the page: https://dl.dropbox.com/u/9699560/layout.jpg
And here is my attempt: https://dl.dropbox.com/u/9699560/map.html
The red box is a Google Map, so if its height isn't specified, it shrinks to zero. What I am trying to do is the following:
The green box is fixed width, fixed height. The blue box should occupy 20% of the vertical height of the page, with a maximum height of 100px. The red box should occupy all of the remaining vertical space.
If anyone can figure that out, I'd like to go a little farther, such that when the browser window is expanded vertically and the blue box's top reaches the level of the green box's bottom, it expands left to occupy 100% of the page width.
I've tried floats, absolute, and relative positioning and I cannot get this to work with pure CSS. If I have to, I will use JavaScript, but I would like to avoid that unless it's the only option.
Thanks!
Here's an attempt (remove comments if you use it):
html, body {
margin: 0;
padding: 0;
height: 100%;
}
#nav {
position: relative;
width: 200px;
height: 400px;
background-color: green;
}
#map {
position: absolute;
top: 0;
left: 200px;
right: 0;
height: 80%; // If #footer is 200px, should occupy all available space
background-color: red;
}
#footer {
position: absolute;
left: 200px; // Should "become" 0 when window height pulls it past #nav
right: 0;
bottom: 0;
height: 20%;
max-height: 100px;
background-color: blue;
}
and the HTML
<html>
<head></head>
<body>
<div id="nav"></div>
<div id="map"></div>
<div id="footer"></div>
</body>
</html>
In my opinion, you will need JavaScript to implement this.
My starting point would probably be from this markup, maybe implement the min/max height behaviors in an event handler that fires on resize :
CSS
html, body { margin: 0; padding: 0; }
#nav { background-color:green; width: 200px; height: 400px; float:left; }
#map { background-color:red; height: 80%; margin-left: 200px; }
#footer { background-color: blue; height:20%; }
HTML
<div id="nav">nav content</div>
<div id="map">map content</div>
<div id="footer">footer content</div>