Im trying to place background divs behind the container. I thought i would place one div at the top and one at the bottom. Then make the container have a position:relative. But only the top goes behind the container. This is what it looks like
http://oi62.tinypic.com/2lm3mvk.jpg
And this is how i want it to look like
http://oi57.tinypic.com/5zjjvs.jpg
Both blue divs are suppossed to be behind and the brown div is the container. The red divs are header/footer. How am I suppossed to do this?
<body>
<div id="wrapper">
<div id="top"></div>
<div class="blueLeft"></div>
<div class="padding"></div>
<div id="container"></div>
<div class="blueRight"></div>
<div id="bottom"></div>
</div>
</body>
#wrapper{
width:100%;
height:100%;
}
#top,#bottom{
background-color: red;
width:100%;
height:200px;
clear:both;
}
#container{
background-color: brown;
width:800px;
height:600px;
margin:0 auto;
position: relative;
}
.blueLeft{
width: 100%;
height: 200px;
background-color: blue;
float:left;
}
.blueRight{
width: 100%;
height: 300px;
background-color: blue;
float:right;
}
See if this is what you wanted.
http://jsfiddle.net/vleong2332/pq3823tz/
<div id="wrapper">
<div id="top"></div>
<div class="blueTop"></div>
<div class="padding"></div>
<div id="container"></div>
<div class="blueBottom"></div>
<div id="bottom"></div>
</div>
CSS
#wrapper{
width:100%;
height:100%;
position: relative;
}
#top,#bottom{
background-color: red;
width:100%;
height:200px;
clear:both;
}
#container{
background-color: brown;
width:800px;
height:600px;
margin:0 auto;
position: relative;
}
.blueTop{
width: 100%;
height: 200px;
background-color: blue;
position: absolute;
}
.blueBottom{
width: 100%;
height: 300px;
background-color: blue;
position: absolute;
bottom: 200px;
z-index: -1;
}
On HTML, I changed the class to blueTop and blueBottom since they would be more accurate semantically.
On CSS, since I don't think you'd need the float, I removed them. I used position: absolute on the blue divs. The top one doesn't need to be re-adjusted because the flow already puts it where you want it. For the bottom, I need to position the bottom on top of the red since it goes against the normal flow. z-index is to put the blueBottom behind the brown div.
Hope this helps.
Using your example, you could just give #container a negative margin equal to the height of the second blue div.
So for example:
#wrapper{
width:100%;
height:100%;
}
#top,#bottom{
background-color: red;
width:100%;
height:200px;
clear:both;
}
#container{
background-color: brown;
width:800px;
height:600px;
margin:0 auto;
position: relative;
margin-bottom: -300px;
}
.blueLeft{
width: 100%;
height: 200px;
background-color: blue;
float:left;
}
.blueRight{
width: 100%;
height: 300px;
background-color: blue;
float:right;
}
<body>
<div id="wrapper">
<div id="top"></div>
<div class="blueLeft"></div>
<div class="padding"></div>
<div id="container"></div>
<div class="blueRight"></div>
<div id="bottom"></div>
</div>
</body>
However, you may want to consider doing this differently.
The issue you're having isn't that your #container element is "on top" of your bottom blue float in a Z-axis way, it's that it's above it vertically in the document (basically, the float is clearing your #container.
Try adding margin-top: -300px; to your .blueRight CSS and see if that gives you what you are looking for.
Related
Can a centered div contain a fixed div?
I would like to center a fixed nav box and a scrolling main box side-by-side together in any big window. I can fix the nav box in a non-centered view (first code below), or center the view with a scrolling nav box (second code), but have been unable to combine these two traits, after many tries including multiple nested wrappers. Maybe fixed and centering are incompatible? If this is possible I will appreciate seeing how it is done. Thank you.
(1) Fixed nav box, scrolling main box, not centered:
<style>
#nav {position:fixed; top:50px; left:80px; width:270px; height:400px; background:#ddd }
#main {position:absolute; top:50px; left:380px; width:800px; height:1200px; background:#eee}
</style>
<div id="nav">
</div>
<div id="main">
</div>
</div>
(2) Centered, nav box scrolls (#bigscreen here is just a temp to show the centering):
<style>
#bigscreen {width:2000px; height:1200px;}
#window {width:100%; height:100%; display:flex; justify-content:center; align-items:center;}
#wrap {position:relative; width:1125px;height:800px; background:bisque}
#nav {position:absolute; top:54px; left:20px; width:270px; height:400px; background:#ddd }
#main {position:absolute; top:54px; left:300px; width:800px; height:640px; background:#eee}
</style>
<div id="bigscreen">
<div id="window">
<div id="wrap">
<div id="nav">
</div>
<div id="main">
</div>
</div>
</div>
</div>
First, you need to create a wrapper(#content-wrapper in my answer) that includes #nav and #main divs. Then add display: flex for that wrapper to set child divs horizontally. To align the wrapper into the center, define a fixed width(1100px in my answer) and set left, right margin to auto.
Then add position: relative to the wrapper. That allows you to play with css position property in child divs within the wrapper.
Finally, add position: fixed for #nav div to set fixed position and add position: absolute & left: 300px(in my answer) for #main div to scroll in the wrapper.
See below.
<style>
#content-wrapper {
position: relative;
width: 1100px;
margin: 50px auto;
display: flex;
}
#nav {
position: fixed;
width: 270px;
height: 400px;
background: #ddd
}
#main {
position: absolute;
left: 300px;
width: 800px;
height: 1200px;
background: #eee
}
</style>
<div id="content-wrapper">
<div id="nav"></div>
<div id="main"></div>
</div>
You mean like this?
* {
box-sizing: border-box;
}
body {
margin: 0;
}
#overlay {
position: fixed;
width: 100vw;
height: 100vh;
background: rgba(0,0,0,.8);
padding: 10px;
display: flex;
}
#nav {
margin-right: 10px;
width:20%;
background: rgb(240,240,240);
}
#main {
width: 80%;
background: rgb(240,240,240);
padding: 10px;
overflow: auto;
}
#content {
height: 2000px;
background-color: rgb(220, 220, 220);
font-family: arial;
text-align: center;
line-height: 2000px;
margin-bottom: 10px;
}
<div id="overlay">
<div id="nav">
</div>
<div id="main">
<div id="content">Overflow content</div>
</div>
</div>
If this is the result you're looking for you should focus only on the following lines, they are the most important ones to achieve this.
#overlay {
position: fixed;
width: 100vw;
height: 100vh;
display: flex;
}
#nav {
width:20%;
}
#main {
width: 80%;
overflow: auto;
}
Edit: You can click on full page to see the result in expanded height.
I have a very simple problem, but I can't solve it.
There is a div inside another div. The inner div is positioned absolutely out of the outer div (left: 100%). Moreover, the outer div should scroll vertically. However, I can't find how not to scroll horizontally and how to make the inner div be visible outside the outer div, at the same time.
The code is the following:
HTML:
<div id="out">
<div id="in">
</div>
</div>
CSS:
#out{
height:100px;
width:100px;
background-color: green;
position: relative;
overflow-y: scroll;
overflow-x: visible;
}
#in{
position: absolute;
left: 100%;
height:50px;
width:50px;
background-color: red;
}
Thanks in advance!
.main_outer{
overflow-y:scroll;
border:thin black solid;
overflow-x:hidden;
}
#out{
height:100px;
width:100px;
background-color: green;
position: relative;
}
#in{
position: absolute;
left:100%;
width:70px;
height:auto;
background-color: red;
right:0;
}
<div class="main_outer">
<div id="out">
<div id="in">
Your Inner Contents
Your Inner Contents
Your Inner Contents
</div>
</div>
</div>
Here is JSFiddle
PS: Change your red div size to fit your contents.
Hope this helps.
Fixed the scroll with removing the overflow-x:hidden;
================ Latest Change ======================
See the latest change if this is what required but a little tweak in markup.
#outer-div {
overflow-y: scroll;
width: 165px;
}
#out{
height:100px;
width:100px;
background-color: green;
position: relative;
}
#in{
position: absolute;
left: 100%;
height:50px;
width:50px;
background-color: red;
}
<div id="outer-div">
<div id="out">
<div id="in">
</div>
</div>
</div>
I'm new with DIV's and I would like to build a simple template for my website.
I need the header to be fixed and 100%, left panel for menu 200px, right panel for main 100% div and bottom panel.
I need that if the left panel doesn't show that the main will be 100%. now if it show's the "main" div in under the left panel. 10X
<div id="top_menu"></div>
<div id="left_menu"></div>
<div id="main"></div>
<div id="bottom"></div>
#top_menu{
height: 40px;
background-color: #343B43;
width:100%;
position: fixed;
z-index: 20;
}
#left_menu{
margin-top:40px;
float: left;
width: 200px;
background: #F4F4F4;
position: fixed;
z-index: 10;
}
#main{
margin-top:40px;
float: right;
background:red;
padding:30px;
width: 90%;
}
#bottom{
height:30px;
position: fixed;
width:100%;
}
Update your HTML and CSS like below.
HTML
<div id="top_menu"></div>
<div class="distab">
<div id="left_menu"></div>
<div id="main"></div>
</div>
<div id="bottom"></div>
CSS
#top_menu{
height: 40px;
background-color: #343B43;
width:100%;
position: fixed;
z-index: 20;
}
.distab{display:table; table-layout:fixed;}
#left_menu{
margin-top:40px;
width: 200px;
background: #F4F4F4;
z-index: 10;
display:table-cell;
}
#main{
margin-top:40px;
background:red;
padding:30px;
width: 100%;
display:table-cell;
box-sizing:border-box;
}
#bottom{
height:30px;
position: fixed;
width:100%;
}
DEMO
<div id="top_menu"></div>
<div id="content">
<div id="left_menu"></div>
<div id="main"></div>
</div>
<div id="bottom"></div>
#top_menu{
height: 40px;
background-color: #343B43;
width:100%;
position: fixed;
}
#lineContainer{
overflow: hidden; /* clear the float */
}
#left_menu{
margin-top:40px;
float: left;
max-width: 200px;
background: #F4F4F4;
}
#main{
margin-top:40px;
background:red;
padding:30px;
overflow: hidden;
}
#bottom{
height:30px;
width:100%;
}
Demo here:
http://jsfiddle.net/msankhala/Ck7pe/3
http://jsfiddle.net/msankhala/Ck7pe/3/embedded/result/
for this you have to put your left menu and main under one div & put leftMenu to the height of 20% and then you will see that main had automatically taken remaining area of its parent div and when leftMenu get disappeared main will automatically take the full 100% area.
You can use Javascript for disappearing purpose but jquery is best to do this all task.
I've created the below jsfiddle recreating my problem, I want that the .dashboard & .inner-dashboard have always a 100% height and keep the footer always at the bottom.
http://jsfiddle.net/rv7xN/1/
HTML
<div id="wrap">
<body>
<div class="dashboard">
<div class="inner-dashboard">
</div>
</div>
</body>
</div>
<div id="footer"></div>
CSS
html,body{
height:100%;
}
#wrap {
min-height: 100%;
height: auto;
margin: 0 auto -60px;
padding: 0 0 60px;
}
#footer {
height: 60px;
background-color: blue;
}
.dashboard{
width: 100%;
height: auto;
min-height: 100%;
position: absolute;
padding-bottom: -60px;
background-color:green;
}
.inner-dashboard{
height:100%;
padding-bottom: -60px;
background-color:red;
}
Here's an example : jsFiddle
I had to modify the html to have a common container for the dashboard and the footer.
<div id="wrap">
<div class="dashboard">
<div class="inner-dashboard">
</div>
</div>
<div id="footer"></div>
</div>
I turn the wrapper (common container) in a table and the other elements in table-cell.
So even if your dashboard is height 200%, the footer's still at the bottom.
html,body{
height:100%;
}
#wrap {
position:absolute;
display:table;
height:100%;
width:95%;
padding-bottom:60px;
}
.dashboard{
width: 95%;
height: 200%;
display:table;
border:5px solid green;
}
.inner-dashboard{
width: 95%;
height: 100%;
display:table-cell;
border:5px solid red;
}
#footer {
display:table;
height: 60px;
width:95%;
border:5px solid blue;
bottom:-10px;
}
Is that it ?!
I have added modified your css and added position attribute
I hope the revision solves your issue: [UPDATE] http://jsfiddle.net/saurabhsharma/rv7xN/3/
I'm making a simple blog theme and I want to have a little box displaying the post date on left off-set of each post like so: http://s21.postimg.org/fjygwqw1z/timestamp_Mockup.png
However, the post's container has an overflow-y set to scroll and attaching the timestamp div to each post won't show as it's hidden by the overflow. I can get around this if I set the timestamp div to position: absolute but then it doesn't stay in-line with the post and instead stays fixed in one place.
Here's a simple example: http://jsfiddle.net/MeVwt/
<style>
#leftCol{
width: 100px;
height: 500px;
background: green;
float: left;
}
#rightCol{
width: 400px;
height: 500px;
background: orange;
overflow-y: scroll;
float: left;
}
.content{
height: 700px;
width: 100%;
background: red;
}
.box{
width: 100px;
height: 100px;
background: purple;
margin-left: -50px;
}
</style>
<div id="leftCol">
</div>
<div id="rightCol">
<div class="content">
<div class="box"></div>
Fish
</div>
</div>
What I'm trying to do is make the purple box (.box) show outside its container (.content) and appear in the green area without setting it to a fixed position so it still scrolls with the content.
If you overlap the #leftCol with the #rightCol (by positioning them absolute to left:0; of their parent container), set the left margin to the width of the left column, then set .content position to relative and box position to absolute, and adjust the positioning using left.
Here is the updated CSS:
#leftCol{
position:absolute;
width: 100px;
height: 500px;
background: green;
left:0;
}
#rightCol{
position:absolute;
padding-left:100px;
width: 400px;
height: 500px;
overflow-y: scroll;
left:0;
}
.content{
height: 700px;
width: 100%;
background: red;
position:relative;
}
.box{
width: 100px;
height: 100px;
background: purple;
position:absolute;
left:-100px;
}
and a DEMO
Hope this helps =)
You could just create another div around the actual content and then float it next to the box.
Like this http://jsfiddle.net/MeVwt/3/
Downside with this is that you have to specify the width of the content for it to fill out all the width.
<div id="rightCol">
<div class="content">
<div class="box"></div>
<div class="content_text">
Fish
</div>
</div>
</div>
Css:
.content_text{
height: 700px;
background: red;
width: 335px;
float:left;
}
.box{
width: 100px;
height: 100px;
background: purple;
margin-left: -50px;
float:left;
}
html {
overflow-x: hidden; }
body {
overflow-x: hidden; }