How can I make all divs with different heights bunch together vertically whilst having them in columns? Each of the divs in my website float left with a 5px margin on the right and bottom so that two columns are made but with them all different heights the bottom margins are different depending on the tallest div in that row, how can I make them bunch up like on this Google Now page?
I have made a basic version of my website in JSFiddle.
<div id="container">
<div id="tile" class="tile-1"></div>
<div id="tile" class="tile-2"></div>
<div id="tile" class="tile-3"></div>
<div id="tile" class="tile-4"></div>
<div id="tile" class="tile-5"></div>
<div id="tile" class="tile-6"></div>
</div>
#container {
width: 210px;
height: auto;
overflow: auto;
}
#tile {
width: 100px;
margin: 0 5px 5px 0;
background-color: #333;
float: left;
}
.tile-1 { height: 100px; }
.tile-2 { height: 130px; }
.tile-3 { height: 80px; }
.tile-4 { height: 100px; }
.tile-5 { height: 110px; }
.tile-6 { height: 150px; }
I have done it previously by making each column have their own container but when the browser window shrinks I need the 'tiles' to merge but keep their order, going from reading the page like a book to reading it like a list for smaller screens.
Thanks in advance.
Matt
Use one of these
Isotope (probably most popular)
Masonry
jQuery.waterfall
Wookmark jQuery plugin
See examples and you will achieve this easily.
Related
I am having trouble and need assistance. Essentially, I want a center image div and four divs around the center image with text. Also, when I collapse the page width, I want them to all float centered below one another. Imagine a smartphone image in the middle of the screen and four text blocks (two top and two bottom). Additionally (to complicate things, ha) I want the left top and bottom text blocks to have right aligned text and the right top and bottom text blocks to have left aligned text. When the page collapses, I want all text to be centered. Thank you very much for any assistance!
The problem I have with my existing code: I cannot move the text blocks exactly where I want. I don't want them specifically at the top and bottom. Also, I am having trouble with aligning the text properly.
This is what I have so far:
#solutions2Header {
text-align: center;
padding-top: 50px;
padding-bottom: 50px;
font-size: 40px;
font-weight: lighter;
letter-spacing: 2px;
}
.solutionSection2:after { /*clear float*/
content: "";
display: table;
clear: both;
margin: 0 auto;
}
.solutionSection2 > div {
float: left;
width: 33%;
box-sizing: border-box;
text-align: center;
background-color: red;
}
#media (max-width: 850px) { /*breakpoint*/
.solutionSection2 > div {
float: none;
margin-left: auto;
margin-right: auto;
width: 100%;
background-color: #FAFAFA;
text-align: center;
}
}
.solutions2 {
background-color: green;
height: 100%;
padding-bottom: 500px;
}
#iphonexCenter {
position: relative;
margin: 0 auto;
}
#bottomBox {
padding-bottom: 100px;
}
<div class="solutions2">
<h2 id="solutions2Header">Highlighted Features</h2>
<div class="solutionSection2">
<div>
<p>Charges stored in one <br>place.</p>
<p><br>Provides peace of mind by<br>syncing and storing your charges<br>automatically.</p>
</div>
<div>
<img src="http://via.placeholder.com/300x600" id="iphonexCenter" alt="iPhone X Image" height="600" width="300" style="margin: 0 auto">
</div>
<div>
<p>Individual and team<br>messaging.</p>
<p><br>100% HIPAA compliant text<br>messaging at the tip of your fingers.</p>
</div>
</div>
<div class="solutionSection2">
<div id="bottomBox">
<p>Track daily work<br>progress.</p>
<p><br>Intellegently helps locate<br>missing charges and provides a score<br>card to ensure all charges are entered.</p>
</div>
<div>
<p></p>
</div>
<div id="bottomBox">
<p>Care coordination<br>alerts.</p>
<p><br>Be in the know. We can alert <br>your providers via admit/discharge
<br> notifications, stat, routine consults,<br> and more.</p>
</div>
</div>
</div>
If you don't need support for old browser I would go with flex box. It's quite easy. You can find complete guide to it here https://css-tricks.com/snippets/css/a-guide-to-flexbox/
I would like to ask if this kind of column stacking is possible on Bootstrap without using Javascript or JQuery.
This One
instead of This.
I used
col-md-6
to style my columns at the moment, however I cannot figure out how to prioritize the stacking to fill vertical space first until it reaches the end (height) of the parent <div> followed by filling the neighboring horizontal space going down, and so on.
I could not find any topics about this anywhere in Google. So, I came here to see if it is actually possible or it isn't.
Thanks.
Yes, it's possible. But you need two wrappers. One for 1 ~ 4 second for 5 and 6.
jQuery is only used to demonstrate view-port change
$(document).ready(function() {
$('button').click(function() {
$('.wrapper').toggleClass('v2')
});
});
div div div {
border: 1px solid #ddd;
text-align: center;
font-weight: bold;
float: left;
padding: 20px 20px;
}
div {
box-sizing: border-box;
}
.wrapper {
width: 100px;
height: 250px;
}
.w-1,
.w-2 {
width: 50%;
float: left;
}
.v2 .w-1,
.v2 .w-2 {
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="w-1">
<div class="col-xs-6">1</div>
<div class="col-xs-6">2</div>
<div class="col-xs-6">3</div>
<div class="col-xs-6">4</div>
</div>
<div class="w-2">
<div class="col-xs-6">5</div>
<div class="col-xs-6">6</div>
</div>
</div>
<hr/>Only for demo:
<button>Toggle layout</button>
first time user of Foundation framework, I've developed all my previous websites with Bootstrap but now I'm forced to built one website with foundation. I noticed they are pretty similar but somehow different frameworks.
I've encountered a problem and hope you can help me with this.
I need to add a banner to a website which is full width and text which is within the grid and has a bg which is also full width, see what I mean here:
Here is my html:
<div class="fullWidth">
<div class="banner">
<div class="logo">
<img src="images/logo.svg"/>
</div>
<div class="row">
<div class="bg-tagline">
<h1 class="tagline">some text here</h1>
</div>
</div>
</div>
</div>
and the css:
.fullWidth {
width: 100%;
margin-left: auto;
margin-right: auto;
max-width: initial;
}
.banner {
background: white url("images/baner.jpg") no-repeat center;
height: 590px;
background-size: cover;
position: relative;
}
.logo {
position: relative;
padding: 1%;
height: 5em;
width: 5em;
}
.bg-tagline {
color: #fff !important;
background-color: white;
width: 100%;
margin: 0px auto;
}
.bg-tagline h1 {
color: #fff !important;
font-size: 1.2em;
text-align: center;
}
As far as I know, there's no a "full width" class in foundation framework; Normally, in those layout types, I'd just use the elements off the framework, for instance:
<header id="banner">
<div class="slogan">Your text banner here</div>
</div>
And of course some CSS like you have already. If you need something elaborated (like a layout using foundation's classes), I'd put inside div.slogan a div.row, and start building layout from there, of course that row would be restricted to the max width from the framework.
BTW, if you need to have the entire framework having a wider width for the rows, you can change the framework settings and re-compile.
Personally, I like to make utility class for rows:
.row.fullwidth {
max-width:100em; // set your override width here
margin: 0 auto;
}
That way whenever I need a full width section I just do:
<div class="row fullwidth">
<!--- content --->
</div>
I have 3 floated divs on the first "row", the two first divs have a height of 100px, and the third div has a height of 200px. Anything I add after the first row won't fill the whitespace created from the third div.
CSS:
#container {
overflow: hidden;
width: 440px;
margin: -5px;
}
#container div {
background-color: gray;
height: 100px;
width: 100px;
margin: 5px;
float: left;
}
#container #widget2 {
width: 210px;
}
#container #widget3 {
height: 200px;
}
HTML:
<div id="container">
<div id="widget1">1</div>
<div id="widget2">2</div>
<div id="widget3">3</div>
<div id="widget4">4</div>
<div id="widget5">5</div>
<div id="widget6">6</div>
<div id="widget7">7</div>
</div>
widget3 somehow creates unusable space, so that widget4 to 6 are far away and it generally looks weird.
You can see what I mean here: http://jsfiddle.net/SGdG3/80/
I want the red boxes to be "pushed" up to use the white space.
Basically this is how Floated elements behaves. if you want to fill the space, then you have go for absolute positioning with Javascript. Here is a Beautiful JQuery plugin for your solution.
I have been struggling with this for over 4 hours now and I can't figure this out.
Usually when I design a site I always have it centered so I never face the problems were divs break out of the layout.
ISSUE 1
I have a sidebar on the left, followed by a content block and then a sidebar on the right.
Each sidebar should be 180px wide and the content block should fill the empty space between those two sidebars.
I can't even get them to float next to eachother now, I could do so before but I am really getting crazy.
Even if I do get them to float next to eachother, when I zoom in the page the content block breaks layout and falls down below the left sidebar it is so super annoying I never had this issue before.
ISSUE 2
The div Block at the header should automatically size between the two logos, similar to what i need for the content_wrapper, how can i do this?
Can someone help me please?
Thanks
HTML
<div id="header">
<div id="left_logo" class="logo"></div> <!-- Logo on the Left -->
<div id="block">This is a block</div> <!-- Div block inbetween the two logos -->
<div id="right_logo" class="logo"></div> <!-- Logo on the Right -->
</div>
<div id="content_wrapper">
<div id="left_sidebar" class="sidebar">Left Sidebar</div>
<div id="middle_content">Middle Content</div>
<div id="right_sidebar" class="sidebar">Right Sidebar</div>
</div>
CSS
html,body {
height:100%;
}
body {
background-image: url('../bg.jpg');
}
#header {
width: 100%;
border: solid 1px;
overflow: hidden;
}
.logo {
width: 180px;
height: 180px;
background-image: url('../avatar.jpg');
border: solid 1px;
}
#block {
border: solid 1px;
float: left;
}
#left_logo {
float: left;
}
#right_logo {
float: right;
}
#content_wrapper {
width: 100%;
}
.sidebar {
width: 180px;
float: left;
}
#middle_content {
min-height: 500px;
width: 100%;
float: left;
}
There are several points to note
move the #right_sidebar before the #middle_content
#right_sidebar must float right not left
#middle_content must not float and not have width: 100%
if you want to have the #middle_content in its own column, i.e. not float below the left and right sidebar, add margin-left and margin-right
The same applies to #header.
See JSFiddle for how this could look like.
Although it's several years old, there's a nice overview of basic layout schemes with CSS at http://www.thenoodleincident.com/tutorials/box_lesson/boxes.html