I have three div's and try to draw a border on every div.
But it only shows a border at the top of the div`s, as you can see here.
This is my code:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.mydiv
{
position: relative;
border:1px solid yellow;
}
.mydiv_content
{
position: absolute;
border:1px solid red;
}
.mydiv_buttons
{
position: absolute;
border:1px solid green; /* D8D8D8 */
}
</style>
</head>
<body>
<div class="mydiv">
<div class="mydiv_content">
<p> TEST 1</p>
</div>
<div class="mydiv_buttons">
<br>
<input type="submit" value="send"></input>
</div>
</div>
</body>
</html>
I don't know why it only shows the border at the top, it would be great if someone can explain this to me. You can find the full code on jsfiddle.
That's because you are setting height with % relative to the parent div which is position:absolute and has no height defined because your are using on it height:800%; that has no affect because of the position property.
Just define the height of the parent in px:
.mydiv
{
position: relative;
border:1px solid yellow; /* D8D8D8 */
width:70%;
height:800px; // define the height
margin-top: 100px;
margin-left: 200px;
}
Your .mydiv element is not getting proper Height
.mydiv {
position: relative;
border: 1px solid yellow;
width: 70%;
height: 80px; //added
margin-top: 100px;
margin-left: 200px;
}
Working Demo
Try change all your class position:absolute; into position:relative;. Or remove the position:absolute in child div.
Try get rid child div height. So won't be huge space in parent div.
Example look at my demo.
My Demo
Related
I've been trying to get the the left and write columns to stick to the bottom of the green box like this http://i.imgur.com/zxChJx5.png but after an hour I'm still having trouble, if anyone could help that would be most appreciated, thank you very much http://jsfiddle.net/jybu6j47/
<!DOCTYPE html>
<html>
<head>
<style>
.well {
height: 300px;
width: 50%;
background-color:green;
}
.something {
background-color: yellow;
}
.left123 {
width: 50%;
float: left;
background-color: pink;
}
.right123 {
width: 50%;
float: right;
text-align:right;
background-color:red;
</style>
</head>
<body>
<div class="well">
Filler
<div class="something">
<div class="left123">Left</div>
<div class="right123">Right</div>
</div>
</div>
</body>
</html>
You need to position:relative; the container, and position:absolute; the contents, then set bottom: 0 on the contents like this:
http://jsfiddle.net/jybu6j47/1/
So it should look like this:
.well {
height: 200px;
width: 50%;
background-color:green;
position:relative;
}
.something {
position:absolute;
bottom:0;
width:100%;
background-color: yellow;
}
Position absolute tells an element exactly where to be, relative to it's closest position:relative (or absolute – or a couple of other properties come to think of it) container. In this case, giving it bottom:0 is effectively saying "Put me zero pixels from the bottom of the container".
iam facing a small issue with overlapping .
Consider this html snippet
<html>
<head>
div
{
width:100%;
height:100px;
}
img
{
width:100%;
}
#div2
{
margin-top:-100px;
}
</head>
<body>
<div id="div1">
<img src=""/>
</div>
<div id="div2">
some text
</div>
</body>
</html>
I want to overlap a div2 over div1. As the code will overlap since margin-top of div2 equals height of div1. My problem is image is overlapping div2. What is the reason of this behaviour ?
And i don't want to give position absolute to the elements since this code will break the layout of the page if position absolute is used.
Thanks.
Check this jsfiddle. As onetrickpony mentioned, need to be positioning the elements.
div
{
width:100%;
height:100px;
}
img
{
width:100%;
}
#div1 {
z-index: 10;
position: relative;
}
#div2
{
position: relative;
margin-top:-100px;
border: 1px solid #f00;
z-index: 20;
color: #fff;
font-weight: bold;
}
I've got the following HTML and CSS:
<!DOCTYPE html>
<html>
<head>
<style>
body, div, html {
margin: 0;
padding: 0;
}
body {
background: #727272;
}
#div1 {
background: #F00;
height: 50px;
}
#div2 {
background: #F0F;
height: 50px;
width: 1500px;
}
</style>
</head>
<body>
<div id="div1">
</div>
<div id="div2">
</div>
</body>
</html>
If I shrink the browser window down to less than 1500px (the width of div2), and then use the browser's horizontal scrollbar to scroll to the right, the width of div1 remains cut off at the width of the browser window, and does not stretch all the way across the screen like div2.
Is there any way to get div1 to always stretch across the screen, regardless of the width of div2?
Please note that in my real code, the width of div2 is always changing, so I cannot just set a fixed width for div1 via CSS.
Thank you.
Try this.
#div1 {
background: #F00;
height: 50px;
width: 100%;
}
In your css try
display: block;
put a wrapper around these two divs...
<div id="div0">
<div id="div1"></div>
<div id="div2"></div>
</div>
Then style the wrapper and divs accordingly
#div0 { display:table; }
#div1 {
display:block;
width: 100%;
background: #F00;
height: 50px; }
#div2 {
display: block;
background: #F0F;
height: 50px;
width: 1500px; }
http://jsfiddle.net/Ls7aj/
Using overflow:hidden on the body, html, #container will do the trick.
Add a width:100%; to #div1 and you're good to go.
http://jsfiddle.net/tCN8H/
Edit: Changed #Content to #container
I'm currently working on a solution, where I have to display an error message above (z-index) a section.
The section has it css overflow attribute set to scroll or hidden. This is causing the error message to be truncate on the left side.
I would very like to keep the DOM as it is. Is there a way to display the div for the error message "above" the blue div.
Js fiddle
HTML :
<div>
<div id="div1">
div 1
</div>
<div id="div2">
div 2
<div id="msgErreur">
Error
</div>
</div>
</div>
**CSS : **
#div1 {
width : 48%;
border: 1px solid red;
height: 150px;
float:left;
}
#div2 {
width : 48%;
border: 1px solid blue;
height: 150px;
float:right;
overflow-y:scroll;
}
#msgErreur {
background:#942911;
color:white;
top:30px;
left: -10px;
width : 150px;
height : 30px;
position:relative;
z-index:5;
}
edit: 2 ways of achieving this. Relatively positioned (extra) element in an absolutely positioned one or (new) an absolutely positioned element and transform.
You can achieve this by using position: absolute on the container of the error message and an extra div relatively positioned between container and message.
The DOM is slightly modified but without moving whole blocks of code, maybe it's OK with your requirements?
Relevant HTML:
<div id="msgErreur">
<div>Error</div>
</div>
Relevant CSS:
#msgErreur {
position: absolute;
z-index: 5;
color: white;
}
#msgErreur > div {
position: relative;
top: 30px; left: -10px;
width: 150px; height: 30px;
background: #942911;
}
Fiddle
EDIT: it's 2016 and transform: translate(X, Y) is compatible with a large set of browsers (IE9+ according to caniuse.com).
Here's another way of achieving what OP needed, with no extra element needed:
#div1 {
width : 48%;
border: 1px solid red;
height: 150px;
float:left;
}
#div2 {
width : 48%;
border: 1px solid blue;
height: 150px;
float:right;
overflow-y:scroll;
}
#msgErreur {
background:#942911;
color:white;
/* top:30px; */
/* left: -10px; */
width : 150px;
height : 30px;
position: absolute; /* not relative anymore */
/* z-index:5; It's already stacked above if positioned. Needed if other positioned elements are there (a value of 1 would be enough) */
transform: translate(-10px, 30px); /* replaces relative positioning (left and top => X and Y) */
}
<div>
<div id="div1">
div 1
</div>
<div id="div2">
div 2
<div id="msgErreur">
Error
</div>
</div>
</div>
Codepen
I am trying to make an overlapping a DIV onto other visually . I am trying
{
position:absolute;
top:-10px;
}
in css, but I found that this top attribute is not working properly in firefox. Dear fellas, how to do that? Please help me with some codes or examples.
thx in advance
Here's an easy way
CSS
.top {
position: relative;
}
.topabs {
position: absolute;
}
HTML
<div class='top'>
<div class='topabs'>
I'm the top div
</div>
</div>
<div>No styles, just frowns :(</div>
The relative positioned div collapses as there are no contents, causing the coordinates 0,0 coordinates of the absolute positioned div to be that of the div underneath.
Fiddle
http://jsfiddle.net/y5SzW/
Try this, I like to use relative position for this kind of thing.
<html>
<head>
<style type="text/css">
body{
background-color: #000;
padding:0;
margin:0;
}
#bottom {
width: 200px;
height: 200px;
border: 5px #fff solid;
background-color:#f00;
margin: 0 auto;
}
.top {
width: 200px;
height:200px;
top: 10px;
left: -100px;
z-index: 10;
background-color: #00f;
color: #333;
border: 5px solid #fff;
position: relative;
}
</style>
</head>
<body>
<div id="bottom">
<div class="top"></div>
</div>
</body>
</head>
I would of course seperate the CSS into it's own file later.
Just use position: relative instead of absolute, or add a negative margin-top: -10px instead.