I have some (unknown height) elements that adjust themselves horizontally with float: left;, but if one of those elements is taller, there is a space over the one in the next row. I'd like to move that element to the empty space over it. Here's a picture of the problem:
Is it possible to do this without JavaScript? Either way, how can I do this?
In CSS without JS:
you could have "Fotos" vertically aligned relative to "Contato" with display: inline-block (whitespace is a bit annoying and there's an equivalent for IE6/7 if needed)
you could have blocks of equal heights on each "line" either with faux-columns or CSS table layout (unrelated to unsemantic HTML table layout with table, tr and td elements. Here it's layout with the elements of your choice)
if you want to stack as much blocks as possible, then you'll have to create 2 columns, float them and stuff them with your blocks. This would change their order in your HTML code as they'd be written from top to bottom and then left to right ("Fotos" would come right after "Home" in the HTML code)
Just use javascript! jquery masonry was made for this!
http://masonry.desandro.com/
Related
I have a 3 column layout where I want the left and right columns to be collapsible. I want the following:
A smooth slide
Sidebars that have a percentage width
No visible reflow on the sidebar content
No white-space: nowrap;, as this will mess with the display of the sidebar content.
Allow for complex content inside the sidebar, not just simple text in a <p> tag as in the codepen example below.
No hardcoded pixel widths - I know you can add a width on an inner div together with overflow:hidden on the parent, but I don't want to hardcode a large width.
I need the sidebar widths to be relative to the immediate parent (and not the viewport), in case the 3-column layout needs to be within a section of a page (in fact in my scenario that's the case).
Note that the I've tried transitioning on the width property in this codepen, but you can see the visible reflow of content inside the sidebar. Here's a .gif of it:
Ideally I'd like to do this without using JavaScript for the animation, but I'm open to it if there are no other good solutions.
One way to do this I would say is to give a % based width to your pabel-content.
Add these two properties to the class like this
.panel-content {
min-width: 300px;
}
This should remove the wrapping while animation.
I have a container-fluid container element, and have been using row as opposed to row-fluid, admittedly out of ignorance. Now I am trying to replace the row class with row-fluid class, but have run into some questions. First, I looked at how the row-fluid width is defined in the .less, and it's completely hieroglyphic to me, so would anyone care to explain? More importantly, when I replace row with row-fluid, the height of the element collapses to 0 requiring me to include the .clearfix class in order for the row-fluid element to grow to contain its children columns. Why is this necessary, i.e. what is being floated and why when I replace row with row-fluid?
It depends on what elements you want to know the width of. The row-fluid class itself has a width of 100%. The spans (or columns) have a relative width, set up in such a way that it combines to 100.
On the floating: all columns get floated, this is what makes it fluid. The only height related thing that a row-fluid does is setting min-height: 30px. This makes it by definition strange that anything would collapse to a height of 0.
I'd suspect the styling you've done on top of your old grid is what causes your main problems.
This is what twitter bootstrap says:
Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding.
Well, that is about container not rows, but if that explanation is not enough for you, then this is the short explanation which should make things clear for you.
NOTE: If its version 2, then row-fluid itself is being float: left which would need to be cleared as you say.
This is because Fluid grids utilize nesting differently: each nested level of columns should add up to 12 columns. This is because the fluid grid uses percentages, not pixels, for setting widths.
Hope this helps :)
Bootstrap 2.x to 3.0 class change
Bootstrap 2.x-->.row-fluid and Bootstrap 3.0 -->.row
I am trying to achieve a responsive layout in which there will be two rows, one column and three divs in that column.
Example:
ROW1: (DIV)(DIV)(DIV)
ROW2: (DIV)(DIV)(DIV)
In the first (DIV) there should be a text in <p> tags. Each of the latter (DIV)s have an image centered vertically and horizontally inside them.
When there is no text in the first (DIV) then all (DIV)s work great. The whole layout reacts perfectly to screen size change and there are no problems.
The problem is, when there IS text in the first (DIV) then it is pushed down, breaking the layout.
I have no idea why inserting any text in the first (DIV) causes those problems. Could anybody help me out with this?
Examples: (don't worry about missing images, it doesn't affect this problem)
jsFiddle example (full-screen, here the layout is broken)
jsFiddle example (non-fullscreen, emulating small screen size)
For default the vertical-align for inline-block elements is baseline, when you add some text then the baseline reference is that text.
Try adding another value for vertical-align:
.logoRow > div > div {
vertical-align:top;
}
Check the Fiddle
I have the following grid and each red block is a div. As you can see, the longest div is pushing the bottom two divslower, creating unwanted space.
Here is how I would like to have it, so the space is tighter and not broken by the longest div:
Is there a CSS solution to this, or an alternative to Masonry / Isotope?
There is no way to accomplish what you want using floats. You can however use:
div{
position:absolute;
}
This will achieve what you want because it will allow you to position each box exactly where you want, down to the pixel. Be aware that this will remove each div from the document flow. For that reason and a few others, I recommend constraining the divs within some sort of container that is set to:
position: relative;
This will limit the scope of the absolute positioning.
I will be very appreciative if anyone has a lead how to solve this:
Problem description:
we have Dynamically generated “floating divs” with even witdh but not even heights.(content based) .
the “Parent container” will have diffrent width parameters to allow 2,3,4 (in attached example 2 columns and 3 )divs to fits it’s width.
divs order is left to right, always by hirarchical order 1,2,3 etc...
How can we achieve this without creating gaps? ( casued by traditional floats method).
Number of divs is dynamically created and not limited...
Solution should be ie8,ie9 compatible
thanks, Jonathan. ![enter image description here][1]
example illustration can be found here:
https://app.box.com/s/6y89dlan1jt8bpjvcgb9
Have you considered using something like Masonry?
Pure CSS solution - Cross Browser (IE6+)
Use a column layout instead of floating.
This Working Fiddle demonstrate a 3 column layout, but you can easily change it to N column.
For a N Column Layout, you'll need to create N containers, each of 100/N width, and fill them accordingly.
You just have to build your dynamic content in the right order. (put the dynamic div in the right column each time).
Here's the basic HTML & CSS for the 3 column layout
<div class="Container">
</div>
<div class="Container">
</div>
<div class="Container">
</div>
.Container {
float: left;
width: 31.33%;
margin: 1%;
}
The script in the fiddle is for the sole purpose of adding dynamic content.
and although the content that I had have a fixed height, it will obviously work with changing heights as well.
BTW: for a 2 column layout, you Don't need this. just make the odd item float left, and the even items float right. Like This