Partial overlapping of image with color - css

I am trying to accomplish this section of a webpage and am having a difficult time finding a good way to overlap the yellow from the 1st column partially over the 2nd column image. I have set up the columns and have tried using negative properties but that didn't work. I tried adding it to the image in Photoshop but that was a BIG fail. I obviously can't do a border hack with opacity.
Am I missing something? I just can't think of a good way to do this. Any help is appreciated.

I would approach this using absolutely positioned pseudo content within a relatively positioned parent. The following example is missing many details, of course (media queries, better spacing, font treatment, etc.), but is one way to accomplish what you're trying to do.
.container {
display: flex;
}
.leaf {
background-color: yellow;
flex: 1;
position: relative;
margin: 2.5em 0;
}
.leaf-content {
padding: 1em 3em 1em 1em;
}
.leaf::after {
content: '';
background-color: yellow;
right: -150px;
top: 0;
bottom: 0;
width: 150px;
opacity: .35;
position: absolute;
}
.container img {
width: 500px;
height: auto;
}
body {
font-family: sans-serif;
}
<div class="container">
<div class="leaf">
<div class="leaf-content">
<h1>BIKE</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed est, ipsa minus repellendus, rerum officia eaque, quia pariatur voluptatibus asperiores inventore illum laudantium soluta itaque sit nobis officiis deserunt vero!</p>
</div>
</div>
<div class="img-container">
<img src="https://images.unsplash.com/photo-1517054612019-1bf855127c43?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=e4814eb541ddb4ef86140974f1bee831&fit=crop&w=1000&h=1000&q=80" alt="">
</div>
</div>
jsFiddle

Related

2x2 mobile flex grid with top menu bar

