I am using position: absolute; so my div can be placed at the bottom, but I also need to use float: left; so that each new div will be placed next to it, but they are just being placed in the same spot, any suggestions?
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.media_container{
min-width: 800px; max-height: 800px;
min-height: 300px; max-height: 300px;
border: 2px solid #f00;
position: relative;
}
.media_header{
min-width: 220px; max-width: 220px;
min-height: 50px; max-height: 50px;
border: 2px solid #f00;
float: left;
/*position: absolute;*/
margin-left: 30px;
bottom: 30px;
}
</style>
<title>Test</title>
</head>
<body>
<div class='media_container'>
<div class='media_header'>Header 1</div>
<div class='media_header'>Header 2</div>
<div class='media_header'>Header 3</div>
</div>
</body>]
jsFiddle DEMO
In order to float divs at the bottom of the webpage, your container needs to be set absolute and placed at the bottom.
Then, all contents in this container are relative along with your float requirements. Done!
.media_container {
position: absolute;
bottom: 0;
min-width: 800px;
max-height: 800px;
min-height: 300px;
max-height: 300px;
border: 2px solid #f00;
}
.media_header {
position: relative;
float: left;
margin-left: 30px;
margin-top: 30px;
min-width: 220px;
max-width: 220px;
min-height: 50px;
max-height: 50px;
border: 2px solid #f00;
}
If all the divs have the same position:absolute attribute then they are all going to overlap.
Have a parent div for the divs that you want to show at the bottom. And style this parent div with position:absolute and bottom:0
Heres the JSFIDDLE. I hope this is what you want.
Related
I am gonna to copy paste all the code, so you can check everything and understand what it's the problem. Thank you.
I just wanted to make it appear under the previously div. Just like it shoud be, because this problems not only appears with this div, but with everything else.
.presentazione
{
position: relative;
top: 100px;
width:auto;
height:auto;
text-align: center;
font-size:30px;
border: 2px solid red;
}
.sottofondo
{
position: relative;
display: inline-flex;
width: auto;
height: auto;
border: 2px solid grey;
}
.messaggio
{
position: relative;
width: auto;
height: auto;
border: 1px solid green
}
.sottofondo .icona
{
position: relative;
width: auto;
height: auto;
border:1px solid pink;
}
.preview
{
position: relative;
width: auto;
height: auto;
}
<div class="presentazione"> MESSAGE </br> OTHERS THINGS, BLA BLA BLA
<div class="sottofondo">
<div class="messaggio"> ANOTHER THING </div>
<div class="icona"> <img src="Icons/CuoreV.png" style="width:30px; height:30px;"/></div>
</div>
</div>
<div class="preview"> PROBLEM HERE </div>
Your problem if I understood correctly is that you have on your presentazione element the top property which this makes the element to move 100px from the top of the page without pushing the other elements.
If you want it to have a 100px distance from top better use margin-top: 100px.
I removed the top property from that class and it seems to be correct. Check it out below:
.presentazione {
position: relative;
width: auto;
height: auto;
margin-top: 100px; /* changed from top to margin-top */
text-align: center;
font-size: 30px;
border: 2px solid red;
}
.sottofondo {
position: relative;
display: inline-flex;
width: auto;
height: auto;
border: 2px solid grey;
}
.messaggio {
position: relative;
width: auto;
height: auto;
border: 1px solid green
}
.sottofondo .icona {
position: relative;
width: auto;
height: auto;
border: 1px solid pink;
}
.preview {
position: relative;
width: 200px;
height: 200px;
}
<div class="presentazione"> MESSAGE </br> OTHERS THINGS, BLA BLA BLA
<div class="sottofondo">
<div class="messaggio"> ANOTHER THING </div>
<div class="icona"> <img src="Icons/CuoreV.png" style="width:30px; height:30px;"/></div>
</div>
</div>
<div class="preview"> PROBLEM HERE </div>
Your .presentazione div's position is set to relative and its top:100px, so other elements are behaving like its still in its original position, therefore you see that overlap, you can try margin-top:100px instead of top:100px and it will work.
more info on relative positioning here: https://developer.mozilla.org/en-US/docs/Web/CSS/position
Hy guys.
I have a situation of overlay div inside another div.
Why the main div not fit the height size when i using position relative in a inner div to create a overlay.
See the picture
I cannot use position: absolute because i need the scroll working inside the main div.
See the code:
div.main
{
width: 300px; height: auto;
border: solid 1px black; overflow: auto;
}
div.box1
{
width: 350px; height: 50px; border: solid 1px red;
}
div.box2
{
position: relative; top: -52px; left: 0px; z-index: 1;
width: 350px; height: 50px; border: solid 1px green;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="main">
<div class="box1">box 1</div>
<div class="box2">box 2 - overlay</div>
</div>
</body>
</html>
I can use another css settings but i need to sinc the scroll of the inner divs.
If I understand your question correctly, this is what you need:
div.main
{
width: 300px; height: auto;
border: solid 1px black; overflow: auto;
position: relative;
}
div.box1
{
width: 350px; height: 50px; border: solid 1px red;
}
div.box2
{
position: absolute;
top: 0;
left: 0px;
z-index: 1;
width: 350px;
height: 100%;
background: rgba(0,0,0,0.5);
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="main">
<div class="box1">box 1</div>
<div class="box2"></div>
</div>
</body>
</html>
position: relative still keeps the original space free for its element - it only moves the element away from its original position by the top/bottom/left/right values. But the free space is still where it is without those settings. A wrapping container with aut height will act as if the relatively positioned element still were at its original position, causing what you brought up in your question.
So to force a solution as you seem to want it, you'll have to use a fixed height and overflow-y: hidden on your container element.
div.main {
width: 300px;
height: 52px;
border: solid 1px black;
overflow-y: hidden;
}
div.box1 {
width: 350px;
height: 50px;
border: solid 1px red;
}
div.box2 {
position: relative;
top: -52px;
z-index: 1;
width: 350px;
height: 50px;
border: solid 1px green;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="main">
<div class="box1">box 1</div>
<div class="box2">box 2 - overlay</div>
</div>
</body>
</html>
how can I make div left3 bottom and left4 bottom align to the bottom (like left2 bottom) and also stretch left2 top div over full width?
I tried vertical-align: bottom; but it does not help.
cheers,
Pete
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>test</title>
<style type="text/css">
.wrapper{
margin: 0px auto;
width: 940px;
background-color: #28cf21;
}
.header{
width: 100%;
background-color: #12bf81;
}
.left1{
float: left;
margin-right: 20px;
width: 220px;
height: 500px;
background-color: #fc0234;
}
.left2{
float: left;
margin-right: 20px;
width: 220px;
height: 500px;
background-color: #f78325;
}
.left2oben{
float: left;
margin-right: 20px;
width: 220px;
height: 250px;
background-color: #f78325;
}
.left2unten{
float: left;
margin-right: 20px;
width: 220px;
height: 250px;
background-color: #f11325;
}
.left3{
float: left;
margin-right: 20px;
width: 220px;
height: 250px;
background-color: #f78325;
}
.left4{
float: left;
width: 220px;
height: 250px;
background-color: #f78325;
}
body {
padding: 0px;
margin: 0px;
font-size: 90%;
background-color: #00ccff;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="header">
header
</div>
<div class="left1">
left1
</div>
<div class="left2">
<div class="left2oben">
left2 top
</div>
<div class="left2unten">
left2 bottom
</div>
</div>
<div class="left3">
left3 bottom
</div>
<div class="left4">
left4 bottom
</div>
</div>
</body>
</html>
Have you tried using "bottom" in css?
.left3{
float: left;
margin-right: 20px;
width: 220px;
height: 250px;
background-color: #f78325;
position: absolute;
bottom:0;
}
.wrapper{
margin: 0px auto;
width: 940px;
background-color: #28cf21
Position:relative;
}
When both .left3 and .left4 are set to float:left there will be an issue of the two overlapping. for that you can use different float settings, or use left or right in css just like we used bottom.
Explanation
In css, we set bottom to 0 for .left3 and .left4, this means the two divs, are 0 pixels from the bottom. The same can be used for top, right left.
Position must be set to absolute, in order for this feature to work.
Also, its a good idea to get into the habit of putting a semi-colon at the end of every statement in css, regardless if its the ending statement in the brackets.
UPDATE
Set the position for the wrap div to relative, then the position for the inner div to absolute. The positioning means the contents can overlap each other, so you must maintain fixed heights for your content
hope it can helped you :)
.left3{
float: left;
margin-right: 20px;
width: 220px;
height: 250px;
background-color: #f78325;
bottom: 0!important;
position: absolute;
}
.left4{
float: left;
width: 220px;
height: 250px;
background-color: #f78325;
position: absolute;
bottom: 0;
left:38%;
}
<div id="map1" style=" float: left; margin-left: 150px; border:2px solid grey;">
<div id="red">
<div id="green"></div>
<img id="map_img" src="images/map/location-map-small.gif" alt="map">
</div>
</div>
#map1{
margin-top: 10px;
margin-left: 100px;
width : 400px;
height : 400px;
overflow: hidden;
z-index: 105;
}
#green{
background: url("location-map-large.gif");
background-position: 0px 0px;
background-color: green;
height: 100px;
width: 100px;
position: absolute;
overflow: hidden;
display : none;
border: 2px solid grey;
}
#red{
height: 400px;
width: 400px;
overflow: hidden;
position: absolute;
}
I have two divs showing the zooming effect styled as listed below. The problem is that there isn't any effect of adding "margin-left" style to the "map1" element, what should I do to place it according to my requirement?
Add 'position:relative' to map1 CSS and then use the left property to position green and red.
#map1 {
background: blue;
width : 400px;
height : 400px;
position: relative;
}
#green {
background: green;
height: 100px;
width: 100px;
position: absolute;
left: 50px;
}
See result here:
http://jsfiddle.net/u4j2F/
you can position the element width padding
Live Demo here
this for my successors. :) in this case i used positioning : relative for the id "map1" and used left instead of margin-left and got my job done.
first of all is there a good tutorial about positioning elements which really explains what's going on? I've read multiple but can't get a grip on it.
the specific problem I have is as follows:
I have a header div-element (in red) with underneath 2 columns(white and green). Normally with float:left; i can position the elements next to each-other. But now I want one (the white one) to move a bit over the header als shown.
with relative positioning with a negative top value I can get the white one at the right position but how to position the second column. When adjusting the browser size it al gets messed up.
#Column1
{
float: left;
position: relative;
top: -140px;
background-color: #FFFFFF;
left: 70px;
width: 280px;
min-height: 500px;
padding: 10px;
}
#Column2
{
float: left;
width: 800px;
background-color: #00FF00;
}
Here is JSFiddle that demonstrates your layout without floats using position absolute.
In my experience position absolute is more flexible and made for this kind of layouts, especially when you want to dock elements using top, right, bottom and left.
There are circumstance where you need to fallback on using floats, but in this case it is not needed.
Use floats to float things around it and position absolute to dock things.
The HTML
<div id="Header">header</div>
<div id="Column1">Left</div>
<div id="Column2">Right</div>
The CSS
#Header {
background-color: red;
height: 200px;
}
#Column1 {
position: relative;
background-color: #FFFFFF;
top: -140px; left: 70px;
width: 280px;
min-height: 500px;
}
#Column2 {
position: absolute;
background-color: #00FF00;
left: 350px; top: 200px; right: 0;
min-height: 360px;
}
Update Remove display:none from the .more class in the JSFiddle and see that the containers are flexible as well.
I'm just gonna spitball here:
HTML
<div id="red"></div>
<div id="white"></div>
<div id="green"></div>
CSS
#red {
width: 100%;
float: left;
height: 100px;
position: relative;
background-color: #f00;
}
#white {
width: 20%;
float: left;
margin-left: 4%;
margin-top: -40px;
position: relative;
background-color: #fff;
height: 400px;
}
#green {
width: 76%;
float: left;
position: relative;
background-color: #0f0;
height: 400px;
}
Does it work?
You could just use a minus margin
http://jsfiddle.net/gAKAK/
This is kind of a complex request, so don't feel bad that you weren't able to figure it out. You shouldn't have to set the width of anything other than your sidebar for this solution; my solution relies on an uncommon use of overflow: hidden to achieve this.
http://jsfiddle.net/Wexcode/uBQEu/
HTML:
<div id="header"></div>
<div id="white"></div>
<div id="green"></div>
CSS:
#header {
background: red;
height: 70px;
border: 1px solid #000; }
#white {
background: #fff;
float: left;
margin: -30px 0 0 70px;
width: 100px;
height: 230px;
border: 1px solid #000; }
#green {
background: green;
overflow: hidden;
height: 201px;
border: 1px solid #000;
border-top: 0;
border-left: 0; }