Limit image's max-height which depends on its sibling's height - css

How could I limit an image's maximum height so it would be the same as its sibling's height regardless of screen size.
The result which is acceptable =>
Same height - √
A result which isn't acceptable since image column height exceeds its sibling's => (DIV - .main-content).
Not valid one - X
P.S. Background-image property is not suitable in this case.
.container {
display: flex;
height: 100%;
}
.container>div {
flex: 1;
}
.main-content {
background: pink;
padding: 20px;
}
.sidebar img {
object-fit: cover;
width: 100%;
height: 100%;
}
<div class="container">
<div class="main-content">
Morbi mollis tellus ac sapien. Aenean vulputate eleifend tellus. Donec vitae orci sed dolor rutrum auctor. Cras non dolor. Vivamus quis mi. Vestibulum rutrum, mi nec elementum vehicula, eros quam gravida nisl, id fringilla neque ante vel mi. Aenean commodo
ligula eget dolor. Fusce neque. Quisque libero metus, condimentum nec, tempor a, commodo mollis, magna..
</div>
<div class="sidebar">
<img src="https://placeimg.com/640/490/nature">
</div>
</div>

Ok, it seem's that I might have found a solution. One way is to position the image as absolute and "stretch it" while object-fit still maintains it's cover property. If someone has some better solution, feel free to share.
.container {
display: flex;
height: 100%;
=
}
.container > div {
flex: 1;
}
.main-content {
background: pink;
padding: 20px;
}
.sidebar img {
object-fit: cover;
position: absolute;
top: 0;
bottom: 0;
right: 0;
overflow: auto;
height: 100%;
width: 100%;
}
.sidebar {
position: relative;
}
<div class="container">
<div class="main-content">
Morbi mollis tellus ac sapien. Aenean vulputate eleifend tellus. Donec vitae orci sed dolor rutrum auctor. Cras non dolor. Vivamus quis mi.
Vestibulum rutrum, mi nec elementum vehicula, eros quam gravida nisl, id fringilla neque ante vel mi. Aenean commodo ligula eget dolor. Fusce neque. Quisque libero metus, condimentum nec, tempor a, commodo mollis, magna..
</div>
<div class="sidebar">
<div><img src="https://placeimg.com/640/1000/nature"></div>
</div>
</div>

Related

Image position overlays content on resize

I have an image and content side by side with the image positioned absolute to the left edge of the viewport and then a column of content. When I resize the browser, the image stays in place and eventually covers the content.
Is it possible to force the image to "push" to the right so that it moves left, out of the viewport as I resize? I can't change the HTML so I am forced to use the existing code.
.container {
max-width: 1230px;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
.content-wrap {
padding-left: 250px;
}
.floating-image {
position: absolute;
top: 50%;
left: 0;
width: 50%;
transform: translateY(-50%);
max-width: 350px;
}
.floating-image img {
max-width: 100%;
height: auto;
}
<div class="container">
<div id="" class="row-wrapper">
<div class="content-wrap ">
<h2>ABOUT US</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque accumsan porta ultrices. Quisque tincidunt felis tellus, vel pharetra nisi condimentum vitae. Etiam mollis scelerisque leo, sed posuere tortor vulputate ut. Aliquam sed nisi id tortor euismod volutpat. Praesent laoreet dictum elit. Donec placerat blandit eleifend. Pellentesque molestie metus mi. Nullam eleifend venenatis imperdiet. Suspendisse egestas lorem eu turpis sollicitudin hendrerit. Aenean ultricies ultrices tortor, at efficitur mi dapibus eu. Donec ut pharetra sapien.</p>
</p>
</div>
<div class="alignment-wrap text-left">
<div class="img-wrap floating-image">
<img src="https://via.placeholder.com/750">
</div>
</div>
</div>
</div>
You can use media queries to hide the image when the size of the window is below specified length.
So maybe try something like this:
#media (max-width: [desired width]px) {
.floating-image img {
display: none;
}
}

Responsive iframe background not working in Safari