I've been trying - and failing - to get the following grid layout in CSS flexbox (no grid, I need to support older browsers):
As you can see, I need a
Menu bar (dark grey), always on top, always full width and fixed height
a 2x2 grid (blue and white) that's full width on portrait mode and same aspect ratio on landscape
the purple container using the rest of the available space. Stacked below on portrait and to the side on landscape.
I know about media queries, and I guess I need one to limit the .grid width, but I don't know how to get the landscape layout with that.
Looks simple enough but I guess I need your help! :(
html {
height: 100%;
}
body {
margin: 0;
padding: 0;
min-height: 100%;
display: flex;
flex-direction: column;
}
.container {
display: flex;
flex: 1 0 auto;
flex-direction: column;
}
.row {
display: flex;
flex: 1 0 auto;
flex-direction: row;
flex-wrap: wrap;
}
.col {
flex: 1 0 auto;
}
.grid {
width: 50vw;
}
.topbar {
background-color: #1f1f1f;
max-height: 50px;
}
.purple {
background-color: #663353;
}
.purple p {
padding: 2em;
}
.grid:nth-child(3n+1) {
background-color: #6798cc;
}
<div class="container">
<div class="row topbar"></div>
<div class="row wrap">
<div class="col grid"></div>
<div class="col grid"></div>
<div class="col grid"></div>
<div class="col grid"></div>
</div>
<div class="row">
<div class="col purple">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id ipsam rerum laborum velit obcaecati, eveniet reiciendis, veritatis ipsa ducimus recusandae quidem nesciunt dolor facilis sed neque quod.</p>
</div>
</div>
</div>

CSS - Two divs side by side, have one define max height

I'm trying to create a layout with CSS and ran into the the following issue.
I have two divs, displayed side by side (one is floated left), wrapped in a third div. This works fine.
What I want to be able to do is have one div have free height (adjusted to content) and I want the other div to never be larger than this. So for example, if the first div is 3 lines of text and the second is 4 lines, the second should go into overflow. But I don't want to give a fixed value to the height of the first div or the wrapper.
How would I go about having CSS do this?
EDIT: I've created a Fiddle of what I have so far, if that helps anyone. I decided to not use float here and instead went for an absolute position + margin so the area under the left div would stay cleared.
So what I want here is for blue to be the same height as red (with overflow turning on if I enable it), but without having to set the height of anything to a fixed number.
HTML:
<div class="wrapper group">
<div class="left">Lorem ipsum dolor sit amet, vide porro ubique vis ei.</div>
<div class="right">Probo fabulas inermis cu cum. Eros voluptatibus vel te, ea sea velit quaestio consectetuer, modus facete no qui. Has eu quidam salutandi dissentiunt, his sanctus voluptatibus ei. Has lorem complectitur te, in per adipisci gloriatur dissentiunt. E</div>
</div>
CSS:
.left {
display: block;
background-color: red;
width: 10em;
position: absolute;
}
.right {
margin-left: 10em;
display: block;
background-color:blue;
}
.wrapper {
width: 100%;
border-style: solid;
border-color: yellow;
}
EDIT: I created a version with float too.
.left {
float: left;
display: block;
background-color: red;
width: 10em;
}
.right {
margin-left: 10em;
display: block;
background-color:blue;
}
.wrapper {
width: 100%;
border-style: solid;
border-color: yellow;
}
.group:after {
display: table;
clear: both;
content:"";
}
Can this help?
Fiddle
HTML:
<div class="wrapper">
<div class="left">
Lorem ipsum dolor sit amet, vide porro ubique vis ei.
</div>
<div class="right">
Probo fabulas inermis cu cum. Eros voluptatibus vel te,
ea sea velit quaestio consectetuer, modus facete no qui.
Has eu quidam salutandi dissentiunt, his sanctus voluptatibus ei.
Has lorem complectitur te, in per adipisci gloriatur dissentiunt. E
</div>
</div>
CSS:
.wrapper {
display:table;
border:1px solid #AFAFAF;
padding: 3px;
width:300px;
}
.left {
display: table-cell;
border-right: 1px solid #EFEFEF;
width:30%;
padding: 3px;
}
.right {
display: table-cell;
width:70%;
padding: 3px;
}
So you want your second div always to be at the same height as your first div, even if it's content is larger?
As far as I know it's not possible to declare the height of a div to be smaller than it's content orientated to another div without working with fixed heights.
Here I found an example of same height divs, but it is always geared to the larger div... but however, perhaps it helps you: How do I keep two divs that are side by side the same height?

Why are my <div>s leaving their parent <div>? [duplicate]

This question already has answers here:
Why is the parent div height zero when it has floated children
(4 answers)
How do you keep parents of floated elements from collapsing? [duplicate]
(15 answers)
Closed 8 years ago.
I'm very confused. I want the contents of 2 divs to dynamically expand the height of their parent div based on child divs sizes; up to a maximum of 600px -- but instead they're just overlapping and it isn't increasing in size. Would somebody mind providing some insight? Clearly I'm missing something here.
Here is what's happening:
http://puu.sh/2Vexi.png
Here's my html:
<div class="pictureBoxContainer">
<div class="pictureBox">
<div class="pBoxLeftColumn">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit perspiciatis nihil explicabo quasi veritatis ipsum.
</div>
<div class="pBoxRightColumn">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam, architecto quis quaerat excepturi maxime.
</div>
</div>
</div>
Here's my css:
.pictureBoxContainer {
padding: 12px;
clear:left;
clear:right;
width: 100%;
background-color: #eee;
border-radius: 4px;
max-height: 600px;
}
.pictureBox {
border: 1px solid #ee5;
width:100%;
}
.testp {
padding: 10px;
}
.pBoxLeftColumn {
display: block;
float: left;
max-width: 49.99%;
}
.pBoxRightColumn {
display: block;
float: right;
max-width: 49.99%;
}
Parents will normally expand to the height of their children, though won't in case the children are floated.
You can remove floats to accomplish expanding.
In order to expand a parentdiv based on floated children try overflow: auto; on .pictureBox. This will make .pictureBox expand to the height of its children. Here's a Fiddle showing the result.

CSS positioning, overlaying divs in fluid layout

It's my first time designing a fluid layout and one of the things I'm trying to do is overlay a caption at the bottom of a photo. The method I'm using is having the photo (width:100%) inside a div (width:50%) and adding a div containing the caption under the photo. To get it to overlay, I made the caption's height a static 30px and set the position as relative and top -50px (+padding).
CSS:
#contentdiv {
width:50%;
}
#gallerydescription {
height:30px;
padding:10px;
background-image:url(../contentbkg.png);
position:relative;
top:-50px;
margin-bottom:-50px;
}
HTML:
<div id="contentdiv">
<img src="blog/1.gif" width="100%" />
<div id="gallerydescription">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dictum urna nec urna varius varius.
</div>
</div>
This does what I want visually, but it's not really a true fluid layout and it looks ugly if the caption is too or too short. Is there a way where I could let the length of the caption to determine the height of the caption div and have the "top" be the negative of whatever the height and padding is?
Pure CSS solution for a problem like the one you have
CSS
#contentdiv{
width: 50%;
position: relative;
}
#gallerydescription{
padding: 10px;
background-image: url('../contentbkg.png');
box-sizing: border-box;
-moz-box-sizing: border-box;
position: absolute;
bottom: 0;
width: 100%;
max-height: 60%;
overflow: hidden;
}
Markup (unchanged)
<div id="contentdiv">
<img src="blog/1.gif" width="100%" />
<div id="gallerydescription">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dictum urna nec urna varius varius.
</div>
</div>
Update
jsfiddle try this fiddle
Try this and see how it looks like:
#contentdiv {
width:50%;
position: relative
}
#gallerydescription {
height:30px;
padding:10px;
background-image:url(../contentbkg.png);
position:absolute;
left: 0; right: 0; bottom: 0;
z-index: 5;
}
You could try jQuery UI Position for that purpose.
It allows to position two elements relatively, like
$("#elementToPosition").position({
my: "left top",
at: "right bottom",
of: "#targetElement"
});
And then change the top property for overlaying :
$("#elementToPosition").css('top',$("#elementToPosition").css('top') - 10px);

