I have in my layout a container that has 3 columns and should have many elements.
If all elements have the same height it looks very nice, but if one of them has a different height it will move the entire row instead of just one column.
This is how it looks:
This is how it should look:
How can I do that with bootstrap (v3)?
This is my html
To achive that, if you don't want to have a fixed height in elements, I think you should follow a column based strategy instead of row based one because your cols do not have an equal height, so when floating the break the flux you actually want.
But if you want it to exactly have it like in your design, I suggest using JavaScript.
Related
How can I create columns like on attached image? I don't know how to set space between all columns. Please any hint.
You could add a margin to you columns. To have 4 columns, you'd start with a div with the class="row" then inside of that a div with the class=col-md-3 (or whichever size you want the 4 columns across), and give that div a margin-right of however many px's you want. Your final column (the 4th one in the row) probably should not have the margin-right if your design has the columns centered on the page. Bootstrap automatically gives columns 15px on either side. If you need to look up more information about how it works, the space between columns is called the "gutter" so you could search "gutter width" for example to find different ways of working with it.
how to make 3 column layout where:
left column is fixed width
middle column is auto width (not fixed)
right column is fixed width
and all columns height are equal (but exact height is unknown)
Example:
I know i can do it by using tables, or display:table-cell, but is it possible to do it wihout using tables? I would go for table-cell but it doesn't work with older ios/android mobile devices and older browsers.
Is there some css hack available to do it without table-cell ?
Edit: In this particual case I just want to set full height color background (left: color #A, middle: color #B, right: color #C)
Edit2: I feel like 1999 table layout poltergeist/ghost is laughing in front of my face
Edit3: no js please
Have you tried using a separate <div> to draw desired backgrounds? Here, I've created an example http://plnkr.co/edit/WOaF3SZ9N8sswsxbZ116?p=preview
Take a look at my fiddle:
http://jsfiddle.net/RB9JZ/1/
I've had to use javascript to make the columns the same height:
$(".col").setMinHeight(3);
In the setMinHeight(3), 3 = number of columns, and give each column a class of col or whatever class you'd like.
This is an interesting question. Since Rich already figured out the columns, I'm going to address the issue of getting all the columns "the same height". Like you said, this is very difficult to do without table behavior. What I've always done is use background images on a div that wraps all columns. This div stretches to the height of the tallest column automatically, and if you have a repeating background, it will give the illusion of matched columns. Since you have a special case of 3 columns with a fluid width in the middle, you will probably need two divs to wrap the 3 columns, and have two background images. One aligns left, and one aligns right. Let me know if that doesn't make sense.
maybe this variant:
display:block;
height:100px;
I need to make a page which makes use of the 960 grid system which has a multi-row column. What I mean is I have three columns in a 16 column separated into 3-10-3 but on the last column, I need to make several divs for news feed, ads and also a "follow us on..." box which will all be aligned vertically. Refer to the picture for a visual pov.
Is there a way to this on 960gs? It seems like I can just pile divs of equal width in the column but I don't know. Help please
I've got it, turns out instead of using more divs with 'grid_x' classes within a grid column, you can just use normal divs with no classes and it will automatically align to the parent div.
How do I create a fit/fluid/fit column layout with CSS? By fit I mean the column width is that of the content in it. I do not want to set a pixel or percentage width for the outer columns, I want them to be the width of the content within them. I've resorted to using tables for the time being but it feels very wrong. Any suggestions?
Found a CSS only solution. Just tried it, works great.
http://www.thecssninja.com/xhtml/sangraal-layout
At first glance it seems like a 'fixed'-'fluid'-'fixed' layout, but you'll find if you remove the fixed widths on the right and left column that the columns 'fit' to the text you provide, and the center remains fluid without the center column or the container needing to know anything about the widths of the left and right columns.
Truly the Sangraal.
http://jsfiddle.net/Mutant_Tractor/bDdq9/1/
Not using table, but maybe you can have a look there http://www.alistapart.com/d/holygrail/example_4.html that seems to be very similar of what you need.
I want to switch between vertical and horizontal table layout for same data.
Although it is possible to do it by making applying the same CSS for the first column for the vertical layout as the css applied for the header row for the Horizontal layout.
Is there is any way where we can make the webpage render the way we like it (Horizontal/Vertical) .
P.S. I could not add any Images. Apologies for that.
Are you saying you want to switch rows and columns effectively?
You can't do that with tables because A). rows and columns have specific semantics and B). the way this is structured in HTML markup groups cells in row sets, not in table sets with indices you could apply a matrix to. Obviously JS can do it if you really must.
If you have single row of cells you could arrange a similar effect with floating <div> tags with a container <div> which changes width (amongst other methods)