I have a container div, inside which I want to pack a variable number of divs of unknown (variable) height but with a given min-width. My requirements are:
If the container is wide enough to accommodate two columns, I want them to distribute themselves nicely in two columns without unnecessary whitespace.
It not, they should just go above each other.
Currently, I've given the divs width:48% margin-right:2%;float:left; which works nicely in the one-column state but when I resize the browser window, making room for two columns, every div which ends up in the left column insists on aligning itself horizontally with the bottom of the last div which went to the right:
what I have http://img602.imageshack.us/img602/5719/whatihave.png
This is how I would like them to go (no wasted space):
what I want http://img96.imageshack.us/img96/6985/whatiwantu.png
I would like a pure CSS solution if possible.
Thank you! /Gustav
EDIT:
This markup illustrates my problem:
<html>
<head>
<style type="text/css">
.box {
width: 48%;
min-width:550px;
margin-right:2%;
margin-bottom: 1.5em;
background:blue;
color:white;
height:180px;
float:left;
}
.tall {
height: 250px;
}
</style>
</head>
<body>
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box tall">4</div>
<div class="box">5</div>
<div class="box">6</div>
<div style="clear:both"/>
</body>
</html>
The .boxes are generated dynamically, and so are their heights, I just threw in one taller to illustrate.
I don't think you can achieve the desired effect with pure CSS. I've used jQuery Masonry to replicate the effect you're after and it worked really well.
I'd love to see a pure CSS solution for this but haven't seen anything come close yet.
I believe that if you have a div for each column into which you put the numbered divs you will get what you want. Something like this:
<div class="containerDiv">
<div class="column">
<div class="content">
1
</div>
<div class="content">
4
</div>
</div>
<div class="column">
<div class="content">
2
</div>
<div class="content">
3
</div>
</div>
</div>
The next step appears to be "how do I balance my columns". Some code somewhere is generating the boxes you mentioned. It is deciding on the height of each box. This code will need to generate a balanced list of boxes for each column prior to forwarding the request to the JSP for presentation. By balanced, I mean "the height of column1 is similar to the height to column2"
Related
The offset cannot be of any use for centering columns which aren't multiples of 2 such as col-md-3. But let's say one needs to have a single one of such columns that also has to be centered, how can it be properly done with causing minimum impact on the bootstrap behavior?
I found that by using margins the bootstrap behavior gets messed up. (a backend developer asking this question, I'm not a UI expert)
HTML:
<div class="container">
<div class="row">
<div class="col-md-3 centercol" style="border:1px solid black;">
This is in the middle.
</div>
</div>
</div>
CSS:
.centercol {
margin:0 auto;
float:none;
}
See it in action: http://www.bootply.com/l7AArBXdlZ
I have a basic layout with 2 columns and a footer that behaves according to the height of which column is longer.
<div id="holder">
<nav class="navbar navbar-default navbar-fixed-top"></nav>
<div class="container">
<div class="row">
<div class="left col-md-8">
Extends with content
</div>
<div class="right col-md-4">
Extends with content
</div>
</div>
</div>
<div class="footer">
Relative behaviour when the content of either columns is long enough. Sticks to the bottom when there is not enough content.
</div>
Full code with CSS: http://jsfiddle.net/TNRqL/
What would be an elegant solution to make the columns with the same heights, but that also stick to the footer?
Such as: http://jsfiddle.net/xJ6Cv/ (I used min-height on left and right columns)
I found in another question a solution to make columns of the same heights regardless of which one is longer, but it doesn't make them stick to the footer.
.row {
overflow: hidden;
}
[class*="col-"] {
margin-bottom: -99999px;
padding-bottom: 99999px;
}
If you're OK with around 80% browser support, then you can do this elegantly with the Flexbox CSS3 module. You define the overall page to have a minimum height, and then mark your columns as "flexing" to fill the available space. There's a demo here, though due to the nesting of your elements it won't be quite as simple.
I have two float list one from the right and one from the left. The left float list is on top and the right on bottom. I want the right to be below the left like this:
However, my code produces this:
How can I force the left float list not to break? And why does it break anyway? This is my code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<TITLE>Floats dont like me.</TITLE>
<style type="text/css" media="screen">
.small { height:20px;width:65px;border:solid;float:left;margin-left:10px;margin- top:10px }
.smallR { height:20px;width:65px;border:solid;float:right;margin-right:10px;margin-top:50px; }
</style>
</HEAD>
<BODY>
<div style='width:300px;height:100px;border:solid'>
<div class='smallR' ></div>
<div class='small' ></div>
<div class='small' ></div>
<div class='small' ></div>
</div></BODY></HTML>
The reason it isn't working is likely because you have width: 300px; Change it to around 360px to see if it works then. IF it works, you can always lower the px till it works just how you want precisely.
<div style='width:300px;height:100px;border:solid'> // change the width to like 360px;
<div class='smallR' ></div> // if for some reason changing width: 300px to 360px; doesn't work then put this div as the last one
<div class='small' ></div>
<div class='small' ></div>
<div class='small' ></div>
//would put here if changing width don't work
</div>
Ok, so this should work.
DEMO
Now, why did it not work before?
Simple. It's because of the way you ordered your divs. Let's take a look at your original code:
<div style='width:300px;height:100px;border:solid'>
<div class='smallR' ></div>
<div class='small' ></div>
<div class='small' ></div>
<div class='small' ></div>
</div>
What is this asking the browser to interpret? It's asking for the very first div to be positioned as far right as possible and for the following three divs to fit in the line but be positioned as far left. Why doesn't it work? Because this is trying to fit all 4 divs in one line. It isn't able to because your very first div is already positioned at the far right, causing any div that won't fit on the left to be positioned one row down (this is also the reason why you had to use the margin-top to position that far right div).
Simple. Take a look at this code:
<div class="wrapper">
<div class='small'></div>
<div class='small'></div>
<div class='small'></div>
<div class='smallR'></div>
</div>
First, I replaced the ordering of the divs (this helps in the long run because it ensures that the first three will be on the first row, assuming you do not exceed the entire width of the container with the first three). Second, I alter the margin-top code, to position the div exactly where I want it, that way it does not touch any of the other divs. Here is the CSS code:
.smallR {
height:20px;
width:65px;
border:solid;
float:right;
margin-right:10px;
margin-top:10px;
}
And just like that, its done :) Now, if nothing made sense, please let me know because I can go further in depth with a few things. Also, I would suggest looking into the Almanac to give you some tricks of the trade :)
I've got a set of divs in my page with some images inside of them. I would like them to be arranged horizontally instead of vertically ie:
X X X X X
X X X X X
Instead of
X
X
X
...
X
I've tried using the float, position:absolute properties but when using them the elements are "unattached" from the normal flow of the document and positioned outwith the content area.
What is the best way to position elements in such a way without altering the normal flow of the document?
Edit:
<div id="content" class="column"><div class="section">
<h6 id="choose">CHOOSE WHAT YOUR PLANB IS</h6>
<div class="region region-content">
<div class="canvas-wrapper">
<div class="canvas-triangle" id="one">
<canvas id="one"></canvas>
</div>
<div class="triangle-caption">One</div>
</div>
<div class="canvas-wrapper">
<div class="canvas-triangle" id="two">
<canvas id="two"></canvas>
</div>
<div class="triangle-caption">Two</div>
</div>
//ANOTHER 8 LIKE THAT
</div>
</div>
That's the code I have that creates the divs with the images in them. What I would like to do is arrange them as indicated above. Let me know if you need any more details.
Thanks
You don't need to use position, just use float:left for the divs you want in a row. Than you can use some element with clear:left under those divs, so the divs will not overlay this element or any other element further in the code...
edit:
To understand it, try this code with and without clear:
#wrap {width: 500px; background:#ffa;}
div.row {float:left; width:150px; height:150px; background:#aff}
div.right {float:right; height:250px;}
div.clear {clear:left; width: 250px; background:#faf}
<div id="wrap">
<div class="row"><p>div</p></div>
<div class="row"><p>div</p></div>
<div class="row"><p>div</p></div>
<div class="row"><p>div</p></div>
<div class="row right"><p>right</p></div>
<div class="clear"><p>clear</p></div>
<p>Lorem ipsum dolor sit...... </p>
</div>
Also notice the difference if you use clear with value left or both in this case.
Get rid of the absolute positioning. You should give us something more to play with if that's not enough help.
EDIT: See this jsfiddle and let me know what's not clear: http://jsfiddle.net/FH7cg/.
I have a web page that shows lots of tabular data and each of these tables needs to be placed on one horizontal line. I have mocked up an example below:
<html>
<style>
.outer{width:300px;height:300px;overflow: scroll;}
.inner{white-space: nowrap;}
.inline{float: left;}
</style>
<body>
<div class="outer">
<div class="inner">
<div class="inline"><table><tr><td>stuff</td></tr></table></div>
<div class="inline"><table><tr><td>stuff</td></tr></table></div>
<div class="inline"><table><tr><td>stuff</td></tr></table></div>
<div class="inline"><table><tr><td>stuff</td></tr></table></div>
<div class="inline"><table><tr><td>stuff</td></tr></table></div>
<div class="inline"><table><tr><td>stuff</td></tr></table></div>
<div class="inline"><table><tr><td>stuff</td></tr></table></div>
<div class="inline"><table><tr><td>stuff</td></tr></table></div>
<div class="inline"><table><tr><td>stuff</td></tr></table></div>
</div>
</div>
</body>
</html>
I am having problems that the inner div wraps the table divs unless I set it to have a large width such as 4000px. Is there a nice way of keeping all of the tables inline even if they exceed the size of the outer div with just css?
Change .inline{float: left;} to .inline{display:inline-block;}
http://jsfiddle.net/QLe5r/
Us this property:
white-space:nowrap;
This is because the float: left on divs "inline". Instead uses display: inline-block, (and display: inline for IE, I think. Check).
Why on EARTH do you have tons of tables inside tons of divs?!? That defeats the purpose of using tables for tabular data...when you are doing tabular data you should just use tables...not apply useless combinations.
Simply use one table and use <td>stuff</td> each time you have more data to add...td's are horizontal based anyway so you wouldn't even have to bother with css to have it extend.