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.
Related
I can't ever seem to get this to work, I have a simple bootstrap page with an image gallery that has images of different heights. I am trying to use the nth-child to clear the left side after every fourth .col-md-3
Bootply smippet - http://www.bootply.com/7BhYr6J8rH
The content of the finished page is going to be dynamically populated from a database, so I need this flexibility to work. Can anybody point out where I'm going wrong?
Hard to explain but you are using nth-child on the image. Because there is no image list it will never reach a 4th image, each column has 1 image and no more. However, a row does contain a list of columns so I edited your code to clear by column like so http://www.bootply.com/7BhYr6J8rH:
.row .col-md-3:nth-child(5n) {
clear:left;
}
Another idea, what you could do is add <div class="clearfix"></div> after each fourth column for the same result and cleaner code.
This is probably a very basic question but I can't get this to work.
I want all the divs to pill up to the left until the main div's height is reached and go to the next row.
Using float:left, I get the result on the left (in the picture below)
How can I achieve the result on the right using one general css class that will be applied on each div element?
It looks like you're trying to do something similar to masonry. There are a few ways you can do this. If you're going to have dynamic data I'd recommend using the css columns. There's an option here : http://css-tricks.com/seamless-responsive-photo-grid/
There's also a similar question here with a good jqueury answer : How to Create Grid/Tile View with CSS?
If you do NOT have dynamic data, and it's all going to be static then it's likely better to do absolute positioning for your rows, and offset them as needed. Here's a simple jfiddle example :
http://jsfiddle.net/PhantomDude95/j9GbG/
We are trying to create a menu style layout. I'm using a css-columns properties to achieve the effect of columns. The content is variable, so we'd like to stick to this solution because we want the browser to organise the content for best fit.
In the example below we are seeing some odd behaviour in Chrome (Version 32.0.1700.77) and some different (but equally odd) issue in Firefox (Version 24.0) so I'm assuming it's our implementation.
In Chrome, we see a large gap underneath the first column as if it's placing the 3rd LI there to start off with, then moving it to the top of the second column at some point in the render process.
In Firefox, we see the H3 "scrambled egg" being left at the bottom of the first column, when the rest of the 3rd LI's content moved to the top of the second column.
Live Example: http://codepen.io/daviddarnes/pen/BeEIp
Speculations:
- We are using "break-inside: avoid;" on every element inside the OL. This could be causing the issue, but we can't seem to rectify it.
- Based on the H3 issue... might be something to do with that? Or the elements near to this H3 tag.
The point of the page-break properties is not to shrink content to fit on a page, but to help decide the optimal place for a page break to occur.
So, if you use 'page-break-inside:avoid' on an element, and there's not enough space on the current page to fit the entire element, the browser will consider inserting a break so as to force the element onto a new page, theoretically giving it more space.
However, if the element is so big that moving it onto a new page won't help, then there's nothing to be done (in terms of page breaks at least).
If you know in advance that your content will need to be shrunk when printing, you could try adding a scale transform on the problem elements (restricted to the print media type), so that they're a more manageable size.
Is this of any help to you?
I've been trying to figure out the best solution for displaying a list of projects using Singularity.
I want to essentially remove the padding of the last item of each row but add that padding back into the overall project width of all projects.
I think the solution will have more to do with css than singularity but maybe there is a good solution within singularity I am missing?
These projects will eventually be regularly added by a cms.
example: http://sassmeister.com/gist/7916151
Okay, there's a number of things you should consider.
Firstly, Singularity and Breakpoint are not yet compatible with Sass 3.3, whereas Sassmeister.com is already using Sass 3.3. Make sure you're using Sass 3.2.x in your project. To demonstrate Sass+HTML, consider using SassBin.com.
Secondly, you're using 12px gutters. This is incorrect. Gutters are specified as a unitless value, relative to a single column unit. So when you have two columns and 12px gutters you actually tell Singularity to make gutters 12 times larger than columns.
Instead, provide relative gutters like this: $gutters: 0.1.
Thirdly, you specify a 4-column grid for the medium size but you only use them as a two-column grid. If you don't use four columns somewhere in your project, i suggest that you omit that 4-column definition and keep using the 2-columns grid.
Fourthly, you're setting an outline on your container but it never displays properly because the container has zero height. It has zero height because all its contents is floated.
To have the container embrace the floated content, you have to apply a clearfix to the container. Google it up. The simpliest way to apply a clearfix is to use the pie-clearfix mixin that comes with Compass. But i suggest that you use the %clearfix-micro extend that comes with Toolkit.
Fifthly (is there even such a word?), to remove the gap on the right, you have to apply a last float-span to the last item in every row. To do that properly, you have to learn how the nth-child works. I highly recommend that you google it up.
In short, nth-child accepts an argument that looks like An+B where A and B are whole numbers. The A should be equal to the number of columns and B is the number of the column you're addressing. As you're addressing the last column, B is equal to A in your case. So the whole thing looks like nth-child(3n+3) for example.
Sixthly, you're applying Singularity spans for different breakpoints in such a manner that they accumulate. This is okay when you override spans to all your items at once, so that all of them become redefined in each media query.
But when you apply styles selectively (to the last item in each row), you'd have to cancel them too. This is a very cheerless thing to do.
Instead, you should narrow down your media queries so that they address only specific slices between two breakpoints. In this case, spanning styles will not accumulate.
Here's how you code would look if you used all my recommendations: http://sassbin.com/gist/7951326/
Seventhly (my tongue hurts), consider using the Breakpoint Slicer extension, a tiny wrapper for Breakpoint that makes slicing breakpoint ranges very quick and effortless.
Here's how your code could look if you used Breakpoint Slicer: http://sassbin.com/gist/7951724/
Eighthly, if you did want fixed gutters, you should've set the $gutter-styles: 'fixed' option.
Of course you could do something like this:
&:nth-child(3n) {
margin-right: 0;
}
On the Singularity wiki, it seems to indicate that this should work:
&:nth-child(3n) {
#include float-span(2, 'last');
}
But it didn't or I didn't understand its function.
Thanks for the extensive answer.
I'm well aware of the nth-child selector. I went down that road but decide it wasn't a clean solution for me.
I know I didn't clear the float...wasn't really part of my question.
Setting a fixed height of 12px is not incorrect based on the documentation: https://github.com/Team-Sass/Singularity/wiki/Creating-Grids#fixed-gutters
I need fixed gutters. That's the whole crux of the problem here.
I started making my own fixed gutter fluid column solution that I'm liking thus far: http://codepen.io/joshuarule/pen/zsfEo
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