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".
Related
How do I make a fixed element push other elements to the side when they overlap?
I don't want this:
Or this:
I want this:
I want to know how to make the elements collide or push so that I can easily align the elements without having to position them pixel by pixel.
Edit: I tried positioning a div to be fixed and displaying it as a block, but other elements were still overlapping it. Is it even possible to push elements away from a fixed element?
Is it even possible to push elements away from a fixed element?
I would say no. Not with this concept.
I can think of two solutions that I would not recommend.
Implement it with an iframe. But I would not recommend that.
Using JS to read out the width and assign it to the neighbouring element.
I updated my question after i got a good hint. For this example i added body height 200vh; that you can scroll down to see like it works.
body {
height: 200vh;
}
.verti {
background: red;
width: 200px;
height: 500px;
z-index: 10;
position: fixed;
top: 8px;
}
.hori {
background: green;
width: 500px;
height: 200px;
z-index: 1;
position: relative;
left: 200px;
}
<div class="w">
<div class="hori"></div>
<div class="verti"></div>
</div>
Tried using float? I'm pretty new to all this but this is what I got:
<body>
<div id="container">
<div id="fixed">
<p class="center-text white">Fixed <br>Element</p>
</div>
<div id="not-fixed">
<p class="center-text white">Not Fixed Element</p>
</div>
</div>
<style>
* {
padding: 0;
margin: 0;
font-family:arial;
}
.center-text {
text-align:center;
position:relative;
top:45%;
}
.white {
color:white;
}
#container {
margin:10px;
width:700px;
height:700px;
}
#fixed {
background-color:red;
position:fixed;
width:200px;
height:500px;
}
#not-fixed {
position:relative;
background-color:green;
width:500px;
height:200px;
float:right;
}
</style>
</body>
I am trying to build a container with the dimensions of 26x26 pixels and display a number at the very bottom right of this container. In addition, I would like to add a background 24x24 picture to the container.
The code I have so far is as follows
<html>
<style>
body {
height:26px;
width:26px;
background-color:red;
}
#bottom {
vertical-align:bottom;
text-align:right;
background-color:yellow;
}
</style>
<body>
<p id="bottom">2</p>
</body>
</html>
And here's a JSFiddle link to make things easier https://jsfiddle.net/n8ku715x/
As you can see from JSFiddle, it is not entirely working. It's not even setting the right dimensions. Any help is appreciated.
<style>
body {
}
#ctn {
height: 26px;
background-color: red;
width: 26px;
position:relative
}
#bottom {
position: absolute;
bottom: 0;
right: 0;
font-size: 8px;
color: #fff
}
</style>
<body>
<p id="ctn"><span id="bottom">2</span></p>
</body>
Here's your container, with the number within it - is that what you were looking for?
Try this:
CSS
.container{
width:26px;
height:26px;
position:relative;
background-color:red;
}
.container-number{
position:absolute;
bottom:0;
right:0;
background-color:yellow;
}
HTML
<div class="container">
<div class="container-number">2</div>
</div>
Just add bottom 0 and position to the class if u wants the fixed
CSS
#bottom {
background-color: yellow;
bottom: 0px;
position: fixed;
}
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
I am sorry to keep asking versions of the same question but this seems difficult to achieve. Here's the code I have so far:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<style type="text/css">
body, html{
height: 100%;
}
#outer {
width: 90%;
height: 90%;
margin: 5% 5% 5% 5%;
background-color: #333;
}
#left-content {
height: 100%;
width: 50%;
float:left;
}
#right-content {
height: 100%;
width: 50%;
float:left;
}
</style>
<div id="outer">
<div id="left-content" style="background-color: red;">xx</div>
<div id="right-content" style="background-color: yellow;">xx</div>
<!-- we need to clear -->
<br style="clear:both" />
</div>
</body>
</html>
Now it seems I see scroll bars but I just want the outer DIV to occupy 90% of the screen and there not to be scrollbars.
Find the fiddle here.
This is a pretty interesting bug I've never seen. Without going with the nasty body { overflow:hidden; } approach, I've found some fixes:
1 - Using display:inline-block (not the actually wanted)
#outer {
display:inline-block;
width: 90%;
height: 90%;
margin: 5% 5% 5% 5%;
background-color: #333;
}
2 - Using padding instead of margin (not the actually wanted)
#outer {
width: 90%;
height: 90%;
padding: 5% 5% 5% 5%;
background-color: #333;
}
3 - Using position absolute (recommended)
#outer {
position:absolute;top: 5%;bottom: 5%;right: 5%;left: 5%;
background-color: #333;
}
I will edit this answer on further investigation of this issue.
As per http://www.w3.org/TR/CSS2/box.html#box-dimensions
The percentage is calculated with respect to the width of the
generated box's containing block. Note that this is true for
'margin-top' and 'margin-bottom' as well.
Which means that by putting 90% width on the body, will cause the 5% of the margin to be 5% out of 90%, instead of the expected 100%, which causes the "bug." - Same applies to padding.
Here is how I would do it: http://jsfiddle.net/remibreton/8hfwp/1/
The trick here is to leave the browser figure out the width and height of the outer element. To do so you specify top:0; bottom:0; left:0; right:0; to make sure it fills up the entire available space. Then you add margin:5%; to reduce the height and width to 90%. The outer element should be position:relative; to allow absolute positioning inside it.
For the content elements, they can both be width:50%; height:100%. What you need to do is to make sure that the right one get a special left:50% treatment.
HTML
<div id="outer">
<div class="content left">xx</div>
<div class="content right">xx</div>
</div>
CSS
body, html { height: 100%; }
#outer { position:absolute; margin:5%; bottom:0; top:0; left:0; right:0; overflow:hidden; } /* margin:5% to make sure the width and height are actually 90%. Overflow is optional */
.content { position:absolute; width:50%; height:100%; } /* Applies to both content element */
.content.left { background-color:yellow; }
.content.right { background-color:red; left:50%; } /* Left position is equal to the right content element */
This method allows cleaner and more flexible CSS than what you previously had. Bonus internet points!
Try this:
body, html{
height: 100%;
margin: 0;
}
#outer {
width: 90%;
height: 90%;
position: absolute;
margin: 5%;
background-color: #333;
}
change overflow property to hidden(overflow:hidden;) then change the margin of #outer to margin:2.5% 5%;. Here is the full code:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<style type="text/css">
body, html{
height: 100%;
overflow:hidden;
}
#outer {
width: 90%;
height: 90%;
background-color: #333;
margin: 2.5% 5%;
}
#left-content {
height: 100%;
width: 50%;
float:left;
}
#right-content {
height: 100%;
width: 50%;
float:left;
}
</style>
<div id="outer">
<div id="left-content" style="background-color: red;">xx</div>
<div id="right-content" style="background-color: yellow;">xx</div>
<!-- we need to clear -->
<br style="clear:both" />
</div>
</body>
</html>
Hope it'll work!
It seems to be being caused by margin collapsing going wrong. Add padding:0.01px to the <body> and it works like it should.
If you want something fixed-size on the screen, you should probably just use position:fixed like so:
#outer {
position:fixed;
left: 5%; right: 5%; top: 5%; bottom: 5%;
background:#333;
}
#left-content {
position:absolute;
left:0; top: 0; width:50%; bottom: 0;
}
#left-content {
position:absolute;
left:50%; top: 0; width:50%; bottom: 0;
}
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.