I have an absolutely positioned container that I need to make a responsive square of based on its height (not width, so the padding-bottom trick won't work).
So far I've been using a square image inside the container to keep its proportions:
https://codepen.io/Deka87/pen/xrXgoK
HTML:
<div class="relative">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores placeat eius cum non eum suscipit, facilis nulla, porro, quasi voluptate quaerat amet vitae, illum quam omnis. Placeat, fuga excepturi tempore?
<div class="absolute">
<img src="square.png" alt="..." />
</div>
</div>
SCSS:
.relative {
position: relative;
}
.absolute {
position: absolute;
top: 0; bottom: 0; left: 0;
background-color: fade-out(green, .5);
> img {
height: 100%; width: auto;
}
}
which works fine in Chrome, but NOT Firefox, which is the issue I am addressing.
For some reason Firefox ignores the content of the absolutely positioned element and sets its width equal to 0 unless different is specified (which might be even more intuitive though).
Any help would be highly appreciated!
PS: Below is a screenshot of the green rectangle I am after:
It is what it looks like in Chrome and how I was hoping it to look in Firefox (and Safari).
Related
I have two elements that I would like to be aligned in a column-like way. These elements also need to be floated to the right of the page. If I float the container containing these two elements to the right, they automatically align in a row-like way. My immediate thought is to specify a width of the container so that they will be forced to move downward. The issue with this is that the two elements are different widths.
<div style="float: right; width: 100px;">
<div style="width: 110px; height:50px; background-color: blue;">
Element 1
</div>
<div style="width: 60px; height:50px; background-color: red;
float:right;">
Element 2
</div>
</div>
paragraph text that will not flow into the bottom element because the container's width prevents it. Filler text.....
If the bottom element is not as wide as the top element, the width of the container makes it wider. This is an issue because I have other text / elements that I would like flow around these side elements, and it looks weird because of the whitespace created by the different in widths.
If I try something like making the parent absolute, as not to effect the other elements on the page, the children don't either.
How can I create elements that are floated in a container without the width of the container affecting the other elements on the page as well? Thanks, Levi
One approach is as below, taking advantage of display: contents comments in the code itself:
/* basic CSS reset to reduce all elements to the same
box-sizing, font, margin and padding: */
*,
::before,
::after {
box-sizing: border-box;
font: normal 1rem / 1.5 sans-serif;
margin: 0;
padding: 0;
}
/* a wrapping element to allow for some dynamic sizing of the
contents: */
main {
/* the width of the <main> element is 80vw (viewport-width units)
unless that is less than 30em (the minimum size it will be) or
unless that size exceeds 1000px (at which point it will take
a width of 1000px maximum): */
width: clamp(30em, 80vw, 1000px);
/* a margin of 1em on the top and bottom top-to-bottom languages: */
margin-block: 1em;
/* a margin of auto on the inline axis, left (start) and right (end)
in left-to-right languages, such as English: */
margin-inline: auto;
}
div.wrapper {
/* for those browsers that are yet to implement
logical properties: */
float: right;
/* equivalent to "float: right" in left-to-right
languages, such as English: */
float: inset-inline-end;
width: 100px;
/* effectively removes this element from the
layout, exposing its contents to the layout
engine: */
display: contents;
}
div.wrapper > div {
/* ensuring that the "display: contents" is
unset, which takes it back to the default
display model: */
display: unset;
/* for those browsers that are yet to implement
logical properties: */
float: right;
/* as above, equivalent to "float: right" in
left-to-right languages, such as English: */
float: inset-inline-end;
height: 50px;
/* forces each element to clear the float of its
siblings: */
clear: both;
/* to hide the overflowing text: */
overflow: hidden;
text-overflow: ellipsis;
}
.wrapper > div:first-child {
background-color: blue;
width: 110px;
}
.wrapper > div:last-child {
background-color: red;
width: 60px;
}
<main>
<div class="wrapper">
<div>
Element 1
</div>
<div>
Element 2
</div>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur perferendis corporis itaque, sequi quod commodi explicabo dolore, totam, libero architecto doloremque nisi illo iste quae ea, laboriosam reprehenderit nemo animi! Lorem ipsum dolor
sit amet, consectetur adipisicing elit. Quia reiciendis sapiente blanditiis provident ad ullam consequatur, temporibus ex accusamus est nihil voluptatum totam cupiditate. Ducimus sit deserunt nostrum, dolorem doloremque. Lorem ipsum dolor sit amet,
consectetur adipisicing elit. Consectetur perferendis corporis itaque, sequi quod commodi explicabo dolore, totam, libero architecto doloremque nisi illo iste quae ea, laboriosam reprehenderit nemo animi! Lorem ipsum dolor sit amet, consectetur adipisicing
elit. Quia reiciendis sapiente blanditiis provident ad ullam consequatur, temporibus ex accusamus est nihil voluptatum totam cupiditate. Ducimus sit deserunt nostrum, dolorem doloremque.</p>
</main>
JS Fiddle demo.
References:
CSS logical properties.
display.
float.
Bibliography:
Compatibility of CSS logical properties, from "Can I Use."
Absolutely or relatively positioned elements don't occupy its initial space in the document, so other elements behave as if it wasn't there.
I need this behavior, but with a sticky element.
I hope the code explains it all:
(also have it on JSFiddle)
const myDiv = document.querySelector('#container');
const tooltip = document.querySelector('#tooltip');
let showTooltip = false;
myDiv.addEventListener('click', () => {
showTooltip = !showTooltip;
if (showTooltip) {
tooltip.classList.add('shown');
} else {
tooltip.classList.remove('shown');
}
})
#container {
height: 19rem;
overflow-y: scroll;
}
.info {
background: lightblue;
padding: .5rem;
}
#tooltip {
background: gray;
position: sticky;
bottom: 0;
margin: 0 2rem;
opacity: 0;
padding: 1rem;
}
#tooltip.shown {
opacity: 1;
}
<div id="container">
<div class="content info">
Click in this div to hide/show the tooltip.
</div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex assumenda, quos, perspiciatis temporibus asperiores, corporis rerum veritatis veniam enim rem repellat doloribus a. Asperiores, perferendis voluptatem, quis non modi quibusdam!</p>
</div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex assumenda, quos, perspiciatis temporibus asperiores, corporis rerum veritatis veniam enim rem repellat doloribus a. Asperiores, perferendis voluptatem, quis non modi quibusdam!</p>
</div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex assumenda, quos, perspiciatis temporibus asperiores, corporis rerum veritatis veniam enim rem repellat doloribus a. Asperiores, perferendis voluptatem, quis non modi quibusdam!</p>
</div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex assumenda, quos, perspiciatis temporibus asperiores, corporis rerum veritatis veniam enim rem repellat doloribus a. Asperiores, perferendis voluptatem, quis non modi quibusdam!</p>
</div>
<div id="tooltip">
This tooltip should not occupy its initial space at the bottom of its parent div...
<br><br><br>
But yet its space is taken into consideration. Scroll down to see...
</div>
</div>
Note: using 'display' instead of 'position' as suggested in answers also doesn't work. It does prevent the tooltip of occupying space when not displayed, but when displayed it's space is still taken in consideration...
I'm afraid I don't have a sample but I was able to achieve this with something like:
.sticky-element
{
position: sticky;
height: 0px;
overflow: visible; // not strictly needed
}
.content
{
position: relative;
top: -100%; // or calc(-20px - 100%) to add margin
}
Then:
<div class="sticky-element">
<div class="content">
....
</div>
</div>
In other words, the actual sticky element has a height of zero so it takes up no space, and you shift up the content by its own height.
The best thing about this is it doesn't require you to know the height of the sticky element.
There may be some side effects but it's working OK for my needs.
I think if you switch between
display:none;
and
display: block;
rather than opacity. Then the initial white space that is being occupied at the end will not appear.
You are using opacity: 0;
to hide your element.
Where it might sound like a cool idea, the element is still there, just transparent. Think of really polished window in real life. You might never acknowledge the window, but it is still there and is taking space, and if you are unaware you might crash into it and harm yourself really bad.
The better idea would be to just get rid of it for the time being:
#tooltip {
display: none;
}
#tooltip.shown {
display: block;
}
Here is working JSFiddle:
https://jsfiddle.net/dyabgve5/26/
EDIT:
I found out what you mean. I think you should override #container divs, because they are interfering with your sticky class divs.
Or.. you can try moving that sticky class behind container like this (it works):
</div> - end of div container
<div id="tooltip">
This tooltip should not occupy it's initial space at the bottom of it's parent div...
<br><br><br>
But yet it's space is taken in consideration. Scroll down to see...
</div>
Working JSFiddle: https://jsfiddle.net/83k1xwt5/29/
I'm trying to setup a design where background images "open/close" around a paragraph. I tried setting it up so that two divs were added to the paragraph's container, and them set them up with position:absolute and all that jazz, but the "closing" image will always stick to the far right of the container instead of sticking the the last word of the paragraph.
Is it possible to set this up without javascript?
Here's an example of what I'm trying to setup:
Yes, you can do it using :before and :after. Check out the below snippet:
p:before, p:after {
content: ' ';
position: absolute;
background-color: #f00;
padding: 15px;
margin-top: -5px;
font-size: 0;
background: url("https://upload.wikimedia.org/wikipedia/commons/thumb/d/d8/VisualEditor_-_Icon_-_Block-quote.svg/60px-VisualEditor_-_Icon_-_Block-quote.svg.png") -28px -25px;
}
p:before {
left: 10px;
background-position: -3px -5px;
}
p {
text-indent: 30px;
}
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni labore explicabo molestias, libero similique veniam unde, cum quas neque architecto, consectetur, pariatur porro ex et dolorem voluptatibus repellat! Numquam, voluptate!</p>
Not even buggy. Works nice. Check.
I have an image floated to the left of a banner area which is taller than I want the banner to be, this is to leave room for the text to grow without the image cutting off.
When I apply overflow: hidden to .banner the banner clears the image instead of cutting it off.
I understand why this happens but I have been trying to figure out a way to get the desired effect to no avail. See the desired effect below.
I have tried various things like putting the image with a div and applying overflow: hidden to that but I can't seem to get it to work.
I'm sure that the answer is staring me right in the face but I'm just not seeing it.
I have uploaded my code to a JSfiddle for you (with a much smaller image so you can see the effect in the result window)
Thanks in advance.
Here i updated your JSFiddle so you can see the result.
You have to take the image out of the Textflow with position: absolute;.
With this, the image gets cut off, if the text is not high enough to show it all.
You could do it like this, if you know the width of the image: http://codepen.io/pageaffairs/pen/EcJAK
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
.banner {
margin-top: 35px;
background: #f00;
overflow: hidden;
position: relative;
}
.banner img {
position: absolute; top: 0; left: 0;
}
.caption {
margin-left: 230px;
padding: 20px;
font-size: 14px;
}
</style>
</head>
<body>
<div class="banner">
<div class="image">
<img src="http://placehold.it/220x300" alt="" />
</div>
<div class="caption">
<h2>Lorem ipsum dolor sit amet.</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam asperiores dicta est, iure libero molestias pariatur. Aperiam aut autem consequatur, deleniti et eum minus nihil perspiciatis provident qui repellendus veniam voluptatem. Aliquid assumenda atque consequatur cumque nesciunt sequi. Adipisci autem cumque iste itaque laudantium necessitatibus optio possimus quam sint vero!</p>
</div>
</div>
</body>
</html>
There are 2 options you could go for:
1 . Apply the float to the image's DIV instead the image itself, and limit the DIV's height to the wanted minimum height.
Example:
.image{ float:left; height:1px; }
JSfiddle example: http://jsfiddle.net/z3zfx7uv/
2 . Get rid of the image and it's DIV altogether and use background-image instead, with appropriate padding-left.
Example:
.banner {
margin-top: 35px;
background: #f00 url(http://placehold.it/220x300) top left no-repeat;
overflow: hidden;
padding-left:220px;
}
JSfiddle example: http://jsfiddle.net/b6zzbowh/
Google wasn't giving me anything helpful :(
I'm after a way of having an image have a 100% width, and a fixed height, say, 400px, and not stretch horribly, and instead of stretching, zoom in?
I think I'm after something not dissimilar to what backstretch does, but not for full screen backgrounds.
I think this video kind of shows what I'm after in a few instances (I think the eagle picture shows what I'm looking for) http://www.teehanlax.com/resources/img/story/medium/prototypes/feature-header.mp4
100% width picture, that's a fixed height, that shows a cropped image, and that scales with the browser.
http://jsfiddle.net/XcYfS/2/
<style>
img {
width: 100%;
height: 400px; }
h1, p {
width: 80%;
padding-left: 10%; }
</style>
<img src="http://placekitten.com/200/300" alt="">
<h1>Interesting Title!</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat magnam culpa obcaecati numquam iusto recusandae totam voluptatibus temporibus ipsum quasi. Nesciunt maiores sequi quis consectetur labore asperiores eaque hic ipsa!</p>
To avoid Distortion i think its best to use jQuery for this.
You can use jQuery Supersized plugin for this. It's one of the famous plugins mostly used on sites with grounds covering 100% of the width.
Here's the link for the site - http://buildinternet.com/project/supersized/
Try this one. Click Here for Preview
I have edited your sample code
HTML:
<div class="wrapper">
<img src="http://placekitten.com/200/300" alt="" />
</div>
<h1>Interesting Title!</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat magnam culpa obcaecati numquam iusto recusandae totam voluptatibus temporibus ipsum quasi. Nesciunt maiores sequi quis consectetur labore asperiores eaque hic ipsa!</p>
CSS:
div.wrapper{
display: inline-block;
width:500px;
height:400px;
border:1px solid red;
overflow:hidden;
}
img {
width: 100%;
height: auto;
}
h1, p {
width: 80%;
padding-left: 10%;
}
The parent element of your image should be display:inline-block; and the width will be the width of your img.
if you want to position the image, lets say you want to show the center of the image, just add a negative margin-top to the img. Click Here for Preview
img {
width: 100%;
height: auto;
margin-top:-100px;
}