I've looked at similar posts here, but can't seem to apply the concept correctly. I am wanting to append a small image to the bottom of a div to create a border effect on the div. I'm trying to use ::after, 'content' and relative positioning to the div, but it only get's me close. The div has a considerable amount of top/bottom padding. So when I try to add the image to the bottom of the div, it only adds it to the bottom of the div before the padding starts. I tried absolute positioning for the image and it ended up being at the bottom of the page and not the bottom of the div. Any ideas? Here is a reference for the page I'm working on. The image has been given a red background (halfway down the page for easy reference). http://www.staging.sarahandrachel.com/about/
Here is the markup for the div.
#block-4a4b3b44-9188-4b95-9678-d896851e0c54::after {
content: url('http://www.staging.sarahandrachel.com/wp-
content/uploads/2017/08/header-bottom-frame.png');
position: relative;
bottom: 0px !important;
left: calc(50% - 40px);
z-index: 9999;
background: red;
}
Any ideas?
Related
I have included a link to a picture to help explain my question: http://i.gyazo.com/b1e319cda4b7c21a5072156f5bd7c590.png
Im trying to position the red div exactly below the blue one. The problem is that the top container which you can see at the top of the picture, has a height of 100%. The blue div then has a height of 300px and is positioned with top:100%.
How can I get the red div exactly under the blue one? I almost just need to be able to do: top: 100% + 300px;
Thanks!
Well you could do top: calc(100% + 300px); ?
Put both the red div and the blue div in a single div container.
Apply the absolute positioning to the outer container, and keep the inner divs static (as in, remove absolute positioning).
Remove margins between divs with margin: 0;
I have a div and i want to put an image at the bottom right of the div and some images to the bottom left. They are different heights so i want to make sure they both align to the bottom of the div.
At first, i made the bottom right align by using:
position: absolute:
bottom: 0;
right: 0;
but then i couldn't put a margin around it (as it is out of the document flow). So then, based on some answers below, i tried to create the jsfiddle above to get it to work without any position: absolute.
Here is my jsFiddle example: http://jsfiddle.net/leora/FYw2D/.
My only issue now is that I want the images on the left hand side to align to the bottom of the div (versus aligning to the top of the right image). Also in certain cases i don't have any images on the bottom left but i want to have the same vertical spacing (so if i add an image dynamically, it doesn't reset the container height.
.images
{
float: left;
margin-top: 4px;
}
I tried adding vertical-align and a few other properties but couldn't get both to align to bottom.
Any suggestions?
You can use relative positioning to achieve the same bottom: 0; and right: 0; placement... but that won't take your .bottom element out of the document flow (like position: absolute; does). That said, your element needs to be within the document flow in order for margin and padding to be respected anyway.
It sounds like you just need to float it right, apply display: inline;, and apply your margin and padding. Place your text content above the image in the source order, and then the image should always fall beneath and to the right of the content above (depending on other unknown layout variables, that is).
.bottom {
float: right;
display: inline;
padding: 20px 0 0 20px;
margin: 20px 0 0 20px;
}
Updated
To fix your new challenge, I added position: relative; on .container and position: absolute; and bottom: 0; on .images:
http://jsfiddle.net/FYw2D/6/
I can't see a good way to achieve this with CSS alone.
position: absolute; will remove image from text flow.
The only approach I can see is to place your image in the middle of the text and float it right.
See this JSFiddle.
But, you will have to find a good spot in the text to place the image in order for it to look good. You can even write a JavaScript script for this.
The other approach is just to add bottom padding to image's container.
And probably it's a good time to revisit page's design and maybe re-design this element.
UPDATE:
Considering your updated question, I've edited your JSFiddle.
You can use position: absolute; bottom: 0; left: 0; to position left images wrapper inside of a parent container. This will work fine if your right image is taller that left ones (like in your example).
I've also refactored your Fiddle to fix some other issues. Please see the code.
What I want: Stick text or an element to the right of the document, instead of window.
However, without currently implementation (position: absolute; right:0;), when I resize the window, the text always stay on the right side of the window, even there is a scrollbar showing up (because the element on the top of that has a fixed width). When I scroll right, the text is not right aligned any more.
Here is the example:
http://jsfiddle.net/N5jc9/
Note that, I have no control on container1. Anyone having a good solution for this using CSS?
Put container 2 inside container 1 and make container 1's position relative.
You can use the :after pseudo element and position it to the right of your <body> element. This of course will be evident only if you have set a fixed/min width for your <body> element.
Demo: http://jsfiddle.net/PPtD5/2/
Code:
body {
width: 70%;
height: 200px;
position: relative;
}
body::after {
content: "This one sticks to the right of <body>";
width: 100px;
position: absolute;
right: -120px;
top: 0;
}
Not sure if I understand completely what control you have for container1, but if you apply display:inline-block to each class the text will appear to the right of the container 1
I want to fade out the top and bottom of two separate divs.
Right now I'm trying to use position:absolute and top:1px on the top one and bottom: 1px on the bottom one. Was not working for me, uses the parent div? Which was causing them to show up in the wrong places.
This fiddle shows where I am:
http://jsfiddle.net/mstefanko/23mfk/
What I want is for the top and bottom of each div to have the fade demonstrated in the fiddle.
Your .inner-1 and .inner-2 both have absolutely positioned elements within them. These elements are being positioned in relation to the viewport, and not their parent. You'll need to set .inner-1 and .inner-2 to a relative position:
.inner-1,
.inner-2 {
position: relative;
}
This will cause the gradient elements to appear at the top and bottom of these containers.
Demo: http://jsfiddle.net/23mfk/1/
I have an image representation of graph made with .png images and -moz-border CSS trick (div id=gholder) I want that graph to be positioned as where the picture shows, And I did it using CSS position: absolute/relative tags, but I'm having problem using the two tag. When I use this CSS code
#gholder {
float: left;
bottom: 460px;
left: 60%;
position: relative;
}
The site shows a big space below the footer, is there a way to remove that big space when using the relative code?
Relative positioning always leaves a space where the element originally was. If you use absolute it should work correctly.
`#gholder { bottom: 460px; left: 60%; position: absolute;}`
You also don't need the float tag.
If the problem is that you want the main content div lines to stretch to the width of both divs, I'd create a div which contains both the content and the graph, and set it to a defined width and have the top and bottom line in it.
Then inside that div define a width for your content div and position it, then do the same for the graph div.
Think that makes sense.