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>
Related
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; }
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 am trying to align vertically a modal box. But the margin-top:50% did not work as i expect. Basically i want a square centered on another square.
<style type="text/css">
#modal {
width: 300px;
height: 300px;
z-index: 100;
background-color: red;
margin: 0 auto;
position:relative;
margin-top:50%; //problem here
}
#content {
position: absolute;
width:950px;
height: 950px;
margin: 0 auto;
background-color: green;
}
#replace {
width:950px;
height:500px;
}
</style>
<div id="replace">
<div id = "content"></div>
<div id="modal"></div>
</div>
thanks
demo
Instead of margin you need to use top:325px; for #modal
If it's not too much trouble to have the modal inside the content div, you might want to try this HTML:
<div id = "content">
<div id="modal"></div>
</div>
...with this CSS:
#modal {
width: 300px;
height: 300px;
background-color: red;
position: absolute;
top: 50%;
left: 50%;
margin-left: -150px;
margin-top: -150px;
}
#content {
position: absolute;
width: 550px;
height: 550px;
background-color: green;
}
Demo
Basically you're absolutely-positioning the modal div inside the content div, and telling it to go start at 50% from the top and 50% from the left. This will center the top-left corner of the modal, but not the div as a whole. To center the div as a whole, you then have to add a negative margin to move it back up and to the left. The amount of the negative margin is half the height/width of the modal div.
If you want to keep the same HTML, you can still accomplish the same thing using this technique, just make sure to do position: relative on your replace div so that any absolutely-position children are positioned relative to it.
Add position: relative; to your container if you want absolutely positioned elements inside it to be positioned relative to it:
#replace {
position: relative;
width: 950px;
height: 500px;
}
Then set to top value of the item you want to position. One thing to note here, your #replace div is the container here, but it's smaller than the #content div, so when you position #modal, you're going to have to give it specific pixel values to get it centered over #content.
I have a single column layout where the column is a centered div with a fixed width. I want to place a wider div within the column which overflows it's parents, but center it within the parent. Conceptually something like the following:
<div style="width: 100px; margin: 0 auto; overflow:visible;" id="parent">
<div style="width: 400px; margin 0 auto;" id="child"></div>
</div>
The centering works as long as the child div is thinner than its parent, but once it gets larger, it always aligns left with the parent for some reason.
#wrapper {
margin: 0 auto;
width: 200px;
background-color: #eee;
position: relative;
height: 200px;
}
#child {
position: absolute;
top: 0;
left: 50%;
margin: 0 0 0 -200px;
width: 400px;
background-color: #ddd;
}
<div id="wrapper">
<div id="child">Child div</div>
</div>
jsFiddle
When an element overflows his parent, it is normal behaviour that it only overflows to the right. When you, for example, have a site that is wider then the viewport, you never have to scroll left, but only to the right. This solution is based on a absolute centered div, with a negative left margin (that value is the half of his own width). So if you know the width of this element, this solution should be fine.
Tested in FF 3.6, IE7 and IE8
I made a variation of Justus' solution. Instead of relative positioning, I used a negative margin of 50% in the inner element.
#wrapper {
margin: 0 auto;
padding: 10px 0 10px;
width: 200px;
background-color: #eee;
}
#child {
margin: 0 -50%;
width: 400px;
background-color: #ddd;
}
This way you don't need to know the element sizes ahead of time.
I am not 100% sure but try giving the parent element a position set to relative and child absolute and then set top, left and width/height properties for the child div accordingly.
This is how I solve it:
http://jsfiddle.net/WPuhU/1/
Also take care of the scrollbars(they do not appear if your window view is smaller then the overflowing div). Auto centers the overflowing div.
css:
#center-3 {height:40px;background-color: #999;}
#center-1 {height:20px;top:10px;background-color: #aaa;}
/* the necesary code */
body {width:100%;margin:0;}
#center-4 {
width: 100%;
overflow:hidden;
/* remove the next 2 line for a normal flow */
position: absolute;
z-index: -1;
}
#center-3 {
position: relative;
margin: 0 auto;
width: 200px;
}
#center-2, #center-1 {
position: relative;
width: 400px;
}
#center-2 {
left: 50%;
}
#center-1 {
left: -50%;
}
html:
<div id="center-4">
<div id="center-3">
<div id="center-2">
<div id="center-1"></div>
</div>
</div>
</div>
<div id="other-stuff">Here comes the other stuff above.</div>
#parent {
position: relative;
width: 100px;
overflow: visible;
}
#child {
width: 400px;
position: absolute;
left: 50%;
transform: translateX(-50%);
}