Given this code:
#wrapper {
border:2px solid red;
padding:10px;
width:310px; height:310px;
-webkit-column-width:150px; -webkit-column-gap:10px;
-moz-column-width:150px; -moz-column-gap:10px;
column-width:150px; column-gap:10px;
}
#wrapper > div {
width:150px;
background:#ccc;
margin-bottom:10px;
white-space:no-break;
}
<div id="wrapper">
<div>FIRST BOX: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi porttitor imperdiet dolor sit amet placerat. Phasellus vestibulum enim sed dui blandit nec dignissim justo sollicitudin. Phasellus vestibulum enim sed dui blandit nec dignissim justo sollicitudin.</div>
<div>SECOND BOX: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi porttitor imperdiet dolor sit amet placerat.</div>
<div>THIRD BOX: In at libero ipsum, vel cursus ante. Phasellus ac odio in tortor commodo venenati
I would like to arrange these 3 boxes into 2 columns using the CSS multi-column layout.
JSFiddle Demo
As you can see from my demo, it works. However, I'm concerned with the second box being fragmented into both columns. I would like to prevent this element fragmentation if possible. Is there any way to tell the browser not to fragment my boxes into multiple columns?
(Note that both the second and third box could easily fit into the second column, which is the arrangement I'd like to achieve.)
Some experimentation led me to:
-webkit-column-break-inside: avoid;
http://jsfiddle.net/7TXGS/
However, it doesn't work in Chrome Stable/Beta. It works in Chrome Canary (and Dev):
Probably using -webkit-column-break-after: always; with the FIRST BOX is appropriate.
<div id="wrapper">
<div> FIRST BOX: ... </div>
<div> SECOND BOX: ... </div>
<div> THIRD BOX: ... </div>
</div>
And this CSS code:
#wrapper {
border:2px solid red;
padding:10px;
width:310px;
//height:310px;
-webkit-column-width:150px; -webkit-column-gap:10px;
-moz-column-width:150px; -moz-column-gap:10px;
column-width:150px; column-gap:10px;
}
#wrapper > div {
width:150px;
background:#ccc;
margin-bottom:10px;
}
#wrapper > div:first-child {
-webkit-column-break-after: always;
}
Related
I need to change the order of elements using css in mobile view. Please refer to the code below.
<div class="container">
<aside>
<h2>Heading</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pulvinar sapien a erat lacinia, in consequat metus tincidunt. Morbi rhoncus, odio ac im</p>
Link
</aside>
<span>This line should come after heading.</span>
</div>
I want to move the span right after the heading in mobile view.
This is how I want in mobile devices:
.container {
display: inline-block;
width: 100%;
}
aside {
width: 50%;
display: inline-block;
}
span {
width: 50%;
float: right;
margin-top: 30px;
}
<div class="container">
<aside>
<h2>Heading</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pulvinar sapien a erat lacinia, in consequat metus tincidunt. Morbi rhoncus, odio ac im</p>
Link
</aside>
<span>This line should come after heading.</span>
</div>
Try this by switching classes using media queries
#media screen and (max-width: 600px) {
.show-mob {
display: block;
}
.show {
display: none;
}
}
<div class="container">
<aside>
<h2>Heading</h2>
<span class="show-mob">This line should come after heading.</span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pulvinar sapien a erat lacinia, in consequat metus tincidunt. Morbi rhoncus, odio ac im</p>
Link
</aside>
<span class="show">This line should come after heading.</span>
</div>
You can do like this.
<div class="container">
<aside>
<h2>Heading</h2>
<span id="spn1" style="display:none">This line should come after heading.</span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pulvinar
sapien a erat lacinia, in consequat metus tincidunt. Morbi rhoncus, odio ac
im</p>
Link
</aside>
<span id="spn2">This line should come after heading.</span>
</div>
For mobile view use media query
#media screen and (max-width: 600px) {
#spn1{
display:block;
}
#spn2{
display:none;
}
}
Its not possible to change it only with CSS
If you can use jquery you can try to use the .append() function and something like that
function checkPosition() {
if (window.matchMedia('(max-width: 767px)').matches) {
//...
} else {
//...
}
});
if you dont have the chance to use jQuery you need to restructure your HTML
You can do this:
<div class="container">
<aside>
<h2>Heading</h2>
<span class="show-on-mobile">This line should come after heading.</span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pulvinar sapien a erat lacinia, in consequat metus tincidunt. Morbi rhoncus, odio ac im</p>
Link
</aside>
<span class="hide-on-mobile">This line should come after heading.</span>
</div>
and for CSS:
.container {
display: inline-block;
width: 100%;
}
aside {
width: 50%;
display: inline-block;
}
span {
width: 50%;
float: right;
margin-top: 30px;
}
.show-on-mobile {
display:none;
}
#media (max-width: 575px) {
.hide-on-mobile {
display:none;
}
.show-on-mobile {
display:block;
float:none;
width:100%;
margin-bottomn:30px
}
}
EXAMPLE
#media only screen and (max-width: 768px) {
.container {
display: inline-block;
width: 100%;
}
aside {
width: 100%;
display: inline-block;
}
.container h2{position:relative; margin-bottom:20px;}
.container p{padding-top:30px;}
span {
width: 100%;
position:absolute;
left:0;
top:60px;
padding:10px;
}
}
<div class="container">
<aside>
<h2>Heading</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pulvinar sapien a erat lacinia, in consequat metus tincidunt. Morbi rhoncus, odio ac im</p>
Link
</aside>
<span>This line should come after heading.</span>
</div>
Please try like this
I know there's got to be a simple solution to this, but I'm drawing a blank right now.
Here's what I have:
I want the yellow text block to be absolutely positioned inside its parent container, 10 pixels from the right edge. But when I add "position:absolute" and "right:10px" to .text-block, this is what happens:
I know I can just add a fixed height to the parent container for a quick fix, but this will be on a responsive site, so the parent containers need to have a fluid height and width. Here's my code. What am I doing wrong?
<!doctype html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<style type="text/css">
body {
background-color: #FFF;
font-family: helvetica;
color: #333;
}
#wrapper {
padding: 20px;
}
.block {
position: relative;
border: 1px solid #333;
margin-bottom: 10px;
padding: 10px;
}
.text-block {
width: 40%;
background-color: yellow;
position: absolute;
right: 10px;
}
</style>
</head>
<body>
<div id="wrapper">
<div class="block">
<h2>Heading</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae est ut nunc iaculis luctus vitae in risus. Proin mollis facilisis ligula, sed elementum odio consequat quis.</p>
</div> <!-- block -->
<div class="block">
<div class="text-block">
<h2>Heading</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae est ut nunc iaculis luctus vitae in risus. Proin mollis facilisis ligula, sed elementum odio consequat quis.</p>
</div> <!-- text-block -->
</div> <!-- block -->
<div class="block">
<h2>Heading</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae est ut nunc iaculis luctus vitae in risus. Proin mollis facilisis ligula, sed elementum odio consequat quis.</p>
</div> <!-- block -->
</div> <!-- wrapper -->
</body>
</html>
Absolute positioning does take it out of the flow, so what it's doing is expected. Here's one solution using relative positioning instead, plus a transform to achieve what you want with no markup changes. There are many ways with different text-align, float, flex solutions to handle this.
<!doctype html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<style type="text/css">
body {
background-color: #FFF;
font-family: helvetica;
color: #333;
}
#wrapper {
padding: 20px;
}
.block {
position: relative;
border: 1px solid #333;
margin-bottom: 10px;
padding: 10px;
}
.text-block {
width: 40%;
background-color: yellow;
position: relative;
left: 100%;
transform:translate(-100%, 0%);
-webkit-transform:translate(-100%, 0%);
}
</style>
</head>
<body>
<div id="wrapper">
<div class="block">
<h2>Heading</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae est ut nunc iaculis luctus vitae in risus. Proin mollis facilisis ligula, sed elementum odio consequat quis.</p>
</div> <!-- block -->
<div class="block">
<div class="text-block">
<h2>Heading</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae est ut nunc iaculis luctus vitae in risus. Proin mollis facilisis ligula, sed elementum odio consequat quis.</p>
</div> <!-- text-block -->
</div> <!-- block -->
<div class="block">
<h2>Heading</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae est ut nunc iaculis luctus vitae in risus. Proin mollis facilisis ligula, sed elementum odio consequat quis.</p>
</div> <!-- block -->
</div> <!-- wrapper -->
</body>
</html>
Absolutely positioned elements do not affect the parent container height.
You need to use Javascript to change the height as a workaround to this behavior (or, alternatively, use relative positioning).
$(document).ready(function() {
var objHeight = 0;
$.each($('.block').children(), function(){
objHeight += $(this).height();
});
$('.block').height(objHeight);
});
This answer is from here: https://stackoverflow.com/a/8185521/722617
I have an issue regarding my html/css composition
I have a fixed menu on the right with a known width : 175px. What i want is to "fill" the space on the left of this div with an other div.
I hope you will understand what i am saying, anyway, thanks in advance !
You can do something like this (it will work with older browsers) :
jsFiddle
HTML:
<div class="left">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vitae urna eget purus pharetra sodales. Integer in justo quis risus pellentesque fermentum. Donec sit amet pharetra arcu. Fusce imperdiet tempor eleifend.
</div>
<div class="right">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vitae urna eget purus pharetra sodales. Integer in justo quis risus pellentesque fermentum. Donec sit amet pharetra arcu. Fusce imperdiet tempor eleifend.
</div>
CSS:
.left { float:left; height:300px; background:blue; margin-right:175px; }
.right { width:175px; height:300px; background:red; position:fixed; right:0; }
DEMO HERE
CSS
#fixed {
position:fixed;
right:0;
float: right;
width: 100px;
background: rgba(255,0,0,0.7);
height:400px;
text-align: center;
}
#relative {
position:relative;
margin-right: 100px;
background: rgba(0,0,255,0.7);
height:400px;
width:100%;
display: inline-block;
float:right;
text-align: center;
}
HTML
<div id="fixed" >
I am fixed.
</div>
<div id="relative">
I am relative, fluid, width 100%
</div>
Depending on the browsers that you need to support (IE9 >) you can use calc() in your CSS for the "fill":
.fill {
width: calc(100% - 175px);
}
calc() is still labelled as "experimental technology" so be sure to read up on it before using - https://developer.mozilla.org/en-US/docs/Web/CSS/calc
More info regarding calc() support - http://caniuse.com/#search=calc
CSS
.LeftDiv {
width:80%;
display:inline-block;*display:inline;zoom:1; /* The additional code is IE7-fix */
height:500px;
background:#aaa;
}
.rightDiv {
width:175px;
height:500px;
display:inline-block;*display:inline;zoom:1;
background:green;
}
HTML
<leftDiv>a</div><rightDiv>b</div>
most simple version of your request.
I am struggling a bit to get this to work.
If you look at the following JSFiddle:
http://jsfiddle.net/JUDXq/
Is there a way to make the image block sit nicely next to the red block without it moving underneath the red block AND still have other images further down to be 100% width?
The image is on purpose as wide as the parent element. If an image is bigger than its parent, we can use "max-width:100% " to make it resize. But if there is a float inside the parent taking space, is there a way to do this?
<div class="parent">
<div class="left">
</div>
<p>
Lorem ipsum dolor sit amet, non ut, hymenaeos urna mi odio, non ac libero, turpis curabitur ante ultricies proin egestas convallis. In bibendum mauris quis placeat. Fusce interdum id faucibus dictum id adipiscing, non et elit, vel hendrerit libero, nulla donec ornare lacus et lacus lectus. In tristique, mauris mauris adipiscing neque, donec libero nulla sem lacus, nibh arcu nu. <strong> I would like the image to go right below this text.</strong>
</p>
<div class="one">
<img src="http://placekitten.com/500/200">
</div>
</div>
.parent { width: 500px; height:1000px; }
.left {float:left; width:100px; height:200px; background:red; display:block; }
.one { background:blue; }
Image hosted by Placekitten and taken by: Pieter Lanser
Thanks guys
Is this what you're looking for? http://jsfiddle.net/LQxVE/1/
.parent { width: 500px; height:1000px; }
.left {float:left; width:100px; height:200px; background:red; display:block; }
.one { background:blue; }
img {
float: right;
width: 400px;
}
if I'm understanding your comment, this might be more suited: http://jsfiddle.net/LQxVE/2/
.one {
background:blue;
width: 80%;
float: right;
}
img {
max-width: 100%;
}
i am trying to set 3 divs inside the parent div, the parent div will resize after the biggest height of the child divs but i also want the other 2 child divs to take the same size as the biggest one in height.
<div id="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
the parent div will be 600px width and no height given so it will expand depending of the child div biggest height.
#parent {
width: 600px;
overflow: auto;
}
.child {
width: 200px;
float: left;
}
This is what i got so far but if the child divs have different heights, the parent div height is the biggest of the child div heights, but the other 2 child divs dont take the height of the parent ( of the biggest child div in height).
Thank you in advance,
Daniel!
This: http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks and this: http://buildinternet.com/2009/07/four-methods-to-create-equal-height-columns/ may help.
One way would be to use the new feature from CSS display: grid
#parent {
display: grid;
width: 100%;
grid-template-columns: auto auto auto;
/* Just for styling */
text-align: center;
}
.child {
/* Just for styling */
box-sizing: border-box;
background-color: lightyellow;
border: 2px dashed red;
padding: 20px;
}
<div id="parent">
<div class="child">This is first</div>
<div class="child">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse volutpat dolor ante, eu ultricies eros molestie nec. Fusce laoreet laoreet nibh, vel vehicula nunc varius ut</div>
<div class="child">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse volutpat dolor ante, eu ultricies eros molestie nec. Fusce laoreet laoreet nibh, vel vehicula nunc varius utLorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse volutpat dolor ante, eu ultricies eros molestie nec. Fusce laoreet laoreet nibh, vel vehicula nunc varius ut</div>
</div>
Or another one would be the display: flex.
#parent {
display: flex;
flex-flow: row nowrap;
}
.child {
width: 33.3333%; /* Force the column to be a third of the parent width */
/* Just for styling */
box-sizing: border-box;
background-color: lightyellow;
border: 2px dashed red;
text-align: center;
padding: 20px;
}
<div id="parent">
<div class="child">The first one</div>
<div class="child">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse volutpat dolor ante, eu ultricies eros molestie nec. Fusce laoreet laoreet nibh, vel vehicula nunc varius ut</div>
<div class="child">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse volutpat dolor ante, eu ultricies eros molestie nec. Fusce laoreet laoreet nibh, vel vehicula nunc varius utLorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse volutpat dolor ante, eu ultricies eros molestie nec. Fusce laoreet laoreet nibh, vel vehicula nunc varius ut</div>
</div>