I have a list of titles and definitions:
<dl>
<dt>Item 1</dt>
<dd>Nulla at neque blandit, pretium sapien vitae, ornare neque.</dd>
<dt>Item 2</dt>
<dd>Quisque fermentum augue nec rutrum suscipit.</dd>
<dt>Item 3</dt>
<dd>Sed facilisis eros ac lorem bibendum, id tristique ipsum rhoncus.</dd>
<dt>Item 4</dt>
<dd>Duis scelerisque risus sit amet metus placerat volutpat.</dd>
<dt>Item 5</dt>
<dd>Duis tristique erat at leo lacinia, nec fringilla risus rhoncus.</dd>
<dt>Item 6</dt>
<dd>Cras rutrum eros dictum nulla tempus, in consequat tellus dignissim.</dd>
<dt>Item 7</dt>
<dd>Maecenas et erat vitae metus euismod luctus.</dd>
If the browser is wide enough, I'd like to present this in a multi column layout. I'm able to do that, however, I'd like column breaks to happen only after s and never in the middle of s and s, or after s.
Right now I'm using:
dl{column-count:2}
dt,dd{break-inside:avoid;column-break-inside:avoid;-webkit-column-break-inside:avoid}
dt{break-after:never;column-break-after:never;-webkit-column-break-after:never}
At least in chrome this doesn't seem to have any effect.
You have to put dt and dd into a div. Moreover, you have to use break-inside also for this div. Note that you have to use also other declaration for compatibility trough browsers. For example, you have to add page-break-inside for Firefox. See here for further examples. See also the snippet.
I hope I was of any help.
dl {
column-count: 2
}
dt,
dd,
.all {
break-inside: avoid;
page-break-inside: avoid;
-webkit-column-break-inside: avoid
}
dt {
break-after: never;
column-break-after: never;
-webkit-column-break-after: never
}
<dl>
<div class="all">
<dt>Item 1</dt>
<dd>Nulla at neque blandit, pretium sapien vitae, ornare neque.</dd>
</div>
<div class="all">
<dt>Item 2</dt>
<dd>Quisque fermentum augue nec rutrum suscipit.</dd>
</div>
<div class="all">
<dt>Item 3</dt>
<dd>Sed facilisis eros ac lorem bibendum, id tristique ipsum rhoncus.</dd>
</div>
<div class="all">
<dt>Item 4</dt>
<dd>Duis scelerisque risus sit amet metus placerat volutpat.</dd>
</div>
<div class="all">
<dt>Item 5</dt>
<dd>Duis tristique erat at leo lacinia, nec fringilla risus rhoncus.</dd>
</div>
<div class="all">
<dt>Item 6</dt>
<dd>Cras rutrum eros dictum nulla tempus, in consequat tellus dignissim.</dd>
</div>
<div class="all">
<dt>Item 7</dt>
<dd>Maecenas et erat vitae metus euismod luctus.</dd>
</div>
</dl>
Related
I'm using Bulma 0.4.0, though the answer may not be associated with Bulma itself.
How can I set column height equal to others? (see screenshots below)
Edit: codepen with more text that presents actual behavior: https://codepen.io/anon/pen/vmKVbx
Expected behavior:
Actual behavior:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.4.0/css/bulma.css" />
<div class="columns">
<div class="column">
<p class="notification is-info">First column</p>
</div>
<div class="column">
<p class="notification is-success">Second column</p>
</div>
<div class="column">
<p class="notification is-warning">Third column</p>
</div>
<div class="column">
<p class="notification is-danger">Fourth</p>
</div>
</div>
Here is a simple solution, by adding this CSS rule, and make sure it load after the Bulma CSS
.column {
display: flex;
}
Updated codepen
Stack snippet
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.4.0/css/bulma.css" />
<style>
.column {
display: flex;
}
</style>
</head>
<body>
<div class="columns">
<div class="column">
<p class="notification is-info">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eu consectetur lorem, nec facilisis dolor. Morbi rhoncus, mi sit amet ornare tincidunt, augue sem aliquet mauris, non pretium orci nisl at est. Curabitur placerat pharetra augue. Etiam non eros nulla. Praesent aliquet sem dui, id varius enim convallis vel. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec convallis mauris felis, sit amet consectetur augue sollicitudin id.</p>
</div>
<div class="column">
<p class="notification is-success">Nulla a mauris vel erat elementum scelerisque. Cras mollis consequat neque, vitae sagittis nisl dapibus porttitor. Donec et rutrum ligula. Donec luctus iaculis orci, nec imperdiet felis semper quis. Nulla a convallis eros, facilisis hendrerit risus. Nulla sit amet porta quam. Nullam maximus tempus sem, dapibus dapibus purus sollicitudin vel. Phasellus at rhoncus odio. Quisque sit amet ornare dolor. Maecenas accumsan viverra tristique. Etiam vulputate nibh ipsum, at rutrum lacus hendrerit ut. Nunc sodales diam purus, in ultricies nulla consectetur sit amet. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus ut tincidunt mauris.</p>
</div>
<div class="column">
<p class="notification is-warning">Pellentesque eros tortor, pharetra in lorem quis, maximus hendrerit ex. Praesent nunc ante, elementum at congue ut, ultricies quis lectus. Aenean vel elementum risus. Vestibulum aliquet justo in ligula dictum commodo. Nullam condimentum ante vitae nulla dignissim, vitae interdum neque dapibus. Aenean nec quam egestas, viverra ex vel, tempus lectus. Quisque eu euismod neque. Mauris aliquam neque a porta condimentum. Cras eget nisi turpis. Aenean lacus velit, dapibus eu aliquam eget, aliquet id quam. Integer ultricies est quis erat facilisis congue vel efficitur ipsum. Nunc id varius orci, consequat vehicula libero. Morbi maximus, orci in efficitur feugiat, quam lacus lobortis elit, in blandit mauris dolor sit amet mauris.
</p>
</div>
<div class="column">
<p class="notification is-danger">Morbi turpis nunc, porttitor ut bibendum et, tincidunt vel nisi. Ut magna massa, placerat id nunc at, venenatis sodales leo. Nunc dapibus, lacus ac molestie vestibulum, tortor mauris posuere turpis, at pretium orci orci in justo.</p>
</div>
</div>
</body>
</html>
In Bulma, you have got the class .is-flex to achieve the same.
I know it's a bit late, but maybe someone who looks for similar solution will find my answer helpful.
You can use Bulma's Tile system to get something that will behave like equal height columns.
<div class="tile is-ancestor">
<div class="tile is-horizontal">
<div class="tile is-parent">
<div class="tile is-child">
<!--Content here-->
</div>
</div>
<div class="tile is-parent">
<div class="tile is-child box">
<!--Content here-->
</div>
</div>
</div>
</div>
No additional css needed. You can also specify horizontal size of columns using is-1 - is-12 classes.
Check this pen to see this in action
This did the trick for me.
<div class="column">
<section class="section1">
...
</section>
</div>
.section1 {
height: 100%;
}
This works fine for me with this code:
<div class="columns">
<div class="column my-class">
one thing
</div>
<div class="column my-class">
many other <br><br><br> etc. things
</div>
</div>
<style>
.column.my-class {
display: inline-flex;
}
.column.my-class > div {
width: 100%; // only Edge needed this nonsense
}
</style>
Worked in Chrome 61.0.3163.100 (of course), Edge 40.15063.674.0, Firefox 57.0.
align-items: stretch http://cssreference.io/flexbox/
.columns {
flex-wrap: wrap;
align-items: stretch;
}
Ref: https://github.com/jgthms/bulma/issues/696
I noticed that making .column as flex broke the layout.
I solved with the following CSS rule, this way I can use the class .is-equal-height if I want aligned columns.
.columns.is-equal-height > .column > * {
height: 100% !important;
}
I have 3 divs. The first div is the rectangular border. I tried different combinations of floating to get the 2 divs to display next to the first div, but have been unsuccessful. Here is the code below and the jsfiddle.
<div class="attempt">
</div>
<div>
<ul id="menu">
<li><a style="background:#3F4E64" href="/html/default.asp">Button1</a></li>
<li><a style="background:#788291">Button2</a></li>
</ul>
</div>
<div>
<H2>TITLE</H2>
<p>
BADKADA
</p>
<p>
Fusce luctus ipsum in dui accumsan, posuere scelerisque lacus ultrices. Quisque quis ultricies nunc. Nam augue magna, eleifend id mi vel, pretium
</p>
<p>
Fusce luctus ipsum in dui accumsan, posuere scelerisque lacus ultrices. Quisque quis ultricies nunc. Nam augue magna, eleifend id mi vel, pretium
</p>
CSS
.attempt {
width:15px;
height:1290px;
background: #3F4E64
}
https://jsfiddle.net/ksaluja/f1s51sj4/
Take out the display property so the first div defaults to block. Then float it to the left and give it a margin-right of 20px or so to give the content some breathing room.
.attempt {
float:left;
width: 15px;
height: 1290px;
background: #3F4E64;
margin-right:20px;
}
<div class="attempt">
</div>
<div>
<ul id="menu">
<li><a style="background:#3F4E64" href="/html/default.asp">Button1</a></li>
<li><a style="background:#788291">Button2</a></li>
</ul>
</div>
<div>
<H2>TITLE</H2>
<p>
BADKADA
</p>
<p>
Fusce luctus ipsum in dui accumsan, posuere scelerisque lacus ultrices. Quisque quis ultricies nunc. Nam augue magna, eleifend id mi vel, pretium
</p>
<p>
Fusce luctus ipsum in dui accumsan, posuere scelerisque lacus ultrices. Quisque quis ultricies nunc. Nam augue magna, eleifend id mi vel, pretium
</p>
<p>
Fusce luctus Fusce luctus ipsum in dui accumsan, posuere scelerisque lacus ultrices. Quisque quis ultricies nunc. Nam augue magna, eleifend id mi vel, pretium fring.
</p>
</div>
Setting the display property for the attempt div to 'inline-block' will display the div as an inline-block container, so any content or div's ahead will be displayed after it and not by side. So, to get the next divisions to the side of the first one, you can do as #symlink explained. 'block' or the default property of display, will set the div as an independent block, and other divisions will align on the side to this block.
I would like to wrap a text div around its sibling image div. Not to be confused with the standard way to wrap text around an image, but with two separate divs.
The example is below:
<div style="width:1000px;">
<div>
<img src="some url" />
</div>
<div>
<p>Some very long text here</p>
</div>
</div>
I want to make it look like the text is wrapping around the image.
Is this possible?
Float the div containing the image left or right.
<div style="width:1000px;">
<div style="float:left">
<img src="some url" />
</div>
<div>
<p>Some very long text here</p>
</div>
</div>
jsFiddle example
Here is a similar way to do it:
http://jsfiddle.net/Sux2Z/
<div>
<img src="http://cdn.memegenerator.net/images/80x80/1167066.jpg" />
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam cursus. Morbi ut mi. Nullam enim leo, egestas id, condimentum at, laoreet mattis, massa. Sed eleifend nonummy diam. Praesent mauris ante, elementum et, bibendum at, posuere sit amet, nibh. Duis tincidunt lectus quis dui viverra vestibulum. Suspendisse vulputate aliquam dui. Nulla elementum dui ut augue. Aliquam vehicula mi at mauris. Maecenas placerat, nisl at consequat rhoncus, sem nunc gravida justo, quis eleifend arcu velit quis lacus. Morbi magna magna, tincidunt a, mattis non, imperdiet vitae, tellus. Sed odio est, auctor ac, sollicitudin in, consequat vitae, orci. Fusce id felis. Vivamus sollicitudin metus eget eros.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In posuere felis nec tortor. Pellentesque faucibus.
</div>
.div {width:400px;}
img {
margin:0 10px 10px 0;
float:left;
}
I'm trying to create a responsive layout in bootstrap that has a full-height sidebar. I got the responsive part working, but the only problem is - the spacing of the spans don't seem to be playing well together.
On the right side - the main content - it doesn't span to fit the rest of the screen. Also, when the browser gets too small - the main content actually gets partially hidden by the sidebar.
Am I doing something wrong with the spans? If I remove the position: absolute; from the .sidebar, then the whole .content. piece slides underneath the sidebar - but the sidebar is no longer full height, and the content still doesn't fill the rest of the screen evenly. It seems as it's impossible to get this working correctly, but I want to use bootstrap for the convenience of not having to redo all the CSS/JS that's integrated.
Example:
CSS
html {
height: 100%;
}
.sidebar {
background: #333;
margin: 0;
padding: 3em 2em;
height: 100%;
-moz-box-shadow: 0 0 5px #888;
-webkit-box-shadow: 0 0 5px#888;
box-shadow: 0 0 5px #888;
min-height: 100%;
position: absolute;
}
.sidebar .logo { margin-bottom: 3em; }
.content {
margin: 5em;
}
HTML
<body>
<div class="row">
<!-- Navigation for small screens -->
<div class="navbar navbar-inverse hidden-desktop">
<div class="navbar-inner">
<a class="brand" href="/">Home Link</a>
<ul class="nav">
<li>Projects</li>
<li>Photography</li>
<li>Contact</li>
</ul>
</div>
</div>
<!-- Navigation for larger screens -->
<div class="span3 hidden-phone hidden-tablet">
<div class="span3 sidebar">
<div class="logo"><a class="logo-title" href="/">Home Link</a></div>
<ul class="nav nav-pills nav-stacked">
<li>Projects</li>
<li>Photography</li>
<li>Contact</li>
</ul>
</div>
</div>
<div class="span9 content">
<div class="span5">
<div class="page-header">
<h1>Hello. <small>This is.</small></h1>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris faucibus est vitae ante lobortis ultricies. Pellentesque blandit massa a velit convallis at accumsan elit gravida. Nulla facilisi. Fusce egestas consectetur velit vitae egestas. Cras vitae justo a sapien gravida condimentum. Donec lacinia lacinia ante. Proin eget est neque, ut egestas nibh. Donec non enim eu sem varius adipiscing. Proin dapibus enim a enim condimentum hendrerit. Donec vestibulum, mauris eget lobortis sagittis, enim libero dapibus augue, ac luctus ipsum augue quis purus. Aenean magna ante, elementum ac ultricies vitae, lobortis vitae augue. Nam metus erat, adipiscing posuere fringilla sit amet, molestie vel dolor. Quisque libero lacus, auctor eget porta vitae, vehicula eget mi. Vestibulum pulvinar hendrerit faucibus.
Aliquam scelerisque nisl sit amet mauris euismod bibendum. Phasellus ac laoreet enim. Praesent a felis id nisl ultrices dignissim. Nam dictum leo at quam vulputate mollis. Curabitur vitae ipsum enim, sit amet sollicitudin neque. Nunc iaculis ultricies convallis. Etiam nunc neque, consequat ac vehicula id, imperdiet in neque. Duis vitae sem magna. Nulla vehicula sapien sit amet sapien tempus tempus. Fusce pharetra dui nec risus sollicitudin vel pharetra arcu lacinia. Quisque eleifend sapien eu quam rutrum sed imperdiet nisi sagittis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque id placerat purus.</p>
</div>
<div class="span3">
<div class="page-header">
<h1>Second Header. <small>Not working.</small></h1>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris faucibus est vitae ante lobortis ultricies. Pellentesque blandit massa a velit convallis at accumsan elit gravida. Nulla facilisi. Fusce egestas consectetur velit vitae egestas. Cras vitae justo a sapien gravida condimentum. Donec lacinia lacinia ante. Proin eget est neque, ut egestas nibh. Donec non enim eu sem varius adipiscing. Proin dapibus enim a enim condimentum hendrerit. Donec vestibulum, mauris eget lobortis sagittis, enim libero dapibus augue, ac luctus ipsum augue quis purus. Aenean magna ante, elementum ac ultricies vitae, lobortis vitae augue. Nam metus erat, adipiscing posuere fringilla sit amet, molestie vel dolor. Quisque libero lacus, auctor eget porta vitae, vehicula eget mi. Vestibulum pulvinar hendrerit faucibus.
Aliquam scelerisque nisl sit amet mauris euismod bibendum. Phasellus ac laoreet enim. Praesent a felis id nisl ultrices dignissim. Nam dictum leo at quam vulputate mollis. Curabitur vitae ipsum enim, sit amet sollicitudin neque. Nunc iaculis ultricies convallis. Etiam nunc neque, consequat ac vehicula id, imperdiet in neque. Duis vitae sem magna. Nulla vehicula sapien sit amet sapien tempus tempus. Fusce pharetra dui nec risus sollicitudin vel pharetra arcu lacinia. Quisque eleifend sapien eu quam rutrum sed imperdiet nisi sagittis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque id placerat purus.</p>
</div>
</div>
</div>
</body>
You're already setting that sidebar to absolute, why bother with the height: 100%? It'd be easier to simply add top:0; bottom:0.
The reason your sidebar is getting slid over the content like that is the absolute positioning of the sidebar. If you want to keep that from happening, I'd recommend setting a defined width in your sidebar class (say, of 240px), then changing content's CSS to read like so:
.content {
padding: 5em;
left: 240px;
right: 0;
top: 0;
bottom: 0;
overflow-y: auto;
}
That should constrain your content appropriately to not slide under your sidebar in any circumstance. Then, in order to make it appropriately responsive, adjust font size and width of your sidebar down as the screen reduces, and decrease the left property of .content to match the width of the sidebar.
Is that what you're looking for?
I'm using the 1140 grid system and have a basic question: Do you need to use empty divs as "spacers" if you want an element to be less than 12 cols wide?
Here's the mockup I'm looking to achieve:
Basically, I want to footer to be only underneath the primary area, but in its own row. The only way I can see to do this is to use a div as a "spacer" to indent the footer to where I want it. Is this how its done?
Here's the code (you'll need to make the preview screen large to see what's going on): http://jsfiddle.net/saltcod/87DZC/
<link rel="stylesheet" href="https://raw.github.com/robertcedwards/HTML-5-Boilerplate-1140-Grid/master/css/1140.css" type="text/css" media="screen" />
<div id="main">
<h1 class="site-title">Site Title</h1>
<div class="container">
<div class="row">
<div id="sidebar" class="threecol">
<h4> Sidebar - Three cols</h4>
<ul>
<li> Item one</li>
<li> Item two</li>
<li> Item three</li>
<li> Item four</li>
<li> Item five</li>
</div>
<div id="primary" class="ninecol last">
<h3>Nine columns</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse vel lectus non nisi pellentesque porta sed vel ante. Aliquam ut elit nulla, ac fermentum diam. Donec convallis dui in felis bibendum mollis. Quisque egestas purus libero, ac vehicula tortor. Sed tristique est sed libero pulvinar nec luctus metus vulputate. Etiam ac tempor nunc. Morbi sit amet neque lacus, ac lacinia nisl. Nullam imperdiet ornare sem, non viverra ipsum hendrerit id. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Cras vel leo nisl. Ut bibendum ornare urna eget lacinia.</p>
<p>Aliquam ante lectus, ornare a sollicitudin tincidunt, convallis a magna. Sed fermentum lacus id nisl vestibulum interdum. Ut mattis justo in mi vulputate porttitor. Proin sagittis, urna quis blandit semper, velit nisi aliquet dui, et placerat leo purus a erat. Donec congue, elit a eleifend facilisis, lectus sapien placerat augue, in feugiat ante purus sodales libero. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eget lacus sed enim euismod faucibus. Pellentesque facilisis arcu sed leo gravida a ultricies nisi cursus. Quisque venenatis mollis ligula sed semper. Nullam ac sem purus, non tincidunt velit. In hendrerit, odio sit amet tempus pharetra, libero orci suscipit tellus, eu mollis augue dui a nulla. Vivamus dignissim elit sit amet est mollis sed aliquet lorem posuere. Nulla varius purus quis elit pellentesque et auctor nunc gravida. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed nibh erat, aliquet a luctus vel, pulvinar nec neque.</p>
<h2> If I want three blocks inside #primary, that's easy: </h2>
<div class="fourcol bottom">A</div>
<div class="fourcol bottom">B</div>
<div class="fourcol bottom last">C</div>
</div> <!-- [ .row ] -->
<footer class="row twelvecol">
<h3> But if I want three blocks in my footer, I need to 'indent' it with an empty div?</h3>
<div class="threecol empty bottom"> [ empty div ]</div>
<div class="threecol bottom">A</div>
<div class="threecol bottom">B</div>
<div class="threecol bottom last">C</div>
<p> Isn't this a bit like using a spacer gif in a table layout? </p>
</footer>
</div>
</div>
Isn't this a bit like using a spacer gif in a table layout?
Yes essentially the div will create the space you intended it to make. When using CSS grid frameworks, it's common to use empty divs with the appropriate column class in order to space things accordingly. Of course you can come up with alternate solutions involving relative positioning, etc, but why complicate matters. The last bit of code should look something like this.
<footer class="row twelvecol">
<div class="threecol first"></div>
<div class="threecol bottom">A</div>
<div class="threecol bottom">B</div>
<div class="threecol bottom last">C</div>
</footer>