I am looking to do something with my layout where my sidebar overflows a background change.
You can see in the jsfiddle here what I have currently. I am sure I just have things written in my following html out of order. I want the darker gray to show directly below the recent posts pictures but allow the sidebar to expand down into it. I can not just use a background image to do this because the length of the lighter content will change on other wordpress template pages.
Here is the code I currently have
<div id="main-content-container">
<div class="container">
<div class="row">
<div id="main-content" class="span9">
<div class="row">
<div id="featured-article" class="span9"><img src="http://placehold.it/715x340" /></div>
</div>
<div id="recent-posts" class="row">
<div class="span9">
<div class="row">
<div class="span9">
<h1>Recent Posts</h1>
</div>
</div>
<div class="row">
<div class="span3"><img src="http://placehold.it/220" /></div>
<div class="span3"><img src="http://placehold.it/220" /></div>
<div class="span3"><img src="http://placehold.it/220" /></div>
</div>
</div>
</div>
</div>
<div id="sidebar" class="span3">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sed justo vitae quam accumsan semper. Vivamus varius orci posuere turpis congue semper vulputate eros congue. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas eleifend magna in nulla semper vestibulum. Nulla a auctor odio. Vestibulum condimentum placerat tortor ut tempus. Morbi aliquet pellentesque sapien eu pharetra. Vivamus luctus, urna id pretium congue, dui nisi vestibulum nunc, non tincidunt justo dolor eget lacus. Aliquam condimentum, urna at blandit tristique, nulla felis porta erat, congue consectetur tortor mi vitae neque.
Nullam pellentesque, velit in convallis sagittis, enim enim viverra elit, ac tincidunt tellus elit eget dui. Donec sit amet odio eros. Nullam vitae pretium augue. Maecenas sit amet nisi ante, quis laoreet augue. Aliquam commodo suscipit bibendum. Duis imperdiet ornare magna, non porttitor lacus faucibus eget. Aenean viverra purus quis turpis fringilla hendrerit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc suscipit molestie nunc. Donec convallis mollis dui nec accumsan. Donec posuere ipsum ut nisl ornare eget sodales metus feugiat. Aliquam viverra, nunc nec malesuada hendrerit, velit nisl placerat augue, sed feugiat nisl turpis id risus. Nunc lobortis massa vitae justo fringilla vel condimentum lectus fermentum.
</p>
</div>
</div>
</div>
</div>
<div id="extra-body-container">
This part should fall right under the recent posts pictures and allow the sidebar to overflow on top of it.
</div>
I have tried to set a float on the sidebar but that did not work. I am not sure if the way I have my html will allow me to do this or not with only modifying my css.
the row above the extra-body-container try setting it to margin-left: -100% along w/ the body-bg.png then on the extra-body-contain put the margin-left to 50% and the width to 100%
Check it out here: http://jsfiddle.net/3sBkk/9/show/
<div id="main-content-container">
<div class="container">
<div class="row">
<div id="main-content" class="span9">
<div class="row">
<div id="featured-article" class="span9">
<img src="http://placehold.it/715x340" />
</div>
</div>
<div id="recent-posts" class="row">
<div class="span9">
<div class="row">
<div class="span9">
<h1>Recent Posts</h1>
</div>
</div>
<div class="row">
<div class="span3">
<img src="http://placehold.it/220" />
</div>
<div class="span3">
<img src="http://placehold.it/220" />
</div>
<div class="span3">
<img src="http://placehold.it/220" />
</div>
</div>
<div class="row" style="margin-left: -100%; background: url('../img/extra-body-bg.png') #AAAAAA repeat-x top center;">
<div id="extra-body-container" class="span12">This part should fall right under the recent posts pictures and allow the sidebar to overflow on top of it.</div>
</div>
</div>
</div>
</div>
<div id="sidebar" class="span3" style="z-index: 999;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sed justo vitae quam accumsan semper. Vivamus varius orci posuere turpis congue semper vulputate eros congue. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas eleifend magna in nulla semper vestibulum. Nulla a auctor odio. Vestibulum condimentum placerat tortor ut tempus. Morbi aliquet pellentesque sapien eu pharetra. Vivamus luctus, urna id pretium congue, dui nisi vestibulum nunc, non tincidunt justo dolor eget lacus. Aliquam condimentum, urna at blandit tristique, nulla felis porta erat, congue consectetur tortor mi vitae neque. Nullam pellentesque, velit in convallis sagittis, enim enim viverra elit, ac tincidunt tellus elit eget dui. Donec sit amet odio eros. Nullam vitae pretium augue. Maecenas sit amet nisi ante, quis laoreet augue. Aliquam commodo suscipit bibendum. Duis imperdiet ornare magna, non porttitor lacus faucibus eget. Aenean viverra purus quis turpis fringilla hendrerit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc suscipit molestie nunc. Donec convallis mollis dui nec accumsan. Donec posuere ipsum ut nisl ornare eget sodales metus feugiat. Aliquam viverra, nunc nec malesuada hendrerit, velit nisl placerat augue, sed feugiat nisl turpis id risus. Nunc lobortis massa vitae justo fringilla vel condimentum lectus fermentum.</p>
</div>
</div>
</div>
Hope this helps or at least gets you in the right direction.
looks like (as you said) you just had a couple things out of order
Here is a revised fiddle.
http://jsfiddle.net/3sBkk/1/
and really it was just a matter of moving your content into the main wrapping element, and creating a row out of it, adjusting the span to 12, and setting the z-order of sidebar to ensure it overlaps.
I'm not exactly sure how to include the code here but here is the culprit.
<div id="recent-posts" class="row">
<div class="span9">
<div class="row">
<div class="span9">
<h1>Recent Posts</h1>
</div>
</div>
<div class="row">
<div class="span3">
<img src="http://placehold.it/220" />
</div>
<div class="span3">
<img src="http://placehold.it/220" />
</div>
<div class="span3">
<img src="http://placehold.it/220" />
</div>
</div>
<div class="row">
<div id="extra-body-container" class="span12">This part should fall right under the recent posts pictures and allow the sidebar to overflow on top of it.</div>
</div>
</div>
</div>
EDIT: To achieve both the overlapping sidebar and the 100% width you're going to have to get kind of hacky with your css, and I don't necessarily endorse it, but is it possible, sure, anything is possible.
http://jsfiddle.net/2Yet7/ (sorry its so ugly).
Related
I want to display a list via "collapsible bootstrap panels" but I notice when I open certain panels they do not align properly.
E.g. when I open the first panel in the code all other panels move under each other under the second panel.
I want panel 3 and 4 to stay on their place in their grid when I open panel 1.
What am I doing wrong?
<div class="container">
<div class="row">
<div class="col-xs-6">
<div>
<a
href="#panel1"
class="btn btn-info"
data-toggle="collapse">Panel 1</a>
</div>
<div
id="panel1"
class="collapse">
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Praesent scelerisque, neque sit amet aliquam pulvinar, metus
arcu commodo sem, id volutpat erat nulla imperdiet enim. Proin
imperdiet dolor vitae lorem efficitur, non tincidunt nisi
accumsan. Nam condimentum mi ac auctor tincidunt. Fusce eget
tempus velit, in porta velit. Mauris vel ultrices ipsum. Nunc
rutrum vitae quam ut porta. Suspendisse diam sem, molestie sed
nisl id, imperdiet ornare libero. Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Nam sagittis augue vitae iaculis
lacinia. Ut id eros egestas turpis vehicula feugiat ut eu
lectus. Ut eu consequat arcu, a porttitor magna.
</p>
</div>
</div>
</div>
<div class="col-xs-6">
<div>
<a
href="#panel2"
class="btn btn-info"
data-toggle="collapse">Panel 2</a>
</div>
<div
id="panel2"
class="collapse">
<div>
<p>Nunc vel lectus sit amet ante imperdiet aliquet non sit amet
felis. Vestibulum rhoncus rutrum ante nec sodales. Aliquam
vitae suscipit orci. Nam dignissim a purus vitae efficitur.
Pellentesque habitant morbi tristique senectus et netus et
malesuada fames ac turpis egestas. Nam libero augue,
scelerisque ut rhoncus eu, scelerisque a enim. Vestibulum ante
ipsum primis in faucibus orci luctus et ultrices posuere
cubilia Curae; Ut luctus molestie lectus, ac dictum sem tempor
id.
</p>
</div>
</div>
</div>
<div class="col-xs-6">
<div>
<a
href="#panel3"
class="btn btn-info"
data-toggle="collapse">Panel 3</a>
</div>
<div
id="panel3"
class="collapse">
<div>
<p>Aliquam sit amet convallis nulla, quis dapibus elit. Aliquam
nisl justo, mollis et pulvinar ut, laoreet eu enim. Quisque
maximus scelerisque dui, aliquam posuere dolor consequat ut.
Nullam semper dictum urna et auctor. Donec lacus risus,
sagittis at vestibulum ac, dictum vitae mauris. Duis non velit
congue diam vulputate auctor a et libero. Duis a tortor
lobortis, suscipit orci eu, facilisis eros. Proin et faucibus
tortor, in finibus elit. Morbi suscipit porttitor justo
interdum euismod. In posuere leo velit, non egestas tortor
malesuada sit amet. Phasellus malesuada ultricies massa eget
volutpat.
</p>
</div>
</div>
</div>
<div class="col-xs-6">
<div>
<a
href="#panel4"
class="btn btn-info"
data-toggle="collapse">Panel 4</a>
</div>
<div
id="panel4"
class="collapse">
<div>
<p>Cras interdum dui sit amet nisi porttitor, iaculis cursus
tellus tincidunt. Praesent iaculis eget ipsum sed condimentum.
Fusce aliquam ipsum mauris. Donec laoreet dapibus efficitur.
Quisque in rhoncus dolor. Aliquam erat volutpat. Quisque eget
quam sed velit ultrices pellentesque. Vivamus neque arcu,
vestibulum in neque a, tincidunt sagittis lectus. Nullam nisi
nulla, semper non maximus sed, rutrum vel velit.
</p>
</div>
</div>
</div>
</div>
</div>
**Tyr With this**
<div class="container">
<div class="row">
<div class="col-xs-6">
panel1 Code
</div>
<div class="col-xs-6">
panel2 Code
</div>
</div>
<div class="row">
<div class="col-xs-6">
panel3 Code
</div>
<div class="col-xs-6">
panel4 Code
</div>
</div>
</div>
This is my first time using Bootstrap and I have some problems trying to get my content central.
I want to contain the content width, but allow the background colours to flow the full width of the page. I have tried to offset columns, however this just results in uneven spacing either side of the content.
My current markup is here:
https://codepen.io/charlyanderson/pen/bKggyb?editors=1100
<div class="container-fluid">
<div class="row">
<div id="example-col-1" class="col-lg-5">
<div class="row">
<div class="col-lg-8 offset-md-4">
<p>Fusce maximus, elit non mollis consectetur, neque nisi iaculis est, suscipit feugiat magna urna suscipit mauris. In hac habitasse platea dictumst. Vestibulum efficitur dui in ultricies placerat. Etiam nec ipsum ac lectus finibus malesuada. Vestibulum varius pretium ipsum imperdiet condimentum. Curabitur tincidunt maximus auctor. Donec vulputate mollis ligula, a pellentesque tortor tincidunt non.</p>
</div>
</div>
</div>
<div id="example-col-2" class="col-lg-7">
<div class="row">
<div class="col-lg-8">
<p>Fusce maximus, elit non mollis consectetur, neque nisi iaculis est, suscipit feugiat magna urna suscipit mauris. In hac habitasse platea dictumst. Vestibulum efficitur dui in ultricies placerat. Etiam nec ipsum ac lectus finibus malesuada. Vestibulum varius pretium ipsum imperdiet condimentum. Curabitur tincidunt maximus auctor. Donec vulputate mollis ligula, a pellentesque tortor tincidunt non.</p>
</div>
</div>
</div>
</div>
</div>
Use ml-auto for the first inner column and mr-auto for the second inner column.
#example-col-1 {
background-color: beige;
}
#example-col-2 {
background-color: pink;
text-align: right;
}
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
</head>
<body>
<div class="container-fluid">
<div class="row">
<div id="example-col-1" class="col">
<div class="row">
<div class="col-lg-8 ml-auto">
<p>Fusce maximus, elit non mollis consectetur, neque nisi iaculis est, suscipit feugiat magna urna suscipit mauris. In hac habitasse platea dictumst. Vestibulum efficitur dui in ultricies placerat. Etiam nec ipsum ac lectus finibus malesuada.
Vestibulum varius pretium ipsum imperdiet condimentum. Curabitur tincidunt maximus auctor. Donec vulputate mollis ligula, a pellentesque tortor tincidunt non.</p>
</div>
</div>
</div>
<div id="example-col-2" class="col">
<div class="row">
<div class="col-lg-8 mr-auto">
<p>Fusce maximus, elit non mollis consectetur, neque nisi iaculis est, suscipit feugiat magna urna suscipit mauris. In hac habitasse platea dictumst. Vestibulum efficitur dui in ultricies placerat. Etiam nec ipsum ac lectus finibus malesuada.
Vestibulum varius pretium ipsum imperdiet condimentum. Curabitur tincidunt maximus auctor. Donec vulputate mollis ligula, a pellentesque tortor tincidunt non.</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
https://codepen.io/anon/pen/BVpWwo
Use a dummy col-lg-4 column before the first inner column and after the second inner column.
#example-col-1 {
background-color: beige;
}
#example-col-2 {
background-color: pink;
text-align: right;
}
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
</head>
<body>
<div class="container-fluid">
<div class="row">
<div id="example-col-1" class="col">
<div class="row">
<div class="col-lg-4"></div>
<div class="col-lg-8">
<p>Fusce maximus, elit non mollis consectetur, neque nisi iaculis est, suscipit feugiat magna urna suscipit mauris. In hac habitasse platea dictumst. Vestibulum efficitur dui in ultricies placerat. Etiam nec ipsum ac lectus finibus malesuada.
Vestibulum varius pretium ipsum imperdiet condimentum. Curabitur tincidunt maximus auctor. Donec vulputate mollis ligula, a pellentesque tortor tincidunt non.</p>
</div>
</div>
</div>
<div id="example-col-2" class="col">
<div class="row">
<div class="col-lg-8">
<p>Fusce maximus, elit non mollis consectetur, neque nisi iaculis est, suscipit feugiat magna urna suscipit mauris. In hac habitasse platea dictumst. Vestibulum efficitur dui in ultricies placerat. Etiam nec ipsum ac lectus finibus malesuada.
Vestibulum varius pretium ipsum imperdiet condimentum. Curabitur tincidunt maximus auctor. Donec vulputate mollis ligula, a pellentesque tortor tincidunt non.</p>
</div>
<div class="col-lg-4"></div>
</div>
</div>
</div>
</div>
</body>
</html>
https://codepen.io/anon/pen/jKyBwy
You may find this question also useful.
Offsetting columns is not working (Bootstrap v4.0.0-beta)
Update
if you want to have a smaller left column and larger right, use this code.
#example-col-1 {
background-color: beige;
}
#example-col-2 {
background-color: pink;
}
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
</head>
<body>
<div class="container-fluid">
<div class="row">
<div id="example-col-1" class="col-5">
<div class="row">
<div class="col-lg-4"></div>
<div class="col-lg-8">
<p>Fusce maximus, elit non mollis consectetur, neque nisi iaculis est, suscipit feugiat magna urna suscipit mauris. In hac habitasse platea dictumst. Vestibulum efficitur dui in ultricies placerat. Etiam nec ipsum ac lectus finibus malesuada. Vestibulum varius pretium ipsum imperdiet condimentum. Curabitur tincidunt maximus auctor. Donec vulputate mollis ligula, a pellentesque tortor tincidunt non.</p>
</div>
</div>
</div>
<div id="example-col-2" class="col-7">
<div class="row">
<div class="col-lg-9 text-right">
<p>Fusce maximus, elit non mollis consectetur, neque nisi iaculis est, suscipit feugiat magna urna suscipit mauris. In hac habitasse platea dictumst. Vestibulum efficitur dui in ultricies placerat. Etiam nec ipsum ac lectus finibus malesuada. Vestibulum varius pretium ipsum imperdiet condimentum. Curabitur tincidunt maximus auctor. Donec vulputate mollis ligula, a pellentesque tortor tincidunt non.</p>
</div>
<div class="col-lg-3"></div>
</div>
</div>
</div>
</div>
</body>
</html>
By the way, better to use text-right instead of text-align: right; style.
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'm just stuck, heres my codepen, what am I doing wrong?
http://codepen.io/lastnoob/pen/zvKNmo
</head>
<body>
<div class="ui left inverted vertical menu sidebar">
<div class="item">
<button id="hide-sidebar" class="button">
<i class="sidebar icon"></i>
</button>
</div>
<a class="item">
Item 1
</a>
<a class="item">
Item 2
</a>
<a class="item">
Item 3
</a>
</div>
<div class="pusher">
<div id="show-sidebar" class="button toggler">
<i class="sidebar icon"></i>
Sidebar
</div>
<!-- Site content !-->
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
</div>
</body>
</html>
JS:
$(function() {
$('#show-sidebar').click(function() {
$('#show-sidebar').hide();
$('.menu.sidebar').sidebar('toggle');
});
$('#hide-sidebar').click(function() {
$('#show-sidebar').show();
$('.menu.sidebar').sidebar('toggle');
});
});
It doesnt really do anything, my sidebar is not showing up, not doing anything.
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>