This is what I have:
and this is what I want:
I have a container div around all of the smaller divs, and the smaller divs are floated left. How can I get them to align in perfect rows like the bottom image? This would be easy but the catch is I don't want to use a container div for each row since I want the number of images per row to be fluid (container width is variable). Is this even possible without JS hacks?
You could just change the float:left to display:inline-block. That will lay the images out in rows, just like text layout, which sounds like what you want to do.
I post this with some apprehension because I don't know what you qualify as a Javascript hack... There is a plug-in that would work well for this, Masonry JS. But if you consider a plug-in a hack then I would suggest applying a display:inline-block; to the elements that you want in a line and removing the float:left; property.
Related
I'm finding a large amount of conflicting information regarding this layout. Some sources say use a table, others use a div.
http://www.bootply.com/mDIcRVOq8J
Basically, a square on both ends and two stacked rectangles between them.
I have most of what I want but I cannot figure out the inner div positioning as noted in Bootply.
What I Have:
What I am trying to achieve:
Solution:
http://www.bootply.com/o3m5A8BKJK
If I'm understanding what you need, add vertical-align:top to the doc-tile-content, remove display: table-row from the .row class, and add display:block to the inner content divs.
While using Twitter Bootstrap, should I nest a row div within a container div and put all my span divs within the nested row? Is that the best practice?
What if I put span divs directly within my row div and do not enclose the row div within a container div?
What if I put span divs directly within my container div, without using the row div at all?
All I know is that a container is 940px and a row is 960px. However, I have seen examples where a row div has been put within a container div. Is that going to help or will it make the display messy?
Please explain me the best methods to follow and under what circumstances.
In general you would use container > row > span
I can't think of an example where the the other 2 options you ask about would break anything, but they may not give you the results you want.
Wrapping everything in the conatiner div will manage the width of the page and side padding. Using the row div will ensure that your spans are layed out the way you want. For example imagine 2 rows that each have just have a single span4. If you don't use the row div the 2 span4s will float one next to the other instead of being stacked vertically.
There are many cases where you will have nested containers in a Bootstrap layout, the first one you will likely come across is in the nav bar, and once you start using fluid Bootstrap layouts you will see that container divs are not always 940px, but if you stick to the container > row > span arrangement it will save you some grief, especially if you are just starting.
Good luck!
You should have row inside a container, since using the container will ensure that the container is evenly centered across the entire page with even margins since container has margin-left:auto;margin-right:auto; in the CSS.
Use row when you want spanX's to appear on the same line.
spanX's that are not inside row will wrap.
Here's a demo that will show you the differences
A row is designed to go inside of a container.
A span is designed to go inside of a row.
Rendering could get unpredictable if you go with any other combination besides container > row > span .
Ultimately if your code works, then you're doing okay. There is no reason to get locked into what other people have done. BUT if you change it up, make sure it's for a good reason, and that you comment the code everywhere to explain your thought process.
I have elements structured roughly like this: http://jsfiddle.net/zyySd/
Is there any way to achieve this: http://jsfiddle.net/zyySd/1/
without resorting to taking the elements out of the document's flow and hardcoding absolute positioning values? In the case that I don't know what the dimensions of the divs are, I would not be able to use absolute position as I did in the second JSFiddle.
CSS can't really do it. You need JavaScript.
jQuery Masonry is good: http://masonry.desandro.com/
There's also a no-framework version, Vanilla Masonry: http://vanilla-masonry.desandro.com/
How can I put the height of side by side DIVs?
When I change the width of browser, sometimes the left div get higher or shorter than the left.
I want that automatically the left or the right div grows up to became with the same height of the other one.
Setting a display table-row is the best solution for this?
Take a look at the image of the page I want to develop.
http://i.imgur.com/BhvV2.png
I solved the problem using display=table-row, table and table-cell. I've added one div to be the table.
Now it is perfect! Take a look.
http://jsfiddle.net/tcWCC/47/
Here's a solution, also found on SO
http://jsfiddle.net/kaAjW/
Here is the link to original post
How do I keep two divs that are side by side the same height?
The technique is called Faux Columns and here is an article about it
http://www.alistapart.com/articles/fauxcolumns/
I solved the problem using display=table-row, table and table-cell. I've added one div to be the table. Now it is perfect! Take a look.
http://jsfiddle.net/tcWCC/47/
If what you are trying yo do is to place the content in a grey box with rounded conrners then your divs don't need to be of the same height. Just move the background-color and border-radius to the enclosing div: http://jsfiddle.net/tcWCC/41/
I think you won't be able to do that without using a html table.
I am trying to do something similar to float:left. For float:left, if you set a bunch of divs with this style property, it will position itself according to the width of window. When the window gets too narrow, it will become one column, and when we have large window, it will expand to multiple columns and so forth.
I want to do something similar but I want it to work like a vertical float. So if I have 5 items and the browser's window height can only contain 4 in one column, the extra div should position itself to the 2nd column. In simple terms, if I have a long list of divs, they should be listed in columns depending on the height of window.
Is there a way to do this with div and css or jquery ui?
This isn't possible with CSS alone. Your best bet is something like masonry:
http://masonry.desandro.com/
(or for snazzy filtering and stuffs isotope, which is powered by masonry: http://isotope.metafizzy.co/)
Hope that helps :)