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>
Related
It is my fault, I am trying to re-ask the question.
I have some code like this:
<style>
div {
float: left; width: 150px; padding: 10px;
margin: 10px; color: #fff;
}
</style>
<div style="background: #c33">
a<br>a<br>a<br>a<br>a<br>a<br>a<br>a
</div>
<div style="background: #3c3;">
b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>
b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b
</div>
<div style="background: #33c;">
c<br>c<br>c<br>c<br>c<br>c<br>c
</div>
<div style="background: #399;">
d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>
</div>
<div style="background: #939;">
e<br>e
</div>
<div style="background: #993;">
f<br>f<br>f<br>f<br>f
</div>
<!--
... and so on ...
-->
when my visitor's screen has enough width, it is works fine like this.
when the screen become smaller, it still works fine at beginning.
but good time doesn't last long, when continually shrink screen size, it displayed like this.
some space appeared between c(the blue one) and e(the purple one).
then a(the red one) and f(the yellow one).
when shrink to 2 columns, a c and e are totally separated.
So, my question is, every my block have certain(fixed) width, uncertain(fluid) height, there is no max-width of this "block area" or say "the parent node of these blocks" or container whatever.
Can I just remove these unnecessary spaces using pure css way?
Hope this time I explained clearly, and thank you for reading my post.
You might try to left float only two, and float right the other:
.aaa,
.bbb,
.ccc {
width: 200px;
padding: 10px;
margin: 20px;
color: #fff;
}
.bbb {
float: right;
}
.aaa,
.ccc {
float: left;
}
<div class="aaa" style="background: #933">
a<br>a<br>a<br>a<br>a<br>a<br>a<br>a
</div>
<div class="bbb" style="background: #393">
b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br> b
<br>b<br>b<br>b<br>bbr>b<br>b<br>b<br>b<br>b
</div>
<div class="ccc" style="background: #339">
c<br>c<br>c<br>c<br>c<br>c
</div>
Grid, flex... and even simply using floats and clears:
<style>
div {
width: 200px; padding: 10px;
margin: 20px; color: #fff;
}
</style>
<div style="background: #933; float: left;">
a<br>a<br>a<br>a<br>a<br>a<br>a<br>a
</div>
<div style="background: #393; float:right;">
b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>
b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b
</div>
<div style="background: #339; clear:left;">
c<br>c<br>c<br>c<br>c<br>c
</div>
To some extent you can do that, if you use left AND right floats as shown below and put a wrapper around it to let the right-floated elements not go too far right:
div {
width: 200px;
padding: 10px;
margin: 20px;
color: #fff;
}
.a {
float: left;
}
.b {
float: right;
}
.wrapper {
width: 520px;)
<div class="wrapper">
<div style="background: #933" class="a">
a<br>a<br>a<br>a<br>a<br>a<br>a<br>a
</div>
<div style="background: #393" class="b">
b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br> b
<br>b<br>b<br>b<br>bbr>b<br>b<br>b<br>b<br>b
</div>
<div style="background: #339" class="a">
c<br>c<br>c<br>c<br>c<br>c
</div>
</div>
Like others have said, there are plenty ways of doing it, but I'd use flexbox.
Just wrap the two boxes on the left in a container div, and use display:flex on that container, and set the flex-direction property to column and they should stack on top of one another.
Here's a great website to pick up the basics - http://flexboxfroggy.com/
Oddly enough, the closest you could get is using damn CSS columns..
Yeah, that's right. I just said "CSS Columns"
Declaring an auto column layout using your divs width as column width, and making sure no div will wrap into multiple columns with break-inside: avoid; you can get pretty close.
body {
columns: 150px;
column-gap: 2em;
}
div {
break-inside: avoid;
}
https://jsfiddle.net/p0yLs5sh/1/
And yes, I know. I just said columns. Thought that would never be an answer.
I have the following html:
<!DOCTYPE html>
<html>
<body>
<h1 style="margin-bottom: 0;">Hello Plunker!</h1>
<div style="background-color: red; height: 100px; width: 250px;"></div>
</body>
</html>
Basically I would like to give my h1 a width that the text inside it should occupy no matter if I add or remove a word (adapting the font-size and the letter-spacing according to it). I could change my "Hello Plunker" and the last letter should still finish where the div below finishes.
I can use some js if needed but not Jquery
This is an ugly answer, but it might just do the trick if you plan on sticking to CSS. Hopefully someone will be able to point out a better way, however.
This idea relies on the fact that text-align: justify will spread out all lines of text but the last one (or the only one in case of just one line). Therefore, we're adding some useless text just to make sure there are at least two lines of text. Then, we try to hide the second line. I'm sure this could be improved upon:
h1 {
width: 250px;
height: 1.4em;
margin-bottom: 0;
background-color: green;
text-align: justify;
}
h1 span {
visibility: hidden;
display:inline-block;
line-height: 0px;
}
div {
background-color: red;
height: 100px;
width: 250px;
}
<h1>Hello Plunker<span>make sure there are two lines, pretty please?</span></h1>
<div></div>
You can edit the jsfiddle here. To be honest, I guess it would be better to use JavaScript.
If you're willing to use JS, then http://fittextjs.com/ is worth a look. I don't think is achievable using CSS alone.
Just an Idea of using transform:scale(jQueryCalc) - to make content fit its parents innerWidth.
$(document).ready(function() {
$(".fit").each(function() {
$(this).css("transform", "scale(" + ($(this).parent().innerWidth() / $(this).width()) + ")");
});
});
.container {
background-color: red;
height: 70px;
width: 250px;
display: inline-block;
position: relative;
overflow: hidden;
}
.fit{
display: block;
color: #FFF;
float: left;
transform-origin: left top;
white-space: nowrap;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<h1 class="fit">Hello Plunker!</h1>
</div>
<div class="container">
<span class="fit">Well this should work</span>
</div>
<div class="container">
<span class="fit">Well this should work; Well this should work</span>
</div>
<div class="container">
<span class="fit">Well this should work; Well this should work; Well this should work; Well this should work</span>
</div>
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.
I created 1 parent id named "mod1" and 2 child classes named "left" and right".
When I call the left and right classes inside the parent mod1 id, they are overflowing from the parent id's height. I don't want to explicitly mention height of parent id "mod1", I simply want it to stretch as per the child classes within. The problem is that the parent id is not actually CONTAINING both it's child classes i.e. none of the child are having background color as #888 and the border seems to appear right above them.
This is my html code
<head>
<style>
body
{
max-width: 600px;
margin: auto;
}
#mod1
{
background-color: #888;
border: 1px solid black;
}
#mod1 .left
{
float: left;
width: 75%;
}
#mod1 .right
{
float: left;
width: 25%;
}
</style>
</head>
<body>
<div id="mod1">
<div class="left">
Book Accomodation + Deals With The Best In The Business
</div>
<div class="right">
VIEW ON THE WEB
</div>
</div>
</body>
The reason why the parent's height appears to collapse is because when you float an element, it is taken out of the document flow and therefore does not contribute to the computation of the parent container's final dimensions. If all the children are floated, then the parent's height will collapse to zero.
The solution is rather simple: use overflow: hidden to clear the float in the parent element. However, if you have overflowing content that you want to show (like a dropdown menu), you will have to employ the clearfix solution.
#mod1
{
background-color: #888;
border: 1px solid black;
overflow: hidden;
/* overflow: auto; will also work fine */
}
You can see from the snippet below that adding the rule works:
body
{
max-width: 600px;
margin: auto;
}
#mod1
{
background-color: #888;
border: 1px solid black;
overflow: hidden;
}
#mod1 .left
{
float: left;
width: 75%;
}
#mod1 .right
{
float: left;
width: 25%;
}
<div id="mod1">
<div class="left">
Book Accomodation + Deals With The Best In The Business
</div>
<div class="right">
VIEW ON THE WEB
</div>
</div>
The CSS property float causes the element to "collapse", which is why the container element looks like it's not containing the left and right elements. I usually make a dummy div below them, inside the container class, and give it the property clear: both;
<div id="mod1">
<div class="left">
Book Accomodation + Deals With The Best In The Business
</div>
<div class="right">
VIEW ON THE WEB
</div>
<div class="dummy"></div>
</div>
and give it the style:
.dummy {
clear: both;
}
See other possible solutions: How do you keep parents of floated elements from collapsing?
You have to clear your floats when using floats (most of the time).
Use flex instead. Then you don't have to clear floats. It makes things like this easier.
body {
max-width: 600px;
margin: auto;
}
#mod1 {
display: flex; /* Tells the browser you want children to use flex */
font-family: sans-serif;
color: white;
}
.left,
.right {
flex: 1; /* Tells the browser to take "one piece of pie" for the width (or height, depending on flex-direction) */
padding: 1em;
}
.left {
background: orange;
}
.right {
background: darkorange;
}
<div id="mod1">
<div class="left">
Book Accomodation + Deals With The Best In The Business
</div>
<div class="right">
VIEW ON THE WEB
</div>
</div>
There are some answers to a similar question already, but this one has a twist.
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-3 grey">
<div class="wrapper">
<div class="info">(i)</div>
<div class="text"><div class="labeled">This is a long text</div></div>
<div class="icon">[$]</div>
</div>
</div>
<div class="col-xs-12 col-sm-9 green">
Content
</div>
</div>
So I need three divs, aligned in one line at all conditions - info, text, icon - with two divs on the sides having fixed h/w, and one in the middle taking only as much space, as
either it needs, and not more
or is available for it, cutting the context with overflow:hidden
Here is the fiddle http://jsfiddle.net/L7tmt5w1/3/
Here are my mad skills in sketching ideas http://imgur.com/tF0HkD2
For those, who want to feel my pain, you may also try re-ordering the divs - text, icon, info - when the screen size goes mobile (bootstrap's col-xs-)
You can use the display: table-cell; method for this situation:
.wrapper {
display: table;
text-align: right;
width: 100%;
}
.info {
width: 20px;
height: 20px;
display: table-cell;
background-color: #005ea8;
color: #fff;
}
.icon {
width: 20px;
height: 20px;
display: table-cell;
background-color: #eb690b;
color: #fff;
}
.text {
display: table-cell;
background-color: #ccc;
width: auto;
}
This mimics the table display properties and keeps all the children of .wrapper inline and the middle one "elastic" as it has no defined width. You can also remove the floats.
http://jsfiddle.net/L7tmt5w1/7/
maybe this solution will help you DEMO
<aside class="panel">
...
</aside>
<div class="content">
...
</div>
.content {
overflow: hidden;
border: 1px solid;
}
.panel {
float: right;
width: 200px;
border: 1px solid;
}
You can try this http://jsfiddle.net/L7tmt5w1/3/
Remember: If you want to float an element to the right, it must be the first element. For example:
<div style="float:right"></div>
<div style="float:left"></div>
AND DIV's are already block elements, so you don't have to add display:block to a DIV-element
I don't know if this is what you want: jsfiddle
if not content on "text" no div... if too much content it's hidden
(but you can add
overflow:auto
to the text div for scroll bars