How to make an inline-block element fill the remainder of the line?

Is such a thing possible using CSS and two inline-block (or whatever) DIV tags instead of using a table?
The table version is this (borders added so you can see it):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head></head>
<body>
<table style="width:100%;">
<tr>
<td style="border:1px solid black;width:100px;height:10px;"></td>
<td style="border:1px solid black;height:10px;"></td>
</tr>
</table>
</body>
</html>
It produces a left column with a FIXED WIDTH (not a percentage width), and a right column that expands to fill THE REMAINING SPACE on the line. Sounds pretty simple, right? Furthermore, since nothing is "floated", the parent container's height properly expands to encompass the height of the content.
--BEGIN RANT--
I've seen the "clear fix" and "holy grail" implementations for multi-column layouts with fixed-width side column, and they suck and they're complicated. They reverse the order of elements, they use percentage widths, or they use floats, negative margins, and the relationship between the "left", "right", and "margin" attributes are complex. Furthermore, the layouts are sub-pixel sensitive so that adding even a single pixel of borders, padding, or margins will break the whole layout, and send entire columns wrapping to the next line. For example, rounding errors are a problem even if you try to do something simple, like put 4 elements on a line, with each one's width set to 25%.
--END RANT--
I've tried using "inline-block" and "white-space:nowrap;", but the problem is I just can't get the 2nd element to fill the remaining space on the line. Setting the width to something like "width:100%-(LeftColumWidth)px" will work in some cases, but performing a calculation in a width property is not really supported.
See: http://jsfiddle.net/qx32C/36/
.lineContainer {
overflow: hidden; /* clear the float */
border: 1px solid #000
}
.lineContainer div {
height: 20px
}
.left {
width: 100px;
float: left;
border-right: 1px solid #000
}
.right {
overflow: hidden;
background: #ccc
}
<div class="lineContainer">
<div class="left">left</div>
<div class="right">right</div>
</div>
Why did I replace margin-left: 100px with overflow: hidden on .right?
A modern solution using flexbox:
.container {
display: flex;
}
.container > div {
border: 1px solid black;
height: 10px;
}
.left {
width: 100px;
}
.right {
width: 100%;
background-color:#ddd;
}
<div class="container">
<div class="left"></div>
<div class="right"></div>
</div>
http://jsfiddle.net/m5Xz2/100/
Compatible with common modern browers (IE 8+): http://jsfiddle.net/m5Xz2/3/
.lineContainer {
display:table;
border-collapse:collapse;
width:100%;
}
.lineContainer div {
display:table-cell;
border:1px solid black;
height:10px;
}
.left {
width:100px;
}
<div class="lineContainer">
<div class="left">left</div>
<div class="right">right</div>
</div>
You can use calc (100% - 100px) on the fluid element, along with display:inline-block for both elements.
Be aware that there should not be any space between the tags, otherwise you will have to consider that space in your calc too.
.left{
display:inline-block;
width:100px;
}
.right{
display:inline-block;
width:calc(100% - 100px);
}
<div class=“left”></div><div class=“right”></div>
Quick example: http://jsfiddle.net/dw689mt4/1/
I've used flex-grow property to achieve this goal. You'll have to set display: flex for parent container, then you need to set flex-grow: 1 for the block you want to fill remaining space, or just flex: 1 as tanius mentioned in the comments.
If you can't use overflow: hidden (because you don't want overflow: hidden) or if you dislike CSS hacks/workarounds, you could use JavaScript instead. Note that it may not work as well because it's JavaScript.
var parent = document.getElementsByClassName("lineContainer")[0];
var left = document.getElementsByClassName("left")[0];
var right = document.getElementsByClassName("right")[0];
right.style.width = (parent.offsetWidth - left.offsetWidth) + "px";
window.onresize = function() {
right.style.width = (parent.offsetWidth - left.offsetWidth) + "px";
}
.lineContainer {
width: 100% border: 1px solid #000;
font-size: 0px;
/* You need to do this because inline block puts an invisible space between them and they won't fit on the same line */
}
.lineContainer div {
height: 10px;
display: inline-block;
}
.left {
width: 100px;
background: red
}
.right {
background: blue
}
<div class="lineContainer">
<div class="left"></div>
<div class="right"></div>
</div>
http://jsfiddle.net/ys2eogxm/
When you give up the inline blocks
.post-container {
border: 5px solid #333;
overflow:auto;
}
.post-thumb {
float: left;
display:block;
background:#ccc;
width:200px;
height:200px;
}
.post-content{
display:block;
overflow:hidden;
}
http://jsfiddle.net/RXrvZ/3731/
(from CSS Float: Floating an image to the left of the text)
If, like me, you want something that will expand to the end of the line even if the left-hand box wraps, then JavaScript is the only option.
I'd make use of the calc feature to get this right:
Array.from(document.querySelectorAll(".right")).forEach((el) => {
el.style.width = `calc(100% - ${el.offsetLeft + 1}px)`;
});
.container {
outline: 1px solid black;
}
.left {
outline: 1px solid red;
}
.right {
outline: 1px solid green;
}
<div class="container">
<span class="left">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tristique aliquet quam, at commodo lorem fringilla quis.</span>
<input class="right" type="text" />
</div>
A solution using grid layout and fractional units (fr):
/* For debugging and visibility */
html, body {
border: 2px solid navy;
}
.grid-layout {
border: thick solid sandybrown;
background-color: gray;
}
.grid-layout div:nth-child(odd) {
border: 2px solid brown;
background-color: azure;
}
.grid-layout div:nth-child(even) {
border: 2px solid red;
background-color: lightyellow;
}
/* Grid layout.
* Horizontal and vertical gaps.
* two columns, fixed and responsive.
* Note no containing div per line.
*/
.grid-layout {
display: grid;
gap: 4px 2px ;
grid-template-columns: 100px 1fr;
}
<p>How to make an element fill the remainder of the line?</p>
<p>Note no encompassing div per line.</p>
<div class="grid-layout">
<div>Lorem ipsum line 1</div>
<div>Lorem ipsum dolor sit amet,
consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua.</div>
<div>Lorem ipsum line 2</div>
<div>Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat.</div>
</div>
A similar solution with encompassing divs:
.lineContainer {
display: grid;
gap: 2px 4px;
grid-template-columns: 100px 1fr;
}
<p>Display grid per line.</p>
<div class="lineContainer">
<div style="border:1px solid black; ">
Lorem ipsum …
</div>
<div style="border:1px solid black; ">
Lorem ipsum dolor sit amet,
consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua.
</div>
</div>

Resources