This is probably a very basic question but I can't get this to work.
I want all the divs to pill up to the left until the main div's height is reached and go to the next row.
Using float:left, I get the result on the left (in the picture below)
How can I achieve the result on the right using one general css class that will be applied on each div element?
It looks like you're trying to do something similar to masonry. There are a few ways you can do this. If you're going to have dynamic data I'd recommend using the css columns. There's an option here : http://css-tricks.com/seamless-responsive-photo-grid/
There's also a similar question here with a good jqueury answer : How to Create Grid/Tile View with CSS?
If you do NOT have dynamic data, and it's all going to be static then it's likely better to do absolute positioning for your rows, and offset them as needed. Here's a simple jfiddle example :
http://jsfiddle.net/PhantomDude95/j9GbG/
Related
I am creating a webpage off of this bootstrap model. The problem I am facing, and what I cannot figure out, is why the two companies inside the span10 class do not take up the entire row?
The easiest way to understand this would be to first look at this fiddle. Then, do an inspect element on the company row. Notice that the span10 div is taking up the correct width (its going to the end of the page). However, the two span5 divs inside of that should be taking up the entire width inside the span10. At least, according to my understanding of the bootstrap scaffolding, they should be. (I may be mistaken). In any case, they are not taking up the whole width as I believe they should.
The CSS in the fiddle is copied straight from an uneditted bootstrap file. So the css should not be the problem (with version 3 coming out, I was having trouble pulling from the bootstrap server).
Also, the problem is not (I dont think) having a row within a row, because if you look at the bootstrap example page I provided, that is what they are doing and it is working for them :).
If it is unclear what I am asking, please ask questions and I will reply promptly!
Thanks
Bootstrap uses a 12-column grid layout, so use .span6 if you want two columns to take the whole width of the row. Every new row inside a column will be treated as a full 12-column grid.
But I am not really sure whether the idea is that I put one <div class="container"> around my whole page, or whether I should nest them. I think I see both in various examples.
Anywhere you want a div that is centered with a width of 940px. It is also used in the navbar to position elements. There are no hard and fast rules.
If it was only meant to be used once they would have given it an id instead of a class
I've been trying to figure out the same thing -- I think the idea is that .container is intended to be a fixed width div -- 940px in the default css -- whereas .container-fluid is, well, fluid. At least that's what I've sussed from looking at the css and the (sparse) documentation.
In this fiddle http://jsfiddle.net/dAHqe/2/ I've created examples for the 2 main uses (that I've seen) of border-radius for lists.
Apply border-radius (and therefore background-color) to the container (a div or a ul).
Apply border-radius (and therefore background-color) to the first and last content items (lis or nested divs) via the :first-child and :last-child pseudo-classes.
At first glance, it looks like the first way (applying it to the container) is much more concise, yet I see the second way all the time.
Is there any good reason (i.e., scalability) to use the second way?
Update: This is for a mobile app, so I won't need the :hover pseudo-class.
Personally, in the examples you've given, I'd always just go with the simple option and put it on the container.
However, reasons for doing it the other way:
Maybe you don't have a container, and you can't change the code to add one.
You have some reason to want the flexibility to change individual list items in a way that having a single container wouldn't work. eg Maybe you want to make them semi-opaque on hover?
You have to work around an awkward HTML structure. I had a case like this a while back where I had to add rounded corners to cells in a complex table. The cells in question were sub-heading rows and columns in a bigger table, but the way it all fitted together meant I had to put the rounded corners individually into separate cells. It was fiddly and awkward but ended up looking how they wanted it.
The coder doesn't know CSS all that well and simply cribs it from somewhere else that does it that way.
Those are the only reasons I can think of. But I suspect most cases fall into one or other of those.
Hope that helps.
I was wondering if anyone can assist me on obtaining a look like : http://www.groupon.com/los-angeles/ where they have that price tag overlapping the border. How do I accomplish something like this?
You need to absolute position one on the other.
See Demo Here: http://jsfiddle.net/Zsg8c/
I am designing a website for a client, and I am trying to get two side-by-side DIVs to adjust to 100% of their container. I've got the side-by-side done, but I can't get the right DIV to be the same height as the left one.
You can view the problem here: http://www.campusmomlaundry.com/
The "challenges" and "benefits" DIVs should be side-by-side and the same height, without manually specifying the height. How can I do this?
Your problem is that the outer div is sizing automatically by the inner content, which is sizing automatically by its content.
You have couple of options:
Use the background solution mentioned in the #R0MANARMY answer to create the visual ilusion of two equally tall columns.
Set the height of the two inner divs to be the same exact number (using px or em)
Set the height of the outer div to an exact number.
Play with the display attribute and try couple of different values like table-cell and so on. Keep in mind that this one is not going to work in some older browsers. (Not only IE, but some old Firefox and Chrome releases as well)
Use simple table with one row and two columns.
I realize that the last one is the most controversial of all. Yet it is a possible solution for your problem and there's no reason why you shouldn't at least evaluate.
([groan] please, please, nobody mention the words "semantic HTML"! there's no such thing in our universe.)
There's an article on A List Apart on solving a similar problem, you could probably use that as a reference: Faux Columns.
If it was me. I would solve this problem via javascript. Using jquery you could do...
$(document).ready(function()
{
if($('#leftColumn').height() > $('#rightColumn').height())
{
$('#rightColumn').height($('#leftColumn').height());
}
else
{
$('#leftColumn').height($('#rightColumn').height());
}
});
That should do it. If your like the people I work with, and you don't like using Javascript for CSS problems. Then you are probably flat out of luck. Alot of the time, it is much faster just to use JQuery, then to use the "right way" using css. You could probably spend all day trying to get it to work with different combinations of styles.
Perhaps number of bullet points in the left DIV?
Have you tried: height: auto; or height: 100%;?