I am trying to create a responsive background video effect that mimics a background-size: cover; background image. I have it working quite well in Chrome and Firefox, but the video refuses take up the full height of the div in mobile breakpoints in Safari.
Background video in Chrome:
Background video in Safari:
A couple of restrictions:
I am working within a CMS, so the height of the div must be dynamic
based on the content - I cannot use a set height.
Unfortunately, I
also must use an iframe to display a video from Vimeo - I cannot use
an HTML5 video element.
Here is the code I have so far...
HTML
<div class="wrapper">
<div class="background">
<iframe class="video" data-video-type="vimeo" src="https://player.vimeo.com/video/298885097?background=1&muted=1&autoplay=1&loop=1&dnt=1&api=1"> </iframe>
</div>
<div class="inner-wrapper">
<div class="content">
<h1>Lorem Ipsum</h1>
<p>Aliquam et euismod nisi. Morbi congue eu lorem sit amet vestibulum. Suspendisse tristique arcu eu pulvinar finibus. Donec convallis justo ut orci finibus posuere. Cras eleifend, dolor vel dignissim porta, nibh orci cursus magna, vel consequat neque massa sit amet urna. Duis dignissim semper elit, at dictum nulla condimentum gravida. Fusce tincidunt felis felis, eu scelerisque neque dapibus et. Sed nibh purus, porttitor quis ligula et, sollicitudin rhoncus orci. Donec tortor ligula, interdum quis sagittis mollis, consectetur a nulla. Morbi lobortis tortor vel ornare vulputate. Suspendisse mauris lorem, blandit ac sapien vitae, vestibulum facilisis lacus. Ut elementum magna elementum mauris dapibus, a tempus magna rutrum. Nunc in risus euismod, tincidunt velit fermentum, dictum est. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nam efficitur nisi ac commodo viverra. Donec sed tempor ex.</p>
</div>
</div>
</div>
CSS
.wrapper {
background: red;
overflow: hidden;
position: relative;
}
.background {
aspect-ratio: 16/9;
left: 0;
min-height: 100%;
min-width: 100%;
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.video {
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
border: 0;
pointer-events: none;
}
.inner-wrapper {
display: -ms-flexbox;
display: flex;
padding: 3rem;
}
.content {
z-index: 2;
color: white;
}
I have created a CodePen to show the issue here: https://codepen.io/m-use/pen/bGMgvZz

What in my CS code is making my right column drop down when with smaller screen size?

When I resize my window to 1280 x 720 or below I just realized I'm getting some behavior I do not want. The right column (.right class) is getting "bumped down" below when I resize my window
What is it in my CSS code (or not in the code) that's causing this? I have a feeling that I'm missing a very important concept here. :)
Here is what happens to the right column on smaller screens: http://s11.postimg.org/vp9c7o3dv/css.png
And here is the faulty code:
http://codepen.io/cosmonaut/pen/yyvZjZ?editors=110
html {
background: url(http://s16.postimg.org/k5re12691/bg_radium.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
body {
width: 95%;
font-family: courier;
font-size: 15px;
color: #E7DFC2;
margin-left: 30px;
}
.container {
width: 90%;
margin: 10px auto;
background-color: #273E23;
opacity: 0.97;
margin-top: 25px;
}
.header {
text-align:center;
font-size: 40px;
padding: 1em;
border-bottom: 1px solid gray; /* Temporary. */
background-color: #273E23;
}
.header p {
font-size: 25px;
padding: 0px;
margin: 0px;
background-color: #273E23;
}
.header img {
padding: 0px;
margin: 0px;
width: 200px;
height: 200px;
}
.menu {
text-align: center;
}
.menu ul {
}
.menu ul li {
margin: 0 20px;
padding: 0;
list-style-type: none;
display: inline-block;
}
.menu ul li a {
text-decoration: none;
background-color: #273E23;
color: #D3B474;
}
.left {
float: left;
width: 160px;
margin: 0;
padding: 1em;
}
.right {
padding: 1em;
float: right;
width: 860px;
background-color: #273E23;;
}
.right p {
background-color: #273E23;
}
.footer {
clear: both;
margin: 0px;
padding: .5em;
text-align: center;
background-color: #273E23;
}
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="stylesheet_v2.css"/>
<title>Radium Recordings</title>
</head>
<body>
<div class="container">
<div class="header">
<img src="http://s11.postimg.org/z08mz7o9f/radium4.png">
</div>
<div class="menu">
<ul>
<li>Home</li>
<li>Releases</li>
<li>Tours</li>
<li>Contact</li>
</ul>
</div>
<div class="left"><p>Hi, I'm the left side. Not sure if I'm even going to keep this column. Lorem Ipsum added:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris lacinia tellus vel nunc accumsan maximus. Pellentesque justo sem, condimentum non lectus sed, consequat dignissim eros. Integer id ante lectus. Nam id nisi dui. Curabitur euismod volutpat accumsan. Donec pellentesque metus eleifend, imperdiet arcu lacinia, convallis est. Curabitur porta interdum vehicula. Fusce mollis quam et ex venenatis, eget luctus risus pellentesque.</p>
</div>
<div class="right">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris lacinia tellus vel nunc accumsan maximus. Pellentesque justo sem, condimentum non lectus sed, consequat dignissim eros. Integer id ante lectus. Nam id nisi dui. Curabitur euismod volutpat accumsan. Donec pellentesque metus eleifend, imperdiet arcu lacinia, convallis est. Curabitur porta interdum vehicula. Fusce mollis quam et ex venenatis, eget luctus risus pellentesque.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris lacinia tellus vel nunc accumsan maximus. Pellentesque justo sem, condimentum non lectus sed, consequat dignissim eros. Integer id ante lectus. Nam id nisi dui. Curabitur euismod volutpat accumsan. Donec pellentesque metus eleifend, imperdiet arcu lacinia, convallis est. Curabitur porta interdum vehicula. Fusce mollis quam et ex venenatis, eget luctus risus pellentesque.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris lacinia tellus vel nunc accumsan maximus. Pellentesque justo sem, condimentum non lectus sed, consequat dignissim eros. Integer id ante lectus. Nam id nisi dui. Curabitur euismod volutpat accumsan. Donec pellentesque metus eleifend, imperdiet arcu lacinia, convallis est. Curabitur porta interdum vehicula. Fusce mollis quam et ex venenatis, eget luctus risus pellentesque.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris lacinia tellus vel nunc accumsan maximus. Pellentesque justo sem, condimentum non lectus sed, consequat dignissim eros. Integer id ante lectus. Nam id nisi dui. Curabitur euismod volutpat accumsan. Donec pellentesque metus eleifend, imperdiet arcu lacinia, convallis est. Curabitur porta interdum vehicula. Fusce mollis quam et ex venenatis, eget luctus risus pellentesque.</p>
<p>Aliquam convallis nulla commodo convallis scelerisque. Curabitur elementum porttitor purus, posuere tincidunt turpis sagittis et. Proin non nulla vitae velit rutrum egestas id vitae dolor. Mauris placerat nec metus vel ultrices. Integer molestie lobortis eros a dapibus. Pellentesque commodo iaculis magna fringilla rhoncus. Nullam luctus dui elit, nec ornare erat volutpat vitae. Vestibulum nulla velit, porttitor in hendrerit vel, varius sit amet elit. Aliquam erat volutpat.
</p>
</div>
<div class="footer">
<p>P.O. Box 321, Anywhere, USA 31721 | Tel: (888) 888-8888</p>
</div>
</div>
</body>
</html>
Change your column widths to percentages. One example is this Codepen.
I used:
.left {
float: left;
width: 20%;
margin: 0;
padding: 1em;
}
.right {
padding: 1em;
float: right;
width: 67%;
background-color: #273E23;;
}
but you can use any percentages that look right to you.
You have two column in your site. One have class name "left" another have class named "right". Now each of those class have fixed width. So when the screen size goes less than the declared width the 2nd column get down to get it desire size.
If we see the explanation:
.right {
padding: 1em;
float: right;
width: 860px;
background-color: #273E23;
}
.left {
float: left;
width: 160px;
margin: 0;
padding: 1em;
}
Here we can see right class have width of 860px and the left class have width of 160px. Also the right class have a padding of 1em which is 15 in pixel. So if you want to show both of the element in single line then the minimum screen size should be 1050px (860 + 30 + 160). Here 30 is summation of both side padding 15 px.
If you want to do the code in such way that you what ever the screen size is both column should maintain size ratio then instead of using fixed width you should use %. For batter understanding you can check example of #bobdye
On small screen you have not enough space in .container for two columns.
You should set .container width in px, or declare min-width for it, or declare width of left and right columns in %.

absolute positioning and scrollable DIV

I have this tricky CSS problem: I have this HTML:
<div id="wrapper">
<div class="left"></div>
<div id="scroll">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque faucibus volutpat turpis at iaculis. Proin at nisl leo. Morbi nec blandit leo? Pellentesque interdum nunc sed nisl rhoncus gravida. Nunc sollicitudin, mi sit amet porta mollis, metus erat ornare odio, eu accumsan mauris diam nec augue. Ut tincidunt dui at lorem consequat vitae consectetur sapien pharetra. Suspendisse potenti. Donec turpis enim, varius accumsan congue vitae, rhoncus ut justo. Curabitur tristique lobortis eros ut pharetra. Maecenas non condimentum justo. Integer tincidunt; velit quis auctor varius, magna lorem pharetra urna, eget pellentesque leo nibh at mi. Ut pretium bibendum dui vel venenatis. Proin vel sem vitae lacus tincidunt bibendum. Pellentesque blandit mauris sit amet mauris sollicitudin pretium. In molestie condimentum nisi placerat consequat.
</div>
<div class="right"></div>
</div>
With this CSS:
#wrapper {
position: relative;
display: block;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
height: 47px;
}
#scroll {
position: relative;
height: 100%;
width: 10000px;
}
div.left, div.right {
position: absolute;
display: block;
background-color: rgba(255, 0, 0, 0.5);
width: 24px;
height: 100%;
z-index: 100;
top: 0;
}
div.left {
left: 0;
}
div.right {
right: 0;
}
And the visual result is this:
For some reason, the div.right is moving when I scroll the #scroll. I want it to always float at the boundary of #wrapper.
This is what I get right now:
Here is the jsfiddle: http://jsfiddle.net/b5fYH/
Thank you
Edit
Just because it wasn't obvious, it must work on mobile devices.
You have to know the difference between position: absolute and position: fixed.
The first one means: place the element in absolute position within relative element and keep in in that place (relatively).
The second: place the element in absolute position within window (frame) and keep it there no matter what happens.
Check this fiddle: http://jsfiddle.net/b5fYH/1/
The problem is with how overflow-x changes the wrapper div width.
The solution I found was:
Demo: http://jsfiddle.net/5jWpG/
wrapping the whole thing with a new div with the id wrapper-container
then adding the following CSS code:
#wrapper-container {
position: relative;
}
#wrapper {
position: static; /* or remove position relative from your code */
}
div.left, div.right {
bottom: 16px;
height: auto; /* or remove height: 100% from your code */
}

