I have an unusual layout requirement but Ive got it working in Chrome, Edge and IE11, only Firefox doen't work making me think it could be a bug with the browser.
Here is how the page should look:
But this is how it looks is Firefox:
Update: I also got this working on Chrome without float: left and instead using width: fit-content, however this and width: -moz-fit-content still don't work on Firefox.
The floated div with the red boarder doenst appear to be floated at all. As a result the blue box is off screen.
* {
box-sizing: border-box;
}
body {
padding: 0;
margin: 0;
}
.wrapper {
overflow: hidden;
}
.cont {
display: flex;
background: grey;
margin-left: auto;
margin-right: auto;
max-width: 1000px;
}
.col {
flex-basis: 50%;
min-height: 600px;
position: relative;
}
.col-1 {
display: flex;
flex-direction: column;
justify-content: center;
}
.col1-inner {
position: absolute;
top: 40px;
left: 0;
bottom: 40px;
right: -2000px;
}
img {
max-width: 100%;
width: auto;
height: 100%;
}
.content {
border: 2px solid red;
float: left;
height: 100%;
position: relative;
}
.content:after {
content: "";
background: blue;
display: flex;
width: 100px;
height: 100px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
<div class="wrapper">
<div class="cont">
<div class="col col-1">
<h1>Content</h1>
<p>Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff </p>
</div>
<div class="col">
<div class="col1-inner">
<div class="content">
<img src="https://images.unsplash.com/photo-1580152040915-ad6ceeaeb8c1?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3450&q=80" />
</div>
</div>
</div>
</div>
</div>
https://codepen.io/_j_i_m_fb_/pen/GRgaKQE
Lame answer to the actual question
This is an edge case due to the large fixed units used. Chrome is collapsing the div when float is used. Firefox is not. To determine which browser is technically correct we must look at the appropriate specification. How boring is that... instead, here is a...
... possible solution for what you desire
I have created an alternative example with CSS Grid.
HTML
Simple layout. The body is used instead of an extra div, with two divs for the left and right column:
<body>
<div class="content">
<h1>Content</h1>
<p>Contents</p>
</div>
<div class="image">
<img src="https://placehold.it/3450x2300" />
</div>
</body>
CSS
The body:
body {
display: grid;
grid-template-columns: auto auto;
}
Establish the grid.
Create two equal width columns
The content div:
.content {
display: grid;
align-content: center;
max-width: 600px;
min-width: 400px;
background: grey;
padding: 0 20px;
margin: 0 0 0 auto;
}
Establish the inner grid
Vertically center the contents
Use appropriate max and min widths
Instead of justify-items: end, the left auto margin provides the horizontal centering. This is so the background doesn't stretch all the way to the left.
The image div:
.image {
position: relative;
max-width: 700px;
min-width: 500px;
background: linear-gradient(to right, grey 0, grey 50%, transparent 50%);
}
Position the pseudo-element in relation to this div
Restrict the width of the image so it doesn't get too large
Restrict the width of the image so it doesn't get too small
Create the background colour with a gradient that covers only a percentage of the image div
The img is contained like so:
img {
max-width: 100%;
padding: 40px 0;
}
Restrict width of image to parent div
Pad out as desired
Example
* {
box-sizing: border-box;
}
body {
margin: 0;
display: grid;
grid-template-columns: auto auto;
}
.content {
display: grid;
align-content: center;
max-width: 600px;
min-width: 400px;
background: grey;
padding: 0 20px;
margin: 0 0 0 auto;
}
.image {
position: relative;
max-width: 700px;
min-width: 300px;
background: linear-gradient(to right, grey 0, grey 50%, transparent 50%);
}
.image::after {
content: "";
height: 100px;
width: 100px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: blue;
position: absolute;
}
img {
max-width: 100%;
padding: 40px 0;
}
<div class="content">
<h1>Content</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec id bibendum enim. Integer blandit arcu lobortis, ultricies quam vitae, elementum urna. Nunc a mauris ex. Aenean egestas neque urna, eu euismod massa ultrices sit amet. Praesent imperdiet
dictum ante, quis viverra nibh volutpat eu. Sed tempor, quam in molestie tincidunt, eros massa condimentum arcu, ut tempus mauris ligula et arcu. Donec nec faucibus neque, sit amet tincidunt nulla. Nullam et mattis ipsum. Sed euismod porttitor justo
eu aliquet. Sed hendrerit finibus dignissim. Morbi id ipsum imperdiet, fringilla urna posuere, fermentum justo. Mauris eleifend, orci et eleifend consectetur, augue lacus hendrerit diam, eget dictum lacus sem vitae augue.</p>
</div>
<div class="image">
<img src="https://placehold.it/3450x2300" />
</div>
Related
I'm trying to create a 3-row layout (header, content, footer) using:
min-height: 100vh;
display: grid;
grid-template-rows: auto 1fr auto;
grid-template-columns: 100%; //keep this to prevent content overflowing outside container
grid-gap: 2em;
grid-template-areas:
"header"
"content"
"footert";
I'm using align-self: end to have the footer always be at the bottom of the page.
The problem is, I want to make the footer sticky, so as the user scrolls up or down along the content, the footer always remains visible at the bottom.
If I use position: absolute or fixed though, this seems to break the footer out of the grid. Content continues to scroll over it like it wasn't there, and sometimes it also reduces the width of footer items.
Any ideas how to do this?
You could use position: sticky along with ::before pseudo-element to always keep some gap between the content and the footer.
Push the pseudo-element above the footer by translating it in negative Y-direction and then give it a background color same as that of the body. That will make it look like there's a gap between the footer and the content.
body {
margin: 0;
background: #fff;
}
.container {
height: 100vh;
display: grid;
grid-template-rows: 30px 400px 30px;
grid-gap: 1em;
}
.header {
background: #22f;
}
.content {
background: #fc9;
}
.footer {
background: #ee1;
position: sticky;
bottom: 0;
}
.footer::before {
content: '';
position: absolute;
background: #fff;
width: 100%;
height: 1em;
transform: translateY(-100%);
}
<div class="container">
<div class="header">Header</div>
<div class="content">Content</div>
<div class="footer">Footer</div>
</div>
Is this? Just add position: sticky and bottom:0. Also grid area is not needed.
.container {
min-height: 100vh;
display: grid;
grid-template-rows: auto 1500px auto;
grid-template-columns: 100%;
grid-gap: 2em;
}
.header {
background: pink;
height: 50px;
}
.content {
background: aqua;
}
.footer {
background: sandybrown;
height: 50px;
position: sticky;
bottom: 0;
}
<div class="container">
<div class="header"></div>
<div class="content"></div>
<div class="footer"></div>
</div>
You can try like below:
.container {
min-height: 100vh;
display: grid;
grid-template-rows: auto 1fr auto;
grid-gap: 2em;
}
.header {
background: pink;
height: 50px;
}
.content {
background: aqua;
font-size:40px;
}
.footer {
box-shadow:0 -2em 0 0 #fff;
background: sandybrown;
height: 50px;
position: sticky;
bottom: 0;
}
body {
margin:0;
}
<div class="container">
<div class="header"></div>
<div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eleifend enim sapien. Proin facilisis ornare mi, ut eleifend odio dictum vestibulum. Pellentesque arcu ex, vehicula eget porta at, maximus ac massa. In hac habitasse platea dictumst. Sed ultrices et massa a ultrices. Pellentesque scelerisque, neque vitae semper bibendum, risus dolor suscipit felis, id porttitor nisi justo et lectus. Mauris interdum ligula imperdiet nunc ornare, </div>
<div class="footer"></div>
</div>
My Situation is as follows:
I have a container with a heading, a paragraph and a button. Texts are coming from the back-end. They get rendered in a Box with certain width (lets say 260px). Now I want the container to get more wider when the heading gets longer, but I don't want that to happen on the paragraph. The paragraph must be 100% width but it can wrap. The header and button cannot.
I've created a JSFiddle for you as an example: http://jsfiddle.net/swxmvgjr/2/
HTML:
<div class="container">
<h2>heading</h2>
<p>Nullam vel sem. Phasellus consectetuer vestibulum elit. Aenean commodo ligula eget dolor.</p>
<button>Link</button>
</div>
<div class="container">
<h2>heading that is a bit longer</h2>
<p>Nullam vel sem. Phasellus consectetuer vestibulum elit. Aenean commodo ligula eget dolor.</p>
<button>Link</button>
</div>
SCSS:
.container {
width: 260px;
background-color: #ccc;
padding: 20px;
margin-bottom: 20px;
h2 {
white-space: nowrap;
font-size: 250%;
}
p {
}
button {
padding: 10px;
border: 1px solid #333;
width: 100%;
}
}
https://jsfiddle.net/4ojc5fte/
seems someone already found a solution for me :)
.box {
display: inline-block;
border: 1px solid red;
min-width:260px;
}
.child {
display: flex;
}
.child div {
flex-grow: 1;
width: 0;
}
I'm trying to generate reports with header, footer and content. The header and the footer works fine, however the text of the content div breaks higher than I want. See the image. I really don't understand why the page is breaking so high.
This is the CSS code:
#page {
margin: 180px 50px;
}
#header {
position: fixed;
left: 0px;
top: -150px;
right: 0px;
height: 150px;
text-align: left;
}
#footer {
position: fixed;
left: 0px;
bottom: -180px;
right: 0px;
height: 80px;
text-align: right;
background-color: lightblue
}
#footer .page:after {
content: counter(page, upper-roman);
}
#content {
padding-left: 10mm;
padding-right: 5mm;
line-height: 6mm;
background-color: lightgreen;
height: 850px;
}
#logo {
height: 4cm;
}
#head_text {
display: inline-block;
line-height: 6mm;
padding-top: 15px;
}
And this is the HTML:
<html>
<head>
<style>
'.$css.'
</style>
</head>
<body>
<div id="header">
'.$header.'
</div>
<div id="footer">
<p class="page">Página </p>
</div>
<div id="content">
'.$content.'
</div>
</body>
</html>
Could anyone help to solve this problem? Tanks!
If your DOMPDF_DPI is set to 72 then a 180px margin is pretty expansive. A DPI of 72 gives a one-to-one translation from PX to PT (the native unit in a PDF). PDF documents produced by dompdf are always 72 PPI. That translates into 2.5 inches of margin around the content. I don't think you meant to pad your margins quite that much.
Another problem I see is that you've set a height condition on your content element. You don't really need this and I see it causing some problems as I run some test renders. If you want your content background to have a specific color then I'd recommend setting it on the body element, which is the true bounds of your document content.
Try the following:
#page {
margin: 180px 50px;
}
#header {
position: fixed;
left: 0px;
top: -150px;
right: 0px;
height: 150px;
text-align: left;
}
#footer {
position: fixed;
left: 0px;
bottom: -180px;
right: 0px;
height: 80px;
text-align: right;
background-color: lightblue
}
#footer .page:after {
content: counter(page, upper-roman);
}
body {
background-color: lightgreen;
height: 850px;
}
#content {
padding-left: 10mm;
padding-right: 5mm;
line-height: 6mm;
}
#logo {
height: 4cm;
}
#head_text {
display: inline-block;
line-height: 6mm;
padding-top: 15px;
}
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
</head>
<body>
<div id="header">
HEADER
</div>
<div id="footer">
<p class="page">Página </p>
</div>
<div id="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus id erat blandit, auctor massa eu, aliquam lacus. Suspendisse justo ante, gravida vel diam quis, porta luctus nisi. Donec id enim sem. Sed et lobortis magna. Ut et dignissim augue. Cras quam libero, feugiat ac auctor eget, semper a augue. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse quis hendrerit ex. Phasellus auctor dolor sit amet nibh rhoncus sagittis. Sed quis odio sit amet purus feugiat malesuada.</p>
</div>
</body>
</html>
I am trying to set up a page that has two background colors. One color for the left half of the page and another for the right half of the page and content that sits in the middle that is centered horizontally. If the content in the page does not fill the entire browser window vertically, the content ends and I can see the two background colors below it. Is there a way to extend the content vertically to always fill the browser window? I know sticky footers works well, but I can't seem to get it to work with what I am doing.
Here is my HTML:
<div id="wrapper">
<div id="left"></div>
<div id="right"></div>
<div id="container">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. </p>
</div>
</div>
<div id="footer">Footer footer footer</div>
This is my CSS:
html, body {
margin: 0; padding: 0; border: 0;
}
#left, #right {
position: fixed;
width: 50%;
height: 100%;
top: 0;
}
#left {
background: #014c8d;
left: 0;
}
#right {
background: #0f2451;
right: 0;
}
#container {
background: #fff;
width: 70%;
max-width: 500px;
height: 100%;
margin: 0 auto;
padding: 10px;
position: relative;
}
#wrapper {
position: relative;
background: #006d46;
}
#footer {
background: #006d46;
position: relative;
}
I have a jsfiddle to show what I currently have: http://jsfiddle.net/snPYb/1/
You just have to add height:100%; to your wrapper and html,body :
html, body {
margin: 0; padding: 0; border: 0;
height:100%;
}
#wrapper {
position: relative;
background: #006d46;
height:100%;
}
FIDDLE
EDIT #1 :
Try this :
html, body {
margin: 0; padding: 0; border: 0;
display:table;
height:100%;
width:100%;
}
Added display:table and width:100%
FIDDLE
http://jsfiddle.net/snPYb/3/
What you were missing was the height:100% on the wrapper as well.
http://jsfiddle.net/LdTpg/3/
<div class="a">
<div class="b">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec justo nunc, vehicula nec auctor a, lacinia dapibus tortor. Praesent id mi id dui sodales laoreet. Maecenas ut aliquet urna. Donec porttitor turpis eu velit viverra in tincidunt nisi viverra. Curabitur mi ligula, facilisis ut cursus vel, fermentum sit amet nibh. Ut in nisl cursus quam molestie scelerisque non a nulla. Morbi eu diam nibh, eu dictum orci. Nunc est neque, dignissim ut fermentum id, sagittis eget urna.
</div>
<div class="c">
<div class="d" style="background: grey; height: 100%; width: 100%;"></div>
<div class="e">Vertical Align This</div>
</div>
</div>
Styles:
.a {
border:1px solid red;
overflow:hidden;
}
.a div {
display:inline-block;
}
.b {
width:200px;
border:1px solid blue;
float:left;
position:absolute;
}
.c {
width: 100%;
margin-left: 200px;
position:relative;
}
.d {
position:absolute;
top:0;
left:0;
}
.e {
position: relative;
}
So basically
I know the width of the left div (container B) but not its height
The width of the right div (container C) has to take up the remaining space
I do not know the height or width of the outer div (container A)
There is an element (container D) inside the right div (container C) that must be placed under another element (container E)
Container D should be the same dimensions as container C
Container E should have text that is both horizontally and vertically center (with respect to container C)
I have tried various CSS settings including messing with the line height, display (inline-block vs block), heights/widths as %, floats...
It is unclear what the height of C should be in your information of what you desire (you do not address that).
If C is an arbitrary height
It can be done as this fiddle is configured (works in IE7+).
.a {
border:1px solid red;
overflow:hidden;
}
.a div {
display:inline-block;
}
.b {
width:200px;
border:1px solid blue;
float:left;
}
.c {
overflow: hidden;
position:relative;
height: 100px; /* arbitrary height */
line-height: 100px; /* match arbitrary height */
text-align: center;
}
.a .c {display: block;}
.d {
position:absolute;
top:0;
left:0;
}
.e {
position: relative;
vertical-align: middle;
}
If C is supposed to match B's flexible height
It can be done as this fiddle is configured (works in IE8+; note: Chrome shows a slight variation compared to Firefox and IE on how it calculates the absolute position of the D element). This solution removes your 100% inline styling on D's width and height.
.a {
border:1px solid red;
overflow:hidden;
display: table;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
min-width: 100%;
position: relative;
}
.a div {
display: table-cell;
}
.b {
width:200px;
border:1px solid blue;
}
.c {
text-align: center;
vertical-align: middle;
}
.d {
position:absolute;
top:1px;
right: 1px;
bottom: 1px;
left: 203px;
}
.a .e {
display: inline-block;
}
.e {
position: relative;
}