I'm using the new CSS3 layout technique defined by gridbyexample.com.
It's works very well except when I try to print the layout. Chrome and Firefox seem to be ignoring any page breaks and the landscape view mode I have defined in the CSS. I have a code pen for my project but it seems to change how it looks in print preview mode so it's only good for looking at HTML and CSS but not how the print will look.
https://codepen.io/JeffreySpring/pen/rzjeKm
I have created a .zip file with all the files and images that can be downloaded from https://drive.google.com/open?id=0B0LdH-fKpAKeY0NRa290M25uTGc
Here is the HTML
<!DOCTYPE html>
<html>
<head>
<title>Steam Controller Bindings Template</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body cz-shortcut-listen="true" style="">
<ul class="wrapper">
<li class="device">
<div id="steamDeviceContainer">
<div><h1>Couch Gamer's Witcher 3 Bindings</h1></div>
<img src="img/steam_controller.png" alt="Steam Controller">
</div>
<div class="mappingGyroShift1">
<h3 class="mappingHeader gyroShift1">Gyro<span class="boundTo gyroShift1">(Mouse Joystick)</span></h3>
<div class="actionBind gyroShift1">Precision Crossbow/Bomb Aim</div>
</div>
</li>
<li>
<div class="mapping">
<h3 class="mappingHeader">Left Trigger</h3>
<div class="actionBind">Use Witcher Senses</div>
<div class="actionBind">Block or Counterattack</div>
</div>
<div class="mapping">
<h3 class="mappingHeader">Left Bumper</h3>
<div class="actionBind">Quick choice menu</div>
</div>
<div class="mapping">
<h3 class="mappingHeader">Select Button</h3>
<div class="actionBind">Pause Game/Game Options</div>
<div class="actionBind">HOLD: Inventory Screen</div>
</div>
<div class="mapping">
<h3 class="mappingHeader">Left Grip</h3>
<div class="actionBind">Use Item</div>
<div class="actionBind gyroShift1">HOLD: (GYRO ON) Aim Crossbow/Bomb</div>
</div>
</li>
<li>
<div class="mapping">
<h3 class="mappingHeader">Right Trigger</h3>
<div class="actionBind">Use Sign</div>
</div>
<div class="mapping">
<h3 class="mappingHeader">Right Bumper</h3>
<div class="actionBind">Quick Save</div>
</div>
<div class="mapping">
<h3 class="mappingHeader">Start Button</h3>
<div class="actionBind">In Game Menu</div>
<div class="actionBind">HOLD: Map</div>
</div>
<div class="mapping">
<h3 class="mappingHeader">Right Grip</h3>
<div class="actionBind modeShift1">Mode Shift Left TouchPad</div>
<div class="actionBind modeShift1">Mode Shift A Button</div>
</div>
</li>
<li class="wide">
<div class="mapping pageBreakAfter">
<h3 class="mappingHeader">Left Joystick<span class="boundTo">(Joystick Move)</span></h3>
<div class="actionBind">ROTATE: Move Character</div>
<div class="actionBind">DOUBLE PRESS: Call your mount</div>
</div>
</li>
<li class="wide">
<div class="mapping pageBreakAfter">
<h3 class="mappingHeader">Face Buttons<span class="boundTo">(Button Pad)</span></h3>
<div class="actionBind aBtn">A BUTTON: Interact/Roll</div>
<div class="actionBind aBtn">A BUTTON HOLD: Run/Quick Swim/Gallop/Accelerate Boat</div>
<div class="actionBind aBtn">A BUTTON QUICK DOUBLE PRESS THEN HOLD: Full Gallop</div>
<div class="actionBind bBtn">B BUTTON: Jump/Dodge/Let helm go</div>
<div class="actionBind bBtn">B BUTTON HOLD: Resurfacing</div>
<div class="actionBind yBtn">Y BUTTON: Strong attack</div>
<div class="actionBind xBtn">X BUTTON: Fast Attack</div>
<div class="actionBind xBtn">X BUTTON HOLD: Submerging/Stop the Boat</div>
<div class="actionBind modeShift1">A BUTTON: Autoloot</div>
</div>
</li>
<li class="wide">
<div class="mapping">
<h3 class="mappingHeader">Left TouchPad<span class="boundTo">(4 way D-Pad)</span></h3>
<div class="actionBind">D-PAD UP: Consumable 1/3</div>
<div class="actionBind">D-PAD UP HOLD: Switch to Consumable 1/3</div>
<div class="actionBind">D-PAD DOWN: Consumable 2/4</div>
<div class="actionBind">D-PAD UP HOLD: Switch to Consumable 2/4</div>
<div class="actionBind">D-PAD LEFT: Drawing or hiding steel sword</div>
<div class="actionBind">D-PAD LEFT: Drawing or hiding silver sword</div>
<div class="actionBind modeShift1">MODE SHIFT RIGHT GRIP: Radial Menu 1</div>
</div>
</li>
<li class="wide">
<div class="mapping">
<h3 class="mappingHeader">Right TouchPad<span class="boundTo">(4 way D-Pad)</span></h3>
<div class="actionBind">D-PAD UP: Consumable 1/3</div>
<div class="actionBind">D-PAD UP HOLD: Switch to Consumable 1/3</div>
<div class="actionBind">D-PAD DOWN: Consumable 2/4</div>
<div class="actionBind">D-PAD UP HOLD: Switch to Consumable 2/4</div>
<div class="actionBind">D-PAD LEFT: Drawing or hiding steel sword</div>
<div class="actionBind">D-PAD LEFT: Drawing or hiding silver sword</div>
</div>
</li>
<li class="full">
<div class="mappingModeShift1">
<h3 class="mappingHeader modeShift1">Radial Menu 1<span
class="boundTo modeShift1">(6 button touch menu)</span></h3>
<div class="actionBind modeShift1">BUTTON 1: Aard</div>
<div class="actionBind modeShift1">BUTTON 2: Yrden</div>
<div class="actionBind modeShift1">BUTTON 3: Igni</div>
<div class="actionBind modeShift1">BUTTON 4: Quen</div>
<div class="actionBind modeShift1">BUTTON 5: Axii</div>
<div class="actionBind modeShift1">BUTTON 6: Swap Crossbow/Bomb</div>
</div>
</li>
<li class="full">
<div class="mapping">
<h3 class="mappingHeader">Details</h3>
<div class="notes">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis efficitur arcu ut sapien ullamcorper,
vel ornare tellus venenatis. Pellentesque non sapien magna. Suspendisse potenti. Duis et turpis
sapien.
Donec turpis odio, posuere dignissim ornare semper, commodo a nunc. Nunc lacinia felis id elementum
vehicula.
Curabitur vel risus luctus, ornare nulla ac, tincidunt tellus. Nam tortor lorem, aliquet ut
efficitur vel,
</p>
<p>
ullamcorper vel metus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur
ridiculus mus.
Nam v
itae odio arcu. Phasellus fermentum nisi ipsum, a viverra urna placerat dignissim. Ut tempus finibus
mauris
faucibus consequat. Proin eu risus interdum, malesuada lectus id, egestas tortor. In imperdiet eget
augue et semper.
Sed risus justo, pulvinar id velit et, ullamcorper posuere ex. Nulla vel laoreet purus. Vivamus sed
venenatis erat,
in aliquam lectus. Mauris et lectus id eros feugiat viverra eu eu massa.
</p>
<p>
Nam egestas malesuada ligula quis cursus. Duis quis lorem in nunc maximus malesuada. Cras ante enim,
tincidunt ac
risus vel, elementum tincidunt erat. Ut auctor dolor a metus ornare auctor. Pellentesque at tellus
mi. Morbi e
fficitur metus vel enim ullamcorper, quis sagittis eros condimentum. Phasellus laoreet consectetur
lectus et dapibus.
Morbi tincidunt id mi nec ullamcorper. Integer dictum, justo vitae ullamcorper tristique, lorem nunc
rutrum augue, ut
pellentesque diam purus at ex. Proin sollicitudin iaculis eros.
</p>
</div>
</div>
</li>
<li class="full noPrint">
<div class="mapping">
<h3 class="mappingHeader">Screenshots</h3>
<div class="notes">
<div>
<img src="img/customRadialMenu.png" alt="Custom Menu Screenshot">
</div>
</div>
</div>
</li>
<li class="full noPrint">
<div id="videoWrapper">
<div class="video-container">
<iframe width="560" height="315" src="https://www.youtube.com/embed/4lcm4bdtkZs" frameborder="0"
allowfullscreen></iframe>
</div>
</div>
</li>
</ul>
</body>
</html>
Here is the CSS
/*noinspection CssUnknownTarget*/
#import url('https://fonts.googleapis.com/css?family=Oswald');
html {
box-sizing: border-box;
font-family: 'Oswald', sans-serif;
}
*, *:before, *:after {
box-sizing: inherit;
background-color: #00335B;
color: #F9F3F4;
}
img {
max-width: 100%;
}
.wrapper {
list-style: none;
margin: 0 auto 0 auto;
padding: 0;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: auto;
grid-auto-flow: dense;
}
#media print {
.noPrint {
display: none !important;
}
#page {
size: landscape; /* auto is the initial value */
/* this affects the margin in the printer settings */
margin: 25px 25px 25px 25px;
}
div.pageBreakAfter {
page-break-after: always;
page-break-inside: avoid;
}
div.pageBreakBefore {
page-break-before: always;
page-break-inside: avoid;
}
}
#media (min-width: 460px) {
.wrapper {
grid-template-columns: 1fr 1fr;
}
.device {
grid-column: 1 / 3;
}
.full {
grid-column: auto / span 2;
}
}
#media (min-width: 660px) {
.wrapper {
grid-template-columns: 1fr 1fr 1fr 1fr;
}
.device {
grid-column: 2 / 4;
grid-row: 1 / 3;
}
.wide {
grid-column: auto / span 2;
}
.full {
grid-column: auto / span 4;
}
}
.wrapper li {
margin: 10px;
padding: 10px;
}
h1 {
font-family: 'Oswald', sans-serif;
color: #F9F3F4;
text-shadow: 0 0 300px #000;
font-size: 150%;
text-align: center;
}
.mapping {
border: solid #F9F3F4 3px;
border-radius: 9px;
font-family: 'Oswald', sans-serif;
color: #F9F3F4;
margin: 20px;
}
.mappingModeShift1 {
border: solid #FF8C00 3px;
border-radius: 9px;
font-family: 'Oswald', sans-serif;
color: #FF8C00;
margin: 20px;
}
.mappingGyroShift1 {
border: solid #00FFFF 3px;
border-radius: 9px;
font-family: 'Oswald', sans-serif;
color: #00FFFF;
margin: 20px;
}
.mappingHeader {
padding-left: 3px;
padding-right: 3px;
font-family: 'Oswald', sans-serif;
font-style: normal;
position: relative;
left: 30px;
top: -10px;
text-transform: uppercase;
display: inline;
}
#steamDeviceContainer {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
#videoWrapper {
margin-left: 15px;
margin-right: 15px;
}
.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
.video-container iframe, .video-container object, .video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.actionBind {
margin-left: 30px;
margin-right: 10px;
padding-bottom: 10px;
}
.notes {
margin-left: 30px;
margin-right: 30px;
margin-bottom: 30px;
padding-bottom: 10px;
}
.boundTo {
font-size: xx-small;
vertical-align: super;
padding: 2px;
}
.modeShift1 {
color: #FF8C00 !important;
}
.gyroShift1 {
color: #00FFFF !important;
}
.yBtn {
color: #F4D00F;
}
.xBtn {
color: #0084C4;
}
.aBtn {
color: #34A853;
}
.bBtn {
color: #fc0602;
}
As you have found page pages do not work inside of grid layout block. I tried everything I could think of, but just doesn't work.
The solution to my report was to do the page-break-before outside the grid layout block.
It makes it a little trick, but it can be done. You just have to make sure your page-break is outside any display: grid class.
Related
I am building a stepper component using a CSS grid.
The grid has two rows and its column count is based on the number of steps in the stepper.
Each step has a header and a body.
Each step header lives in row 1 and takes exactly one column of the grid.
I've made each step header to be as big as its content and to stretch until it reaches the min-width of its siblings.
grid-template-columns: repeat(var(--steps-count), minmax(100px, auto));
The body of each step starts at row 2 and spans the number of columns in the first row, only the body of the selected step is visible, all others are hidden.
THE PROBLEM:
If the step body has short content the grid auto columns are working as expected, but if the body has a huge amount of content like in step 3 in example 1, all the columns in the grid look the same size, it's like the columns no longer respect the auto in the minmax() function and behave like they are all set to 1fr.
THE FIX:
The only fix I found is to explicitly set the width of the step body container to match the width of the entire stepper. I really want to avoid that, since the content of the step headers can be changed at runtime.
Example 1 - step with big body content
.stepper {
display: grid;
grid-template-columns: repeat(var(--steps-count), minmax(100px, auto));
row-gap: 8px;
font-family: "Roboto", sans-serif;
}
.step {
display: contents;
}
.step__header {
display: flex;
flex-direction: column;
align-items: center;
background: #000;
color: #fff;
padding: 8px;
gap: 8px;
cursor: pointer;
overflow: hidden;
border: 1px solid #fff;
}
.step__body {
display: none;
grid-row-start: 2;
grid-column: span var(--steps-count);
padding: 16px;
}
.step__content {
display: none;
}
.step__header-text {
width: 100%;
text-align: center;
}
.step__header-title {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.step__header-indicator {
display: flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
background: #fff;
border-radius: 12px;
}
.step__header-indicator::after {
content: "🍻";
}
.step--selected {
color: #fff;
}
.step--selected .step__header {
background: purple;
}
.step--selected .step__body {
display: block;
background: purple;
}
.step--selected .step__content {
display: block;
}
<div class="stepper" style="--steps-count: 4">
<div class="step" style="--step-index: 0">
<div class="step__header-wrapper">
<div class="step__header">
<div class="step__header-indicator"></div>
<div class="step__header-text">
<div class="step__header-title">Step 1</div>
</div>
</div>
</div>
<div class="step__body">
<div class="step__content">Step body 1</div>
</div>
</div>
<div class="step" style="--step-index: 1">
<div class="step__header-wrapper">
<div class="step__header">
<div class="step__header-indicator"></div>
<div class="step__header-text">
<div class="step__header-title">Step 2</div>
</div>
</div>
</div>
<div class="step__body">
<div class="step__content">Step body 2</div>
</div>
</div>
<div class="step step--selected" style="--step-index: 2">
<div class="step__header-wrapper">
<div class="step__header">
<div class="step__header-indicator"></div>
<div class="step__header-text">
<div class="step__header-title">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
</div>
</div>
</div>
<div class="step__body">
<div class="step__content">
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sapien arcu, imperdiet sed augue ut, rhoncus elementum urna. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut id ultricies libero, ac interdum
justo. Donec auctor quam in neque commodo, eget auctor turpis condimentum. Integer blandit urna vitae nisi bibendum luctus. Ut a laoreet purus, vel dictum nibh. Vestibulum non faucibus mi, eu tempor lectus. Mauris in varius lacus. Nullam pretium
at felis nec pharetra. Suspendisse dui ex, ullamcorper ac scelerisque ut, fermentum at urna. Aliquam efficitur, leo et egestas convallis, sapien tortor tincidunt velit, a faucibus ligula dui ac eros. Nunc sed sagittis orci. Fusce quam est, convallis
ac commodo eget, tincidunt non erat.</div>
</div>
</div>
</div>
<div class="step" style="--step-index: 3">
<div class="step__header-wrapper">
<div class="step__header">
<div class="step__header-indicator"></div>
<div class="step__header-text">
<div class="step__header-title">Step 4</div>
</div>
</div>
</div>
<div class="step__body">
<div class="step__content">Step body 4</div>
</div>
</div>
</div>
Example 2 - step with small body content
#charset "UTF-8";
.stepper {
display: grid;
grid-template-columns: repeat(var(--steps-count), minmax(100px, auto));
row-gap: 8px;
font-family: "Roboto", sans-serif;
}
.step {
display: contents;
}
.step__header {
display: flex;
flex-direction: column;
align-items: center;
background: #000;
color: #fff;
padding: 8px;
gap: 8px;
cursor: pointer;
overflow: hidden;
border: 1px solid #fff;
}
.step__body {
display: none;
grid-row-start: 2;
grid-column: span var(--steps-count);
padding: 16px;
}
.step__content {
display: none;
}
.step__header-text {
width: 100%;
text-align: center;
}
.step__header-title {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.step__header-indicator {
display: flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
background: #fff;
border-radius: 12px;
}
.step__header-indicator::after {
content: "🍻";
}
.step--selected {
color: #fff;
}
.step--selected .step__header {
background: purple;
}
.step--selected .step__body {
display: block;
background: purple;
}
.step--selected .step__content {
display: block;
}
<div class="stepper" style="--steps-count: 4">
<div class="step" style="--step-index: 0">
<div class="step__header-wrapper">
<div class="step__header">
<div class="step__header-indicator"></div>
<div class="step__header-text">
<div class="step__header-title">Step 1</div>
</div>
</div>
</div>
<div class="step__body">
<div class="step__content">Step body 1</div>
</div>
</div>
<div class="step" style="--step-index: 1">
<div class="step__header-wrapper">
<div class="step__header">
<div class="step__header-indicator"></div>
<div class="step__header-text">
<div class="step__header-title">Step 2</div>
</div>
</div>
</div>
<div class="step__body">
<div class="step__content">Step body 2</div>
</div>
</div>
<div class="step step--selected" style="--step-index: 2">
<div class="step__header-wrapper">
<div class="step__header">
<div class="step__header-indicator"></div>
<div class="step__header-text">
<div class="step__header-title">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
</div>
</div>
</div>
<div class="step__body">
<div class="step__content">
<div>step 3 short content</div>
</div>
</div>
</div>
<div class="step" style="--step-index: 3">
<div class="step__header-wrapper">
<div class="step__header">
<div class="step__header-indicator"></div>
<div class="step__header-text">
<div class="step__header-title">Step 4</div>
</div>
</div>
</div>
<div class="step__body">
<div class="step__content">Step body 4</div>
</div>
</div>
</div>
As #MichaelBenjamin said, it's related to the content of the body. When it exceed a certain size the calculation of the column size behave differently.
I will try to grab the detail of such calculation but a solution is to make sure the body doesn't contribute to the grid size calculation by using width:0;min-width:100%;
.stepper {
display: grid;
grid-template-columns: repeat(var(--steps-count), minmax(100px, auto));
row-gap: 8px;
font-family: "Roboto", sans-serif;
}
.step {
display: contents;
}
.step__header {
display: flex;
flex-direction: column;
align-items: center;
background: #000;
color: #fff;
padding: 8px;
gap: 8px;
cursor: pointer;
overflow: hidden;
border: 1px solid #fff;
}
.step__body {
display: none;
grid-row-start: 2;
grid-column: span var(--steps-count);
padding: 16px;
width: 0;
min-width: 100%;
box-sizing: border-box;
}
.step__content {
display: none;
}
.step__header-text {
width: 100%;
text-align: center;
}
.step__header-title {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.step__header-indicator {
display: flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
background: #fff;
border-radius: 12px;
}
.step__header-indicator::after {
content: "🍻";
}
.step--selected {
color: #fff;
}
.step--selected .step__header {
background: purple;
}
.step--selected .step__body {
display: block;
background: purple;
}
.step--selected .step__content {
display: block;
}
<div class="stepper" style="--steps-count: 4">
<div class="step" style="--step-index: 0">
<div class="step__header-wrapper">
<div class="step__header">
<div class="step__header-indicator"></div>
<div class="step__header-text">
<div class="step__header-title">Step 1</div>
</div>
</div>
</div>
<div class="step__body">
<div class="step__content">Step body 1</div>
</div>
</div>
<div class="step" style="--step-index: 1">
<div class="step__header-wrapper">
<div class="step__header">
<div class="step__header-indicator"></div>
<div class="step__header-text">
<div class="step__header-title">Step 2</div>
</div>
</div>
</div>
<div class="step__body">
<div class="step__content">Step body 2</div>
</div>
</div>
<div class="step step--selected" style="--step-index: 2">
<div class="step__header-wrapper">
<div class="step__header">
<div class="step__header-indicator"></div>
<div class="step__header-text">
<div class="step__header-title">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
</div>
</div>
</div>
<div class="step__body">
<div class="step__content">
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sapien arcu, imperdiet sed augue ut, rhoncus elementum urna. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut id ultricies libero, ac interdum
justo. Donec auctor quam in neque commodo, eget auctor turpis condimentum. Integer blandit urna vitae nisi bibendum luctus. Ut a laoreet purus, vel dictum nibh. Vestibulum non faucibus mi, eu tempor lectus. Mauris in varius lacus. Nullam pretium
at felis nec pharetra. Suspendisse dui ex, ullamcorper ac scelerisque ut, fermentum at urna. Aliquam efficitur, leo et egestas convallis, sapien tortor tincidunt velit, a faucibus ligula dui ac eros. Nunc sed sagittis orci. Fusce quam est, convallis
ac commodo eget, tincidunt non erat.</div>
</div>
</div>
</div>
<div class="step" style="--step-index: 3">
<div class="step__header-wrapper">
<div class="step__header">
<div class="step__header-indicator"></div>
<div class="step__header-text">
<div class="step__header-title">Step 4</div>
</div>
</div>
</div>
<div class="step__body">
<div class="step__content">Step body 4</div>
</div>
</div>
</div>
width:0 will disable the size contribution and min-width:100% will make sure that your content fill all the available space (defined by the other content)
Few observations:
The columns break when the body content wraps. It's not just "a huge amount content" causing the problem, it's the wrap.
The body of the stepper preserves the column width until the moment the content wraps. The columns then start shrinking, and continue to shrink as more content is added, until the columns reach equal width.
Like you said, they "behave like they are all set to 1fr".
The problem is the auto value in the minmax argument in grid-template-columns. For some reason (I don't have time to look into this at the moment), the auto value resizes the columns on wrap.
Perhaps switch from auto to min-content.
(I'll ping #TemaniAfif. Maybe he can help.)
This question already has answers here:
In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?
(6 answers)
What's the difference between align-content and align-items?
(15 answers)
Closed 1 year ago.
I am desperate to know why the div that works under the flex container doesn't follow "align-items:flex-end"? (Altho the result now is what I want, but I just want to understand the logic behind it)
The below picture shows the result. which <h2> section doesn't go to the cross end, but <div2> does.
enter image description here
following the HTML and CSS code
body,html{
padding: 0;
margin: 0;
height: 100%;
}
body{
background-color: #3F5D45;
display:flex;
align-items:center;
justify-content:center;
}
.all{
width: 90%;
}
.top{
height: 60px;
background-color: #EAF0ED;
padding: 0 30px;
border-radius: 5px 5px 0 0;
color: #3F5D45;
font-weight: bold;
display:flex;
justify-content:space-between;
}
.div1{
background-color: #fff;
padding: 30px 50px;
display:flex;
flex:1;
}
.div1 .con{
padding-left:50px;
display:flex;
flex-direction:column;
justify-content:space-between;
align-items:flex-end;
flex:1 1 66.6%;
}
.div2 i{
font-size: 20px;
color: #3F5D45;
padding: 0 3px;
}
.div1 .pic{
height: 350px;
width: 350px;
background-image: url('https://images.unsplash.com/photo-1462745294598-b3f9a2d7b858?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80');
background-size: cover;
flex:1 1 33.3%;
}
<div class="all">
<div class="top">
<img src="https://pei-qun.github.io/Sweetaste/img/flex-ex-img3.svg" height="55" alt="">
<p>more</p>
</div>
<div class="div1">
<div class="pic"></div>
<div class="con">
<article>
<h2>Lorem ipsum dolor sit amet</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque imperdiet eu odio et vestibulum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris sollicitudin sem justo, non pulvinar nunc vehicula in. Nullam non mollis dolor, in luctus est. Phasellus dictum erat ut fermentum consequat.</p></article>
<div class="div2">
<i class="fa fa-share-square-o"></i>
<i class="fa fa-heart-o"></i>
<i class="fa fa-facebook-square" ></i>
</div>
</div>
</div>
If anyone knows why is the reason this happened, please let me know!
It will be much appreciated! Thank you!
I have a main container with an aside. The aside has a fixed width, and I am using CSS Grid to draw this container. Inside the main container, there is a series of columns with dynamic data that automatically flow and align and shift data from one column to the other as needed. This column setup uses CSS Multi Columns, but the columns change width based on the user browser screen size. I would like to find a CSS solution that keeps these columns to a set width. Is there a way to auto expand the last drawn column? OR Is there a way to keep a dynamic multi-column count from expanding? I tried align-items:start, but don't see an effect. Could there be a way through a container to keep the columns to their set width?
#charset "UTF-8";
/* https://stackoverflow.com/questions/7785374/how-to-prevent-column-break-within-an-element */
html, body {
padding: 0;
margin: 0;
}
section {
padding: 3px;
}
input {
width: 100%;
box-sizing: border-box;
}
label {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: block;
font-family: "Miriam Libre";
font-size: 10px;
color: #213C3A;
}
.Cols {
margin: 0;
padding: 0;
columns: 40ch;
column-count: auto;
column-fill: auto;
column-rule: 1px dotted #3DB199;
height: 100vh;
/* ↓ columns defined by width */
overflow: auto;
}
li {
width: 100%;
display: inline-block;
padding: 3px;
border-bottom: 1px solid #D36B66;
}
.G {
display: grid;
}
.G-wAside {
grid-template-columns: 1fr minmax(0, 10vw) 10vw;
gap: 1vw;
}
.G-23 {
grid-template-columns: 66.66% 33.33%;
}
.HVpZ {
height: 100%;
}
.WVpZ {
width: 100%;
}
.filler {
background: #CCE0E2;
}
.fieldset {
margin: 5px 3px;
}
.fieldset > * {
margin: 1px 0;
}
.fieldset label {
margin-right: 3px;
}
.placeholder-uploader {
height: 320px;
width: 100%;
background: #FAF9E9;
}
.placeholder-grid {
width: 640px;
height: 230px;
background: #FAF9E9;
position: absolute;
}
.col-container {
overflow: hidden;
position: relative;
height: 100px;
grid-row-start: span 2;
}
<main class="G HVpZ WVpZ G-wAside">
<section>
<ul class="Cols">
<li>
<div class="fieldset">
<label>New List Is Just Long</label>
<input type="text"></input>
</div>
<div class="fieldset">
<label>Label Is Just Long</label>
<input type="text"></input>
</div>
<div class="fieldset">
<label>Label Is Just Long</label>
<input type="text"></input>
</div>
<div class="fieldset">
<label>Label Is Just Long</label>
<input type="text"></input>
</div>
<div class="col-container">
<div class="placeholder-grid"></div>
</div>
<div class="G G-23">
<div class="fieldset">
<label>Grid Label DIV Name</label>
<input type="text"></input>
</div>
<div class="fieldset">
<label>Label Is Just Longest Of All</label>
<input type="text"></input>
</div>
</div>
<div class="fieldset">
<label>Label Is Just Long</label>
<input type="text"></input>
</div>
</li>
<li>
<div class="col-container">
<div class="placeholder-grid"></div>
</div>
</li>
<li>
<p>Praesent vestibulum semper erat ut varius. Donec sed erat ac odio ultricies bibendum et sit amet lectus. In placerat consequat mi, sed commodo mauris ornare non. Integer nibh leo, dignissim in purus at, pretium porta nibh. Nulla vestibulum imperdiet
sollicitudin. Morbi euismod justo metus, quis imperdiet nunc eleifend ultrices. Donec nec maximus lacus. Aenean tincidunt mattis nisi, eget molestie dolor iaculis vel. Praesent faucibus risus vel arcu tincidunt, id varius orci bibendum. Duis
posuere est in diam luctus ultrices id in sapien. Fusce bibendum pharetra velit, sit amet commodo diam pharetra ac.</p>
</li>
</ul>
</section>
<section class="filler">← How to auto-fill this space to keep css multi columns in previous grid item to set width of 40ch? →</section>
<section class="bg">Aside</section>
</main>
I don't know if this will fulfill your needs and perhaps it can be combined with the previous answer.
Since the input column appears fixed in size, why not use a table layout JUST for this section? Probably needs some other CSS changes for the responsive nature of your design.
#charset "UTF-8";
/* https://stackoverflow.com/questions/7785374/how-to-prevent-column-break-within-an-element */
html,
body {
padding: 0;
margin: 0;
}
section {
padding: 3px;
}
input {
width: 100%;
box-sizing: border-box;
}
label {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: block;
font-family: "Miriam Libre";
font-size: 10px;
color: #213C3A;
}
.Cols {
margin: 0;
padding: 0;
columns: 40ch;
column-count: auto;
column-fill: auto;
column-rule: 1px dotted #3DB199;
height: 100vh;
/* ↓ columns defined by width */
overflow: scroll;
}
li {
width: 100%;
display: inline-block;
padding: 3px;
border-bottom: 1px solid #D36B66;
}
.G {
display: grid;
}
.G-wAside {
grid-template-columns: 1fr minmax(0, 10vw) 10vw;
gap: 1vw;
}
.G-23 {
grid-template-columns: 66.66% 33.33%;
}
.HVpZ {
height: 100%;
}
.WVpZ {
width: 100%;
}
.filler {
background: #CCE0E2;
}
.fieldset {
margin: 5px 3px;
}
.fieldset>* {
margin: 1px 0;
}
.fieldset label {
margin-right: 3px;
}
.placeholder-uploader {
height: 320px;
width: 100%;
background: #FAF9E9;
}
.placeholder-grid {
width: 640px;
height: 230px;
background: #FAF9E9;
position: absolute;
}
.col-container {
overflow: hidden;
position: relative;
height: 100px;
grid-row-start: span 2;
}
#tbl {
table-layout: fixed;
}
#tbl td {
min-width: 25em;
max-width: 25em;
}
#tbl2 {
table-layout: fixed;
}
#tbl2 td {
min-width: 25em;
}
ul {
list-style-type: none;
cursor: pointer;
}
li {
display: inline-block;
}
/* default is vertical display */
<main class="G HVpZ WVpZ G-wAside">
<section>
<ul class="Cols">
<li>
<table id="tbl" border="1">
<tr>
<td>
<div class="fieldset">
<label>New List Is Just Long</label>
<input type="text"></input>
</div>
</td>
</tr>
<tr>
<td>
<div class="fieldset">
<label>Label Is Just Long</label>
<input type="text"></input>
</div>
</td>
</tr>
<tr>
<td>
<div class="fieldset">
<label>Label Is Just Long</label>
<input type="text"></input>
</div>
</td>
</tr>
<tr>
<td>
<div class="fieldset">
<label>Label Is Just Long</label>
<input type="text"></input>
</div>
</td>
</tr>
<tr>
<td>
<div class="col-container">
<div class="placeholder-grid"></div>
</div>
</td>
</tr>
<tr>
<td>
<div class="G G-23">
<div class="fieldset">
<label>Grid Label DIV Name</label>
<input type="text"></input>
</div>
<div class="fieldset">
<label>Label Is Just Longest Of All</label>
<input type="text"></input>
</div>
</div>
</td>
</tr>
<tr>
<td>
<div class="fieldset">
<label>Label Is Just Long</label>
<input type="text"></input>
</div>
</td>
</tr>
</table>
</li>
<!--
<li>
<div class="col-container">
<div class="placeholder-grid"></div>
</div>
</li>
// -->
<li>
<table id="tbl2" border="1">
<tr>
<td>
<p>Praesent vestibulum semper erat ut varius. Donec sed erat ac odio ultricies bibendum et sit amet lectus. In placerat consequat mi, sed commodo mauris ornare non. Integer nibh leo, dignissim in purus at, pretium porta nibh. Nulla vestibulum
imperdiet sollicitudin. Morbi euismod justo metus, quis imperdiet nunc eleifend ultrices. Donec nec maximus lacus. Aenean tincidunt mattis nisi, eget molestie dolor iaculis vel. Praesent faucibus risus vel arcu tincidunt, id varius orci
bibendum. Duis posuere est in diam luctus ultrices id in sapien. Fusce bibendum pharetra velit, sit amet commodo diam pharetra ac.</p>
</td>
</tr>
</table>
</li>
</ul>
</section>
<section class="filler">
← How to auto-fill this space to keep css multi columns in previous grid item to set width of 40ch? →
</section>
<section class="bg">Aside</section>
</main>
So if I understand you correctly you have two questions:
I would like to find a CSS solution that keeps these columns to a set width.
Is there a way to auto expand the last drawn column? OR Is there a way to keep a dynamic multi-column count from expanding?
Answer to #1, #2:
If you want a fixed size for a column in your grid then use absolute units for your grid-template-columns property.
Instead of this:
grid-template-columns: 1fr minmax(0, 10vw) 10vw;
Use this:
/*Sets the minimal
width to 0 and
fills in the rest
of the available
space.
↓ */
grid-template-columns: 40ch minmax(0, 1fr);
/* ↑
Sets a fixed
width to your
first column */
This way your first column is exactly 40ch in width and the second one (the aside) fills up the rest of the space, which essentially answers your question #2 too.
At the end it looks like this:
#charset "UTF-8";
/* https://stackoverflow.com/questions/7785374/how-to-prevent-column-break-within-an-element */
html,
body {
padding: 0;
margin: 0;
}
input {
width: 100%;
box-sizing: border-box;
}
label {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: block;
font-family: "Miriam Libre";
font-size: 10px;
color: #213C3A;
}
.Cols {
margin: 0;
padding: 0;
columns: 40ch;
column-count: auto;
column-fill: auto;
column-rule: 1px dotted #3DB199;
height: 100vH;
/* ↓ columns defined by width */
overflow: auto;
}
li {
width: 100%;
display: inline-block;
padding: 3px;
border-bottom: 1px solid #D36B66;
}
.G {
display: grid;
}
.G-wAside {
grid-template-columns: 40ch minmax(0, 1fr);
gap: 1vw;
}
.G-23 {
grid-template-columns: 66.66% 33.33%;
}
.HVpZ {
height: 100%;
}
.WVpZ {
width: 100%;
}
.filler {
background: #CCE0E2;
}
.fieldset {
margin: 5px 3px;
}
.fieldset>* {
margin: 1px 0;
}
.fieldset label {
margin-right: 3px;
}
.placeholder-uploader {
height: 320px;
width: 100%;
background: #FAF9E9;
}
.placeholder-grid {
width: 640px;
height: 230px;
background: #FAF9E9;
position: absolute;
}
.col-container {
overflow: hidden;
position: relative;
height: 100px;
grid-row-start: span 2;
}
<main class="G HVpZ WVpZ G-wAside">
<section>
<ul class="Cols">
<li>
<div class="fieldset">
<label>New List Is Just Long</label>
<input type="text">
</div>
<div class="fieldset">
<label>Label Is Just Long</label>
<input type="text">
</div>
<div class="fieldset">
<label>Label Is Just Long</label>
<input type="text">
</div>
<div class="fieldset">
<label>Label Is Just Long</label>
<input type="text">
</div>
<div class="col-container">
<div class="placeholder-grid"></div>
</div>
<div class="G G-23">
<div class="fieldset">
<label>Grid Label DIV Name</label>
<input type="text">
</div>
<div class="fieldset">
<label>Label Is Just Longest Of All</label>
<input type="text">
</div>
</div>
<div class="fieldset">
<label>Label Is Just Long</label>
<input type="text">
</div>
</li>
<li>
<div class="col-container">
<div class="placeholder-grid"></div>
</div>
</li>
<li>
<p>Praesent vestibulum semper erat ut varius. Donec sed erat ac odio ultricies bibendum et sit amet lectus. In placerat consequat mi, sed commodo mauris ornare non. Integer nibh leo, dignissim in purus at, pretium porta nibh. Nulla vestibulum imperdiet
sollicitudin. Morbi euismod justo metus, quis imperdiet nunc eleifend ultrices. Donec nec maximus lacus. Aenean tincidunt mattis nisi, eget molestie dolor iaculis vel. Praesent faucibus risus vel arcu tincidunt, id varius orci bibendum. Duis
posuere est in diam luctus ultrices id in sapien. Fusce bibendum pharetra velit, sit amet commodo diam pharetra ac.</p>
</li>
</ul>
</section>
<section class="filler">← How to auto-fill this space to keep css multi columns in previous grid item to set width of 40ch? →</section>
</main>
PS:
In your code you are closing your <input> tags. This is not necessary and a syntax error. Therefore, I fixed it in my example code.
Edit #1
Hi #Aaron3219. Thanks for your answer. My question is: "Is there a way to keep a dynamic multi-column count from expanding?" And the main issue is in .Cols {} where I have a set width columns: 40ch and column-count: auto. I want to make sure that when these columns display, whether it's one or 10, that they have, strictly, a set width of 40ch that does not respond when the viewport width changes.
As far as I am concerned, no there isn't. The column-width property (which you are using in columns in a shorthand) is a suggestion for the browser for a minimal column width and not an absolute width.
Or, as w3schools put it:
The column-width property specifies the column width.
The number of columns will be the minimum number of columns needed to show all the content across the element.
column-width is a flexible property. Think of column-width as a minimum width suggestion for the browser. Once the browser cannot fit at least two columns at your specified width then the columns will stop and drop into a single column.
But there are, of course, ways to achieve the structure you intend for example with a flexbox or a grid. I am sure that using columns is an approach not suitable for what you intend to do.
I would like to have a webpage with two columns. The first for buttons, and the second for content.
Here's a JsFiddle :
HTML:
<div data-role="page" data-theme="b" id="home">
<div data-role="header" data-position="fixed">
<div class="home-header">
<div class="content-header" data-tap-toggle="false">
Header
</div>
</div>
</div>
<div data-role="content">
<div>
<div class="ActionsMenu">
<button>button</button>
<button>button</button>
<button>button</button>
<button>button</button>
</div>
<div id="ActionsContent">
<h3 class="ui-bar ui-bar-a ui-corner-all">Heading</h3>
<div class="ui-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse accumsan blandit fermentum. Pellentesque cursus mauris purus, auctor commodo mi ullamcorper nec. Donec semper mattis eros, nec condimentum ante sollicitudin quis. Etiam orci sem, porttitor ut tellus nec, blandit posuere urna. Proin a arcu non lacus pretium faucibus. Aliquam sed est porttitor, ullamcorper urna nec, vehicula lorem. Cras porttitor est lorem, non venenatis diam convallis congue.</p>
</div>
</div>
</div>
</div>
<div data-role="footer" data-position="fixed" data-tap-toggle="false">
footer
</div>
CSS:
.ActionsMenu {
width: 100%;
float: none;
}
.ActionsContent {
width: 100%;
float: none;
}
#media all and (min-width: 400px) {
.ActionsMenu {
float: left;
width: 25%;
padding-right: 50px;
}
.ActionsContent {
float: none;
margin-left: 25%;
}
}
As you can see, the content is under the buttons and not where I need it...
The page also need to be responsive and display a single column for mobiles...
DEMO
Have width prpperty defined for both the divs.
As you are going for responsive design i suggest using % widths
.MainContent .ActionsMenu {
width: 25%;
float: none;
overflow-scrolling: auto;
}
.MainContent .ActionsContent {
width: 60%;
float: right;
}
Have float element to float the content right
And You should have a id ActionsMenu in HTML not class.
<div class="ActionsMenu"> ..</div>
EDIT:
You want to align to right-http://jsfiddle.net/VT9m3/11/ add padding based on that
.ActionsContent {
float: left;
width:65%;
padding-left:20px;
}
but as your padding on the same div might break at a resoultion if the width of .ActionsMenu+.Actionscontent+padding >100% so have the Action menu in another div and have width property to it then have .ActionContent and have the padding
Please replace these css lines
.ActionsMenu {
width: 25%;
float: left;
overflow-scrolling: auto;
}
#ActionsContent {
width: 60%;
float: right;
}
You're using a class selector to select an id. Either replacing id="ActionsContent" with class="ActionsContent" or replacing .ActionsContent with #ActionsContent should make sure the styles are actually applied ;)
Not just a simple image next to a paragraph< but with some spaces like this
(source: gyazo.com)
So far of what I've done :
<div class="span6">
<span class="head">Header</span>
<img style="vertical-align:middle float: left;" src="img/pickaxe.png"/>
<span class="paragraph">
This is Photoshop's version of Lorem Ipsum.
Proin gravida nibh vel velit auctor aliquet.
Aenean sollicitudin, lorem quis bibendum auc
tor, nisi elit consequat ipsum, nec sagittis sem nibh i
</span>
</div>
.span8 {
width: 620px;
}
.head {
font-weight: bold;
font-size: 26px;
float: left;
}
.paragraph {
font-size: 14px;
width: 300px;
}
And it looks like this
(source: gyazo.com)
Ignore the line, it's a cropper image off the web.
What am I doing wrong? how can I fix this.
Thanks!
Here is a jsfiddle for you: http://jsfiddle.net/Xxw85/
The code should look more like this:
<div class="span6">
<p>Header</p>
<div class="head">
<img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRgMvCRHrTA30jksWsHfDZ4GwWfjJhM8Ck2RAtA_OLeOpnGRTrEXw"/>
</div>
<div class="paragraph">
This is Photoshop's version of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auc
tor, nisi elit consequat ipsum, nec sagittis sem nibh i
</div>
<div style="clear:both"></div>
</div>
and css:
.span6 {
width: 620px;
background-color:#efefef;
}
.head {
font-weight: bold;
font-size: 26px;
float: left;
color:red;
}
.paragraph {
font-size: 14px;
width: 300px;
float:left;
}
Good luck.
Consider this fiddle. I have used div element instead of the span element inside the parent div.
<div>
<div class="head">Header</div>
<img style="vertical-align:middle float: left;" src="img/pickaxe.png"/>
</div>
And float the content to the right by adding this.
.paragraph {
float:right;}
http://jsfiddle.net/AaXTm/8/
The width of the element was less than the parent element and since you didn't use any floats or clear, the elements were visible inline.