I use Bootstrap 3 grid system to create a div based table.
Here is my code on jsbin:
http://jsbin.com/iWoLewu/4/edit?output
As you see the height of product column and other column is different.
Edit: I don't want fixed height also I want link for entire table row except one column. please see above jsbin code first.
Thanks for your attentions.
try to fix height like that
.myCell{height:80px;}
Of course 80px is jsut an example put the value you need/want.
Related
I'm trying to make a 2 columns layout in CSS, with the property display: table;, but there is an image on the top of the second columns, and the content of the columns is limited in height, so the extra-content from the first column goes on the second column.
Here is an illustration of what I'm trying to do:
Here is some text in IMAGE
the first column, and
I want that text to go everything is displayed
on the second column, with the help of CSS.
under the image. And
I know it can be done with display: grid, or display: flex, or even float, but these are not an option... (nor Javascript) :(
I've made several searches but nothing led to the proper result.
Thank you for your help!
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.
I have a row with an image, and then in a new row with some text I would like to go over that image. I am able to do this with negative margins and other spacing, but I need help for when it comes to a responsive page. As I change the browser size, I'm noticing that new row of text moving to other areas higher than the image. Let me know how I would fix that text exactly where Id want on the row above, and keep it responsive. Thanks!
Heres a gist to my code incase its confusing:
HTML
https://gist.github.com/anonymous/5834935
CSS
https://gist.github.com/anonymous/5834943
Just for reference - here is the outcome JSBIN
missing the media query on the jsbin for greater resolutions
Glad I could be of help ^-^
I would like to create a simple fluid layout whereby 4 columns of Equal width, drops to 3 columns of Equal width once the viewport is below a specific width, and then to 2 columns of Equal width at a further specified viewport width. When a column falls away, it should drop to the next line, thus display below the original columns.
Any pointers or a simple fiddle with colored divs on how to achieve this would be most helpful!
Thanks Devin
You can set the column (div) widths with your CSS, but you're going to need javascript to do the part where it switches to 3 or 2 columns when the window is a certain width. CSS alone doesn't have that kind of logic built in.
A general example: http://dabblet.com/gist/2996934
Check out this holy bible sample
If youre willing and able, see how new standards will make progress in css column-count:
http://1plusdesign.com/articles/the-future-of-newspaper-column-style-layout-with-css-3/
Thanks for all the useful pointers given. Here's is an easy fiddle illustrating how it can be acheived: jsfiddle.net/Paulie_D/QFhh9
I found fixed header template and I want to use it in my website, I modified this template and make it in 3 column layout. My problem is the select element over in the fixed header in ie6. I used an iframe to fix this problem but no luck. Originally this template is a single column layout and fixing iframe works fine, but when I modified it in 3 column layout, it doesn't work anymore. If you need to see the code then I will post it.
Any help would greatly appreciated.
Thanks in advance.
here is the link of single column layout which select element under fixed header in ie6
http://webberzsoft.com/clients/csslayouttest/fixheader_center.php
here is the link of three column layout that I was modified which select element became over fixed header in ie6
http://webberzsoft.com/clients/csslayouttest/template_fix_header.php
Do you mean the select element in the first column?
If so your fixed header is getting in the way. I noticed this with the first link you had as well, try to select text on say the first line (you can't).
Try some other layout, like CSS Play or Fixed tables.
Personally I would just make a table, 100% height and width of body # [0, 0].
Then set the header to a certain height, add a single row with 3 columns , space them as need be, and be done. Or if your feeling lazy those links are right there.
Hope this helps