This question has been asked here before, yes. But none of the answers seem to work for me and what I am trying to do.
I need a div to display across the entire browser. So far, I have this.
HTML
<body>
<div id="header">My Website</div>
<div id="games">Video Games</div>
</body>
CSS
#header {
height: 80px;
background-color: black;
color: white;
width: 100%;
top: 0;
left: 0;
position: absolute;
}
#games {
height: 40px;
border: 1px solid black;
background-color: grey;
}
So, top:0, left:0, and position:absolute are what get my div to span across the entire page. What's the problem?
My #games div is hidden behind my #header div. I am relatively new to html and css, and when I started learning divs, they would display right next to each other or right below and on top one another.
When I take out position:absolute, the #games div drops below the #header div, but then the header div only goes to the edge of the page's left and right side, and the top. I want it to go all the way to the edge, with no space in between the div and the browser sides, AND have my #games div naturally display underneath.
Note that I know that I can adjust the #games div's top-margin, but I wanted to know if there was a way to have it naturally sit underneath the #header div.
What can I do to make it so that my #games div is not naturally hidden behind the #header div, and sits just below?
My suggestion is to do it like this DEMO:
body {
margin: 0;
}
#header {
height: 80px;
background-color: black;
color: white;
}
#games {
height: 40px;
border: 1px solid black;
background-color: grey;
}
<body>
<div id="main_wrap">
<div id="header">My Website</div>
<div id="games">Video Games</div>
</div>
</body>
CSS
body{
margin: 0px;
padding: 0px;
}
#main_wrap {
background-color: gray;
width: 100%;
}
#header {
height: 80px;
background-color: black;
color: white;
width: 100%;
top: 0;
left: 0;
}
#games {
height: 40px;
border: 1px solid black;
background-color: grey;
}
position: absolute; This tells the browser that whatever is going to be positioned should be removed from the normal flow of the document and will be placed in an exact location on the page.
so it means in your CSS you not really need to use position:absolute because by default when you will put div in html document it will start from top, left.
Note: you should think about using position:absolute in worst case scenario and if still need to use please make sure parent div should be position:relative.
#header {
height: 80px;
background-color: black;
color: white;
width: 100%;
/* top: 0;
left: 0;
position: absolute;*/
}
Related
I have two divs, div1 and div2. I wanted div2 below div1 because I have used position absolute property in div1. Div2 is going above div1
I wanted to use position absolute because I wants to position div1 at bottom left corner
.home {
position: absolute;
border: 2px solid green;
top: 50%;
left: 8px;
padding: 33px 23px;
line-height: 60px;
display: block;
}
.about {
display: block;
border: 2px solid red;
}
<div class="home">div1</div>
<div class="about">div2</div>
If you want to have the div1 in lower left corner, and want div2 below the div1, then:
you can enclose the 2 divs in another div, and have the position: absolute; for that div
and also, instead of top: 50%;, you can have bottom: 0.
This will make sure that, the parent div is placed exactly at the bottom left corner (and not on left edge).
And you can remove the position: absolute; from div1.
This way, you can be sure that div2 will appear below div1, as both these divs will not have position set as absolute, and they will appear relative to each other.
.home {
border: 2px solid green;
padding: 33px 23px;
line-height: 60px;
display: block;
}
.about {
display: block;
border: 2px solid red;
}
.bottomLeft {
position: absolute;
bottom: 0;
}
<div class="bottomLeft">
<div class="home">div1</div>
<div class="about">div2</div>
</div>
Edit 1: Modified top: 50%; to bottom: 0;, and improved formatting.
To immediately solve your problem, I would suggest wrapping both of these divs in another element, then positioning that new outer element absolutely at the bottom left:
.container {
/* position in the bottom left*/
position: absolute;
bottom: 0;
left: 0;
}
.home {
border: 2px solid green;
padding: 33px 23px;
line-height: 60px;
}
.about {
border: 2px solid red;
}
<div class="container">
<div class="home">div1</div>
<div class="about">div2</div>
</div>
There are many ways to solve the same problem in CSS however, and which is the best largely depends on the context. There's not really enough information in your question to give a definitive answer, or even to be sure the above will work as expected in your case.
I have a page where I have a div at the bottom of the page which when clicked shows another div, just above the bottom div.
I'd like to avoid the footer divs overlapping the content div higher up the page when the window is resized.
The heights of the divs involved shouldn't change.
Is a CSS-only solution possible?
I've created a jsfiddle here
CSS
html, body {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
}
#container {
height: 100%;
width: 100%;
background-color: white;
border: solid #aaa 1px;
padding: 4px;
}
#content {
height: 300px;
border: solid blue 1px;
}
#footer-content {
height: 100px;
border: solid red 1px;
display:none;
}
#footer-footer {
cursor: pointer;
height: 20px;
border: solid cyan 1px;
}
#footer.expanded #footer-content {
display:block;
}
#footer {
position: absolute;
bottom: 0px;
width: 100%;
}
HTML
<div id="container">
<div id="content">content
</div>
<div id="footer">
<div id="footer-content">footer-content</div>
<div id="footer-footer">Click me to expand</div>
</div>
</div>
JS
$("#footer-footer").on("click", function (evt) {
$("#footer").toggleClass("expanded");
});
Simply add position: relative to the #container. This way the absolute positioning of the footer refers to the container.
http://jsfiddle.net/5bkznxud/5/
You'll probably notice that in the example above there's always a scrollbar on the right. This is because of the borders and padding on #container. Here's an example with outline (border with no calculated width) and without any padding:
http://jsfiddle.net/5bkznxud/6/
TIP: Always use outline instead of border for blocking a layout OR use box-sizing: border-box. This causes a box' dimensions to also calculate for the border. Otherwise a box with width of 100% and border will span slightly wider than you want.
It can be solved by using calc().
In this case you can create a jQuery function that get the height of footer-content and footer-footer -> .height(). Without jQuery, I don't think it's possible.
Here is an example:
html, body {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
}
#container {
height: 100%;
width: 100%;
background-color: white;
border: solid #aaa 1px;
padding: 4px;
min-height: 420px;
}
#content {
height:calc(100% - 135px);
border: solid blue 1px;
}
#footer-content {
height: 100px;
border: solid red 1px;
display:none;
}
#footer-footer {
cursor: pointer;
height: 20px;
border: solid cyan 1px;
}
#footer.expanded #footer-content {
display:block;
}
#footer {
position: absolute;
bottom: 0px;
width: 100%;
}
http://jsfiddle.net/dokmngv0/
Browser support for the calc() feature: http://caniuse.com/#feat=calc
I have a set of divs that vary in size depending on an image inside it. Inside each div I would like two more divs, one is floated left and the other is floated right, like so:
I sort of accomplished it this way ... html:
<div class="image-wrap">
<img src="{{ img }}">
<div class="lookbook-title"><h5 >{{ title }}</h5></div>
<div class="item-buy">{{ theme:partial src="_buynow" }}</div>
</div>
and css:
div.image-wrap {
max-height: 1000px;
max-width: 100%;
border: 0;
display: inline-block;
height: auto;
box-sizing: border-box;
}
.lookbook-title {
position: relative;
top: -36px;
float: left;
padding-left: 10px;
padding-right: 10px;
color: #f7f7f7;
}
.item-buy {
position: relative;
top: -56px;
float: right;
padding-right: 20px;
pointer-events: none;
-webkit-font-smoothing: antialiased;
fill: #f7f7f7;
}
The reason I say "sort of" is because it initially was working just fine, but now the floated divs are appearing on above and outside their parent divs. What is interesting is that if I inspect the problem with dev tools and uncheck and recheck the "float" on either div both go back to where I want them to go...
You need to clear your floats.
Here is a interesting article that explains it in detail: http://css-tricks.com/snippets/css/clear-fix/
Hope this helps.
You should use position: absolute; for your 'floating' elements instead of float.
You'll need to add position: relative; to the parent wrap element - this will tell the children to respect the bounds of this element instead of floating somewhere outside of it. Then you can add position: absolute; to each of the children that you want to float and use top, bottom, left, right to control where the box is positioned. Experiment with different values to get the hang of it.
div.image-wrap {
height: 300px;
width: 400px;
position: relative;
border: 1px solid red;
}
.lookbook-title,
.item-buy {
background: white;
position: absolute;
bottom: 10px;
height: 100px;
width: 100px;
}
.lookbook-title {
border: 1px solid lime;
left: 10px;
}
.item-buy {
border: 1px solid blue;
right: 10px;
}
<div class="image-wrap">
<img src="http://www.placehold.it/400x300.jpg">
<div class="lookbook-title"><h5>Div 1</h5></div>
<div class="item-buy">Div 2</div>
</div>
I've got a div within a div, both are percentage based for the page but the nested div overlaps slightly to the right.
I'm actually trying to get the white box sit inside the first light blue div with a small margin on all sides so you can see a bit of the darker backround color, making it stand out more.
Editing to point out that the point of the position:fixed is to make the white box move as you scroll.
A solution was posted that involved chaning the position to relative, although this obviously stops the box from moving.
JSFiddle
div {
border-radius: 5px;
}
#header {
height: 50px;
background-color: #F38630;
margin-bottom: 10px;
}
.left {
height: 1300px;
width: 25%;
background-color: #A7DBD8;
float: left;
margin-bottom: 10px;
}
.right {
height: 1300px;
width: 75%;
background-color: #E0E4CC;
float: right;
margin-bottom: 10px;
}
#footer {
height: 50px;
background-color: #69D2E7;
clear: both;
}
#fixedleft {
height: 50px;
width: 25%;
background-color: #FFFFFF;
position: fixed;
margin: 1px 1px 1px 1px;
}
<html>
<head>
<title>Result</title>
</head>
<body>
<div id="header"></div>
<div class="left"><div id="fixedleft"></div></div>
<div class="right"></div>
<div id="footer"></div>
</body>
</html>
Your margin is increasing with the width.
Try:
#fixedleft {
height: 50px;
width: calc(25% - 2px);
background-color: #FFFFFF;
position: fixed;
margin: 1px;
}
I guess that this issue is due to default body margin as it doesn't affect the width of your fixed div(as you can see in the example, it's width is always the same, no matter what margin value you set, unlike it's container's width) :
body { margin:0; }
There is still a problem with the inner margin (1px) that pushes it out of the container, you can use calc for it, here is an example:
JSFiddle
#fixedleft {
background-color: #ffffff;
height: 50px;
margin: 2px;
position: relative;
width: 98%;
}
Please try this instear of
#fixedleft {
height: 50px;
width: 25%;
background-color: #FFFFFF;
position: fixed;
margin: 1px 1px 1px 1px;
}
if you load jQuery..
$(window).bind("resize", function(){
$("#fixedleft").width( parseInt($(".left").width()) -2)
})
$(function(){$(window).resize()})
In the following code, I'd like the #nav div to overlap the #content div. Even though #nav has a higher z-Index value, it is still being overlapped by #content.
FIDDLE: http://jsfiddle.net/Zfcba/
HTML:
<div id="page">
<div id="nav"></div>
<div id="content"></div>
</div>
CSS:
#page
{
margin: 20px 0px;
padding: 10px;
display: block;
width: 70%;
height: 200px;
border: 1px solid gray;
}
#nav
{
float: left;
width: 40px;
height: inherit;
border: 1px solid red;
z-index: 999;
}
#content
{
float: left;
margin-left: -20px;
width: 200px;
height: inherit;
border: 1px solid blue;
background: lightgray;
z-index: 0;
}
Pretty simple code, but I can't understand what I'm doing wrong. Any help would be appreciated.
Note: I tried the same without the outer div (http://jsfiddle.net/Zfcba/1). Still the same problem. :(
Add this to your css
#above{position:absolute;}
z-index only works for absolute positioned elements. As the browser ignores the value for z-index, it will then render it in the order the elements are in your html-code. As #content is later in your code than #nav, #content will be displayed over #nav.