create a scroll bar in a sidebar

I'm trying to create a scroll bar inside the #main div so that I can scroll that without scrolling the page or the title but it isn't working. What am I missing?
My code is as follows:
CSS
#topbar {
height: 40px;
background-color: blue;
}
#sidebar {
position: absolute;
top: 40px;
bottom: 0px;
width: 80px;
overflow: hidden;
}
#title {
height:30px;
background-color: red;
}
#main {
height: auto;
overflow: scroll;
}
HTML
<div id="topbar">
hello
</div>
<div id="sidebar">
<div id="title">
title
</div>
<div id="main">
<!-- lots and lots of text-->
</div>
</div>
You can find an example JSFiddle here: http://jsfiddle.net/PTRCr/
Thanks
You're still on this project I see. There's also a lot of answers, but I see no one has made a working example of what I think you're asking for.
Here's a working example that (I hope) does what I think you're asking for.
I added content shifting wrappers so that the height can still be 100%. You can read more about that technique from this answer. I also removed all that absolute positioning, I see no reason why you should do that.
Each wrapper adjusts for the previous content, first the top bar with the height 40px and then the title with 30px.
This example should also follow your previous specifications, where the scrollbars will stay on the same baseline when resized.
As you can see, by the code below, it is possible to do a CSS only solution despite what others have lead you to believe. It just takes a bit of tricks from the bag of CSS holding.
Man, I'm such a dork.
Example | Code
HTML
<div id='container'>
<div id="top-bar">hello</div>
<div class="wrapper">
<div class="side-bar">
<div class="title">title</div>
<div class="content_wrapper">
<div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur gravida interdum dignissim. Aenean quis neque diam, ac vehicula turpis. Vestibulum lacinia libero sed massa fringilla tempor. Donec dictum metus ac justo congue lacinia sit amet quis nisi. Nam sed dolor vitae nisi venenatis imperdiet ut ullamcorper sem. Maecenas ut enim in massa ultricies lacinia quis nec lorem. Etiam vel lacus purus, a placerat lectus. Ut sed justo eros. Curabitur consequat nisi ut diam lacinia at posuere purus tristique. Quisque eu dapibus nunc.</div>
</div>
</div><div class="side-bar">
<div class="title">title</div>
<div class="content_wrapper">
<div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur gravida interdum dignissim. Aenean quis neque diam, ac vehicula turpis. Vestibulum lacinia libero sed massa fringilla tempor. Donec dictum metus ac justo congue lacinia sit amet quis nisi. Nam sed dolor vitae nisi venenatis imperdiet ut ullamcorper sem. Maecenas ut enim in massa ultricies lacinia quis nec lorem. Etiam vel lacus purus, a placerat lectus. Ut sed justo eros. Curabitur consequat nisi ut diam lacinia at posuere purus tristique. Quisque eu dapibus nunc.</div>
</div>
</div><div class="side-bar">
<div class="title">title</div>
<div class="content_wrapper">
<div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur gravida interdum dignissim. Aenean quis neque diam, ac vehicula turpis. Vestibulum lacinia libero sed massa fringilla tempor. Donec dictum metus ac justo congue lacinia sit amet quis nisi. Nam sed dolor vitae nisi venenatis imperdiet ut ullamcorper sem. Maecenas ut enim in massa ultricies lacinia quis nec lorem. Etiam vel lacus purus, a placerat lectus. Ut sed justo eros. Curabitur consequat nisi ut diam lacinia at posuere purus tristique. Quisque eu dapibus nunc.</div>
</div>
</div><div class="side-bar">
<div class="title">title</div>
<div class="content_wrapper">
<div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur gravida interdum dignissim. Aenean quis neque diam, ac vehicula turpis. Vestibulum lacinia libero sed massa fringilla tempor. Donec dictum metus ac justo congue lacinia sit amet quis nisi. Nam sed dolor vitae nisi venenatis imperdiet ut ullamcorper sem. Maecenas ut enim in massa ultricies lacinia quis nec lorem. Etiam vel lacus purus, a placerat lectus. Ut sed justo eros. Curabitur consequat nisi ut diam lacinia at posuere purus tristique. Quisque eu dapibus nunc.</div>
</div>
</div>
</div>
</div>
CSS
body, html{
height:100%;
width: 100%;
line-height: 100%;
margin: 0; /* Normalization */
padding: 0; /* Normalization */
}
div{
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
#container{
height:100%;
width: 100%;
text-align: center;
overflow: auto;
}
#top-bar{
height: 40px;
line-height: 40px;
border: 1px solid lightblue;
background: blue;
color: white;
text-align: center;
}
.side-bar {
width: 120px;
height: 100%;
text-align: center;
color: white;
border: 1px solid DarkOrchid;
display: inline-block;
vertical-align: top;
}
.title {
height:30px;
line-height: 30px;
border: 1px solid salmon;
background: red;
}
.wrapper{
margin-top: -40px;
padding-top: 40px;
height: 100%;
width: 100%;
white-space: nowrap;
}
.wrapper > div{
white-space: normal;
}
.content_wrapper{
margin-top: -30px;
padding-top: 30px;
height: 100%;
}
.content{
color: black;
height: 100%;
overflow: auto;
}
The element you want to be scrollable, should
Have height and width defined
have attribute overflow:auto
Example:
.scrollArea {
width: 275px;
height: 100px;
padding-left: 5px;
padding-right: 5px;
border-color: #6699CC;
border-width: 1px;
border-style: solid;
float: left;
overflow: auto;
}
CSS are stylesheet whose only purpose are to style document. They cannot investigate a pre-existing elements.
The only ways are whether the size of the div has to be fixed or you have to use some JavaScript to find out the exact height. The ways of which this can be done with CSS have already been presented by other users.
So, here is a way you can do using jQuery
$("#main").height($(document).innerHeight()-$("#title").outerHeight() - $("#topBar").outerHeight());
Demo
In your case change CSS:
#sidebar {
position: absolute;
top: 40px;
bottom: 40px;
width: 80px;
overflow: scroll;
}
You should define the height of the <div id="main" to show the scrollbar on it. whether you calculate it using javascript or jquery.
#topbar {
height: 40px;
background-color: blue;
}
#sidebar {
position:absolute;
top: 40px;
bottom: 40px;
width: auto;
height:200px;
overflow: hidden;
}
#title {
height:30px;
background-color: red;
}
#main {
height: 100px;
width: 100%;
overflow:auto;
}
Check this updated jsFiddle.
You need to set height for #main. It is working at http://jsfiddle.net/PTRCr/7/
#main {
height: 100px;
overflow-y: scroll;
}
It is only possible if you know the height of your #title, in either px or as a percentage of its parent container
#title set in px jsFiddle
#main {
position:absolute;
top:30px; /* set this to whatever you have set the height of #title to*/
bottom:0px;
overflow-y: scroll;
}
#title set as % jsFiddle - Tested in IE/FF/Chrome

Resources