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.
Related
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.
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.
I have a table with 4 columns. The first 3 columns should only take up the space they need to display the data / ui control that is placed in them, whereas the fourth column should take up the remaining space. I don't know while creating the table what widths the first three columns should be, so I can't put a "width" value in there.
If I set the fourth column to 100% width, then it squishes the first three columns too much; if there is a drop down list ("select" in html terms) in one of those columns, the last column would then force it to become somewhere around 20 pixels wide, whereas it should be as wide as the option element which has the longest text in that menu.
Other rows in the table will cells that span multiple columns, so I think I'm stuck using the table element (as opposed to divs etc)
Any ideas? IE6 is not supported by the site so whatever works in Firefox / Chrome should be good.
Try putting width:1%; white-space:nowrap; in the first three columns and leave the fourth without width
I have a table with 1 row and 5 columns. I have fixed the width of those 5 columns to certain known values (150px, 200px etc..). I have also set the left-margin for each one.
I want the table to widen and occupy the entire width of its parent. So, I set its width to 100%. When the table is wider than the combined width and margins of the 5 columns, it causes them to spread out across the table leaving gaps in between.
But, I want those 5 columns to stay on the left.
To achieve this, I added a 6th column and set its width to auto, hoping that it will properly push the first 5 to the left and occupy the remaining space. It works in Firefox and Chrome. But it doesn't work in IE. In IE, the 5 columns still space themselves evenly across the table.
I tried setting the width of the 6th column to 100% instead of auto. But the problem is, it is wiping out the left-margins of the 5 columns! Sort of like, the 100% column is pushing the 5 columns too much to the left that their margins have disappeared!
I want the padding, margin and width of the first 5 columns to be maintained, but pushed to the left, yet the table should expand as wide as its parent.
The table has a background image that needs to show up beyond the 5 columns.
Some might suggest that I move the background to the table's parent, but I can't - take my word for it :D
How can I get this to work in Firefox, Chrome and IE?
Thanks.
Here is the link : http://test.greedge.com/table/table.php. Try it in FF and IE
Edit: The solution is simple: Add a to the one td in the table in the last column.
The table cell of the inlying table is not rendered, because it contains nothing. Thus, the last cell also contains nothing, does not get rendered, and the other cells have to split the available space amongst them.
I don't know which browser is doing the right thing here, all IE's (including 8) don't render the column, all other browsers do.
Old answer:
Columns aren't supposed to have margins according to the CSS 2.1 spec:
margin-right, margin-left
Applies to: all elements except elements with table display types other than table-caption, table and inline-table
You will need to use padding within the cells.
An auto column should work in any browser in the scenario you describe (just don't specify any width). Can you post an online example of a table that doesn't work?