I have website that where the php code generates all the products on the same page.
So far i get something like this.
http://ratecleveland.com/irregular_height_columns.jpg
however i am trying to get something like this.
http://ratecleveland.com/new.jpg
any idea if this can be done in css. or if no, is there a javascript examle.
thank you for the help
jQuery Masonry: http://masonry.desandro.com/
Here's a fiddle, use display:inline-block; with the ?display hack
http://jsfiddle.net/qW3TV/
No javascript is necessary.
Looks like all of the divs are the same width. Why not just create containing column divs around the ones you want to stack?
<div class="col1">
<div class="a"></div>
<div class="e"></div>
<div class="i"></div>
</div>
<div class="col2">
<div class="b"></div>
<div class="f"></div>
<div class="k"></div>
</div>
<div class="col3">
<div class="c"></div>
<div class="g"></div>
<div class="l"></div>
</div>
<div class="col4">
<div class="d"></div>
<div class="h"></div>
<div class="m"></div>
</div>
Float each column left and your interior div's, which appear to already have specified width and height, will fall into place. You can even give the columns the same class, since they will just be floated left containers.
Related
I'm trying to make custom gallery grid using bootstrap. All goes well but im stuck on last step.
I'm posting HTML structure since i belive it's problem in here somewhere but my code cotains some css (paddings/margins mostly) and JS (explained why below).
HTML:
<div class="about_gallery">
<div class="col-xs-9 pd-9">
<div class="row">
<div class="col-xs-8 pd-8">
<div class="color1"><img src="http://1.bp.blogspot.com/-lTAkZcm_aO0/VoR2I2nDq8I/AAAAAAAAGIg/G0vVuMw1nrI/s1600/NEW-YEARS-RESOLUTIONS-calendar.jpg"/></div>
</div>
<div class="col-xs-4 pd-4">
<div class="color2"><img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTj4NOe5Usd1_GJv4waOL5JbnJFVEGeduUHlB3Ej-TIpUhqVEouLw"/></div>
</div>
</div>
<div class="row">
<div class="col-xs-4 pd-4">
<div class="color3"><img src="https://s-media-cache-ak0.pinimg.com/originals/7c/7e/41/7c7e41ad177113fecc68a0213cf724c2.jpg"/></div>
<div class="color11"><img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTj4NOe5Usd1_GJv4waOL5JbnJFVEGeduUHlB3Ej-TIpUhqVEouLw"/></div>
</div>
<div class="col-xs-8 pd-8">
<div class="color4"><img src="http://1.bp.blogspot.com/-lTAkZcm_aO0/VoR2I2nDq8I/AAAAAAAAGIg/G0vVuMw1nrI/s1600/NEW-YEARS-RESOLUTIONS-calendar.jpg"/></div>
<div class="row">
<div class="col-xs-6 cl-5">
<div class="color5"><img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTj4NOe5Usd1_GJv4waOL5JbnJFVEGeduUHlB3Ej-TIpUhqVEouLw"/></div>
<div class="color12"><img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTj4NOe5Usd1_GJv4waOL5JbnJFVEGeduUHlB3Ej-TIpUhqVEouLw"/></div>
</div>
<div class="col-xs-6 cl-6">
<div class="color6"><img src="https://s-media-cache-ak0.pinimg.com/originals/7c/7e/41/7c7e41ad177113fecc68a0213cf724c2.jpg"/></div>
</div>
</div>
</div>
</div>
</div>
<div class="col-xs-3 pd-3">
<div class="color8 "><img class="pion-rect" src="https://s-media-cache-ak0.pinimg.com/originals/7c/7e/41/7c7e41ad177113fecc68a0213cf724c2.jpg"/></div>
<div class="color9"><img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTj4NOe5Usd1_GJv4waOL5JbnJFVEGeduUHlB3Ej-TIpUhqVEouLw"/></div>
<div class="color10"><img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTj4NOe5Usd1_GJv4waOL5JbnJFVEGeduUHlB3Ej-TIpUhqVEouLw"/></div>
</div>
</div>
Here is fiddle: http://jsfiddle.net/y6co8e5u/
The goal is to have grid like here: Grid example
As you can see on bottom left corner instead of 1 horizontal rectangle i have two squares and i don't know how to "connect" them since it's in different columns. It's my first time with bootstrap so it's probably a little bit messy. (I'm also not sure if my JS is needed here but when i added spaces between pictures i needed to extend the pictures) I'm open for any other solution too.
Thanks for help!
I will assume you are trying to add the .color7 div, append it to <div class="col-xs-4 pd-4">, just after the .color3 block. The block will look like this:
<div class="col-xs-4 pd-4">
<div class="color3"><img src="https://s-media-cache-ak0.pinimg.com/originals/7c/7e/41/7c7e41ad177113fecc68a0213cf724c2.jpg"/></div>
<div class="color7"><img src="http://1.bp.blogspot.com/-lTAkZcm_aO0/VoR2I2nDq8I/AAAAAAAAGIg/G0vVuMw1nrI/s1600/NEW-YEARS-RESOLUTIONS-calendar.jpg"/></div>
</div>
then on the css, set .color7 {width: calc(200% + 10px);}
here is the updated fiddle: http://jsfiddle.net/y6co8e5u/3/
no change to the js code.
You need to restructure your HTML a bit, have to put
<div class="color10"><img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTj4NOe5Usd1_GJv4waOL5JbnJFVEGeduUHlB3Ej-TIpUhqVEouLw"/></div>
inside the <div class="col-xs-4 pd-4">
of second row. Hope this is what you want.
Check updated jsfiddler: http://jsfiddle.net/mayankN/y6co8e5u/1/
I'm using bootstrap grid system for building a website, i'm not using the row class but the padding between divs is not working!
<div class="container">
<div class="col-lg-4"></div>
<div class="col-lg-4"></div>
<div class="col-lg-4"></div>
<div class="col-lg-4"></div>
</div>
Can anyone help me with that?
In Bootstrap there are 12 columns in a row. You have 4 * 4 = 16, and that's not correct.
It’s based on a 12 column layout and has multiple tiers, one for each media query range.
So you should change your code to:
<div class="container">
<div class="row">
<div class="col-lg-4"></div>
<div class="col-lg-4"></div>
<div class="col-lg-4"></div>
</div>
</div>
See docs here.
To start with - assuming you are wanting a single row- you need to either change these divs to a "3" each or have one less of them - remember that 12 is the magic number for the Bootstrap grid.
Also the reason for containing the cols in a .row is to control the margin on either side. The padding is INSIDE the divs - not between them so the following will give you a row with 3 divs that are positioned adjacent to each other to give a full row and will have left / right padding of 15px inside each div:
<div class="container">
<div class="row">
<div class="col-lg-4"></div>
<div class="col-lg-4"></div>
<div class="col-lg-4"></div>
</div>
</div>
The .row class has a -15px margin on either side so that each of the side divs will aligns with the edge of the parent container div. Remember that you can use container-fluid to expand the parent div across the entire viewport.
So to summarise - the Bootstrap .col-* divs do NOT have padding between them, but rather padding inside them. Unless of course your CSS overrides that.
According to Bootstrap documentation:
Row is mandatory
Every row has 12 columns
You are using 16 columns, change your code to:
<div class="container">
<div class="row">
<div class="col-lg-4"></div>
<div class="col-lg-4"></div>
<div class="col-lg-4"></div>
</div>
</div>
I want to add a div with some title over the JQuery Backstretch images. The code looks like:
<div class="col-md-4 col-xs-12">
<div class="imgs">
</div>
</div>
Here the inner div is used for backstretch. If I add any content prior to that within outer div, (like below) the stretch is not working.
<div class="col-md-4 col-xs-12">
<div class='row'>some text</div>
<div class='row'>
<div class="imgs">
</div
</div>
</div>
I was trying to replicate the scenario in jsfiddle (http://jsfiddle.net/krishnasarma/err1fkcd/) but its not showing the images at all.
Most likely you haven't specified dimensions for .imgs div used for backstretch. Set desired width and height properties for that container.
Demo: http://jsfiddle.net/err1fkcd/3/
I have the following set of divs:
<div class="col-md-12">
<div class="col-md-5" id="left">
<div id="A"></div>
<br />
<div id="B"></div>
</div>
<div class="col-md-5" id="right">
<div id="C"></div>
</div>
</div>
So we have a left and right column, with the left column containing two divs and the right column containing one. JSFiddle doesn't seem to have Bootstrap as an option so I had to make do.
What I want to achieve, when in mobile view, is this:
You can see the div that was at the top left, div A, is now at the bottom. I know I need to use offsets for this, but my tinkering has produced no results.
Here i have to boxes, it looks like this
<div class="dataViewBox">
<div class="dataViewBox-Download">
<div class="dataViewBox-DownloadLink">
<span class="dataViewBox-Hashes"></span>
</div>
<div id="testblock0h" class="dataViewBox-HideShowButton" onclick="magicmushrooms('testblock0')">Show</div>
<div class="dataViewBox-Name">SomeName</div>
</div>
<div id="testblock0" class="dataViewBox-BottomBorder">
<div id="test0" class="dataViewBox-Data toggleable Text">
<span>this is just a test to show the the box can expand and be alot more bigger then it first was</span>
</div>
</div>
</div>
<div class="infoViewExpirein">
<div id="infoViewExpireinTime">Build this up to be bigger then the box................................</div>
</div>
<div class="dataViewBox">
<div class="dataViewBox-Download">
<div class="dataViewBox-DownloadLink">
<span class="dataViewBox-Hashes"></span>
</div>
<div id="testblock1h" class="dataViewBox-HideShowButton" onclick="magicmushrooms('testblock1')">Show</div>
<div class="dataViewBox-Name">SomeName</div>
</div>
<div id="testblock1" class="dataViewBox-BottomBorder">
<div id="test1" class="dataViewBox-Data toggleable Text">
<span>See how this box fallows the other one when you open it, and same when you close it, it always has equal width</span>
</div>
</div>
</div>
<div class="infoViewExpirein">
<div id="infoViewExpireinTime">Build this up to be bigger then the box................................</div>
</div>
All the code is too much to post here, but I have two boxes, the code works as it is now but the thing is that I do not like how I have solved this problem, if you open one box and you'll see at the other comes free with and the same size, it's the idea that it should be so. So all elements on the page is always symmetric. Its just that it only works if you have "display: table" in body. And i try to find another way to do this whit same results, its always hard when you try to get equal width on everything, But the way to do it CSS/JavaScript does not matter
Link: JsFiddle
/ Slaktarn
All you need to do is to add a max-width parameter to whatever elements you want to limit in size.
body {
...
display: block;
max-width: 450px;
}