How do I place the adInfoBox1 at the bottom of the container?
Take a look at this: http://jsfiddle.net/snowman/hxXJh/
Please note that the container will not have a fixed height.
You can use position: absolute.
.container
{
height: 400px;
position: relative;
}
.adInfoBox1 {
padding: 5px 5px 5px 10px;
position: absolute;
bottom: 0px;
width: 457px;
background-color: green;
}
.adRegularList .categoryList {
bottom: 0;
height: 16px;
position: absolute;
}
See a working example here: http://jsfiddle.net/hxXJh/5/
I'd suggest:
.adInfoBox1 {
padding: 5px 5px 5px 10px;
position: absolute;
bottom: 0; /* attaches the element to the bottom */
left: 0; /* attaches the element to the left-side */
right: 0; /* attaches the element to the right-side */
background-color : green;
}
The above will give the .adInfoBox 100% width, implicitly. This can be adjusted by removing, or amending, the right or left declarations. I removed the float because using position: absolute; will take the element out of the document flow anyway.
JS Fiddle demo.
Simple tricky solution. Div2 will be at the bottom of containerDiv.
<div id="containerDiv">
<div id="div1" style="heigth:90%;"></div>
<div id="div2">Content here...</div>
</div>
change the css of adInfoBox1 to:
.adInfoBox1 {
float: left;
padding: 5px 5px 5px 10px;
position: absolute;
width: 457px;
background-color : green;
bottom: 0;
}
Related
Button element doesn't stretch to full parent width with left/right zero technique. It perfectly works for a tag but not for button. What am I missing?
The question is why left/right approach isn't working for button.
I know that I can use wrapper, calc() or flexbox. But it seems strange that old way doesn't work.
Fiddle
#container {
position: relative;
width: 400px;
height: 60px;
padding: 0 20px;
background: #ccc;
}
.button {
position: absolute;
left: 20px;
right: 20px;
height: 20px;
background: green;
color: white;
border: 1px solid #000;
}
a.button {
top: 0;
}
button.button {
top: 20px;
display: block;
}
button.button-full {
width: 100%;
top: 40px;
}
<div id="container">
<a class="button">Link button</a>
<button class="button">Button button</button>
<button class="button button-full">Button button</button>
</div>
You can set width:inherit on the button, but be aware that it won't work when box-sizing:border-box is set on the container, otherwise you will probably need width:calc(100% - paddings), also mentioned in the other answer.
button {
width: inherit;
}
you can add button width to 100% so that it will be 100% of its parent container.
.button {
position: absolute;
left: 0;
right: 0;
**width: 100%;**
background: green;
color: white;
border: 1px solid #000;
}
Add width: calc(); to the .button as in
a.button {
top: 0;
width: calc();
}
This will stretch it to 100% and retain your padding of the parent element.
Your button is overflowing the parent since your button is absolute and has left of 20px.
There is no need to compensate for the parent padding.
Change left left: 0px; or remove position: absolute;.
.button{
position: absolute;
left: 0px;
...
}
I would rather be removing position: absolute;
This question already has answers here:
Why does this CSS margin-top style not work?
(14 answers)
Closed 5 years ago.
Why top:0 with position:absolute not working here?
I want to mention that in this condition I don't have control on any other element other than .heatmap
body {
position: relative;
margin: 0;
padding: 0
}
.section1 {
margin-top: 107px;
border: 1px solid green
}
.heatmap {
z-index: 2147483642;
top: 0px;
left: 0px;
position: absolute;
width: 1425px;
height: 1110px;
opacity: 0.7;
background: red
}
<div class="section1">something</div>
<div class="heatmap">hamara heatmap</div>
You have encountered collapsing margins.
heatmap is positioned with respect to the nearest ancestor which has position that is not static. This is the body element.
The first child of the body has a margin-top.
That margin collapses through the top of the body and pushes the body element down away from the viewport edge.
You can see this by applying an outline to the body element.
body {
position: relative;
margin: 0;
padding: 0;
outline: solid pink 10px;
}
.section1 {
margin-top: 107px;
border: 1px solid green
}
.heatmap {
z-index: 2147483642;
top: 0px;
left: 0px;
position: absolute;
width: 1425px;
height: 1110px;
opacity: 0.7;
background: red
}
<div class="section1">something</div>
<div class="heatmap">hamara heatmap</div>
To avoid this, prevent the margins from collapsing. This is most easily done by using padding on the body instead of margin on the heatmap.
body {
position: relative;
margin: 0;
padding: 107px 0 0 0;
outline: solid pink 10px;
}
.section1 {
border: 1px solid green
}
.heatmap {
z-index: 2147483642;
top: 0px;
left: 0px;
position: absolute;
width: 1425px;
height: 1110px;
opacity: 0.7;
background: red
}
<div class="section1">something</div>
<div class="heatmap">hamara heatmap</div>
You just remove position: relative from body, it will work
body {
margin: 0;
padding: 0
}
.section1 {
margin-top: 107px;
border: 1px solid green
}
.heatmap {
z-index: 2147483642;
top: 0px;
left: 0px;
position: absolute;
width: 1425px;
height: 1110px;
opacity: 0.7;
background: red
}
<div class="section1">something</div>
<div class="heatmap">hamara heatmap</div>
Just give padding-top: 1px; to body and it will work fine;
The problem was margin given to section1 which cause collapsing margin
See this link:
https://css-tricks.com/what-you-should-know-about-collapsing-margins/
Here is what I have so far: http://jsfiddle.net/F8AN4/
I want a border on each side of the div that is vertically centered and is pointing to the left/right sides of the screen. I've seen this done a lot, but can't for the life of me figure out how to do it!
It would look like:
-----|DIV|------
CSS
div {
background: lightgreen;
height: 100px;
margin: 0 auto;
position: relative;
width: 200px;
}
div::after {
border-right: 10px solid black; // not sure how to do this.
content: "";
top: 0; left: 0; right: 0; bottom: 0;
position: absolute;
}
div::before {
content: "";
top: 0; left: 0; right: 0; bottom: 0;
position: absolute;
}
Any ideas?
You will need two wrapping containers: an inner div that holds the content, and an outer div:
<div class="outer">
<div class="inner"></div>
</div>
The CSS is simple — the outer div will need to have 100% width (so that the pseudo-element can stretch to the full width), while the inner div can have a width that you designate later.
.inner {
background: lightgreen;
height: 100px;
margin: 0 auto;
width: 200px;
}
.outer {
position: relative;
width: 100%;
}
.outer:before {
border: 1px solid #000;
box-sizing: border-box;
content:"";
position: absolute;
top: 50%;
left: 0;
width: 100%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
The CSS transform property is used to ensure that the pseudo-element is perfectly vertically centered — it matters when the horizontal line you want is thick.
If you want odd-numbered dimensions for the horizontal line, you can choose to specify the height of a single border, i.e. border-top: 1px solid #000;, or abandon the border property and set the height and background-color. It works either way :)
http://jsfiddle.net/teddyrised/F8AN4/9/
[Edit]: Remove the bottom margin on outer div, it was not necessary for the code to work ;)
FIDDLE
HTML
<div><span>TEXT</span></div>
CSS
div {
margin-top:10px;
height: 1px;
border-top: 1px solid black;
text-align: center;
position: relative;
}
span {
position: relative;
top: -.7em;
background: lightgreen;
display: inline-block;
border-width:0 2px;
border-color:black;
border-style:solid;
}
Is this what you're looking for?
http://jsfiddle.net/F8AN4/3/
I guess there is a more beautiful way to do it maybe someone has a better idea :)
<div id="main">
<div class="hrleft"></div>
<div class="mid"></div>
</div>
div.hrleft {
height: 45px;
width: 200px;
border-bottom: 10px solid black;
float: left;
}
Here is my html
<div class="container">
<img src="something" class="avatar"/>
<div class="edit_photo">Edit</div>
</div>
"edit_photo" has an image on it's background. the img tag dimensions is not set so it could be anything. But I want the "edit_photo" div to always be on the bottom right corner of the img. Is this possible with css? I can't think of a way to do this. the img tag needs to always be an img tag and I can't change it to a div.
Thank you!
I think this may be possible:
CSS:
.container{
position: relative;
display: inline-block;
}
img{
background: red;
height: 120px;
width: 250px;
}
.edit_photo{
position: absolute;
bottom: 0;
right: 0;
background: blue;
height: 25px;
width: 25px;
}
Here's a JSFiddle to see: http://jsfiddle.net/gW9PK/
You might need to play around with the .edit_photo and nudge it up a little bit.
The container should be position: relative; and the edit_photo position: absolute; like this:
.container {
position: relative;
/* inline-block for 100% of child width */
display: inline-block;
border: 3px solid #ddd;
}
img {
/* for 100% height of the container */
display: block;
}
.edit_photo {
position: absolute;
right: 5px;
bottom: 10px;
/* Some color */
background: red;
padding: 2px 4px;
border-radius: 3px;
color: white;
}
UPDATED DEMO WITH MULTIPLE IMAGES: http://jsfiddle.net/HYQLQ/3/
write this code in css
.container{
position: absolute;
}
.edit_photo{
position: absolute;
bottom:0px;
right:0px;
widht:20px;
height:20px;
}
edit_photo
{
bottom:-600
top:30px;
right:5px;
}
play with the numbers.
i have the following simple script, but it doesn't work in IE7
<div id="content">
<div id="left"></div>
<div id="right"></div>
<div id="bottom_menus">any text here...</div>
</div>
and CSS
#content
{
margin: 0 auto;
padding: 0;
width: 980px;
background-color: lime;
height: 800px;
overflow: hidden;
position: relative;
}
#left
{
width: 275px;
float: left;
background-color: olive;
margin: 0px 0px -5000px 0;
padding: 0 0 5000px 0;
min-height: 400px;
}
#right
{
width: 704px;
float: left;
background-color: red;
margin: 0px 0px -5000px 0;
padding: 0 0 5000px 0;
min-height: 400px;
}
#bottom_menus
{
background-color: orange;
height: 15px;
position: absolute;
bottom: 0px;
width: 100%;
}
why position absolute doesn't work?
thanks in advance
for absolute position to work, you must specify both direction: eg. top & left, or bottom & rightetc...
For you footer (bottom_menus) to take all space you need to set:
#bottom_menus {
background-color: orange;
height: 15px;
position: absolute;
left: 0;
right: 0; //assuming you need the footer to take the whole width
bottom: 0;
width: 100%;
}
ps: small remark, you dont need to set px unit when value is 0.
You haven't specified a left, so it's defaulting to 0px; Since you have a margin of -5000px on the box, I'm guessing it is working, and the bottom_menus div is off the screen to the left. Absolute positioning would ignore the padding of its parent container. Try setting left: 5000px, assuming you need the negative margin and positive padding. What are you trying to accomplish with that?