I'm having issues with creating equal height columns on the basic Dreamweaver HTML5 3 col fixed layout. I was using jQuery equal height columns to make the column's bg colour be equal on all pages, however due to some scripts I am using on my site and incompatibility with a manual "style:height:xpx" added to the article column I would like to try and use the display:table, display:table-cell method. I have used the basic Dreamweaver 5.5 HTML5 template, and kept everything the same except removed the display:block property for aside, article etc elements. I added a container div around the 3 columns; aside, article and aside.
Everything works fine - as in the background colour continues until the end of the block, which is what I need - except the trouble is, for some reason on the aside columns it leaves a gap at the top of the columns of 13px. I have no idea why this is happening.
I have uploaded the file here: http://www.primecuts.org.uk/test.html . If I remove the <nav> part, the gap is still there, although it doesn't look as "ugly" as the bgcolor difference is not noticeable, I would like there to be no gap between the text starting and the top of the block/bottom of the header. Any help would be appreciated, I don't know what is causing this.
The problem can be fixed by
.sidebar1 { vertical-align:top; }
The gap has something to do with the padding on the .content article, in the sense that removing padding removes the gap, and the padding is influencing the position of sidebar because they are both table cells in the same table row, but I confess that's a bit of a woolly explanation, and I can't actually identify the specific CSS requirement that this relates to.
Related
I'm trying to use the skeleton framework but I'm getting confused. Here is the code I'm trying to use:
http://pastebin.com/ZcEAed0D
I even tried adding alpha and omega to the beginning and end of the columns. But what I am left with looks like this:
http://imgur.com/En3QLA5
You see the sixteenth column is hanging off of the end. Shouldn't it be able to fit 16 columns worth of stuff on one line?
This happens if i try other combinations as like like fourteen and two, etc. It hangs off the end of the page.
Where am I going wrong?
Also are the widths between columns adjustable, and if so how? Any good tutorials on how to use all of skeletons features? Do you do a new line of the grid just by using up another 16 columns?
Thanks.
Since you are adding a 1px border to each column div, it is making each column container 1px wider than it should be. By default, a border expands the width of the container. To fix this, you must add the following CSS property to your "div" selector which will include the border into the container width calculation.
box-sizing: border-box;
More information about box sizing: http://css-tricks.com/box-sizing/
I'm standing at a precipice about to make an important decision that will affect our long term development regarding Bootstrap and I want to be sure I have a good understanding of the reasoning behind their use of Column Padding.
We run a multi-tenant cms system that offers bootstrap as one of the available frameworks from which to build a site, and then our system adds layers of functionality on top of it, so any decision we make affects all tenants.
One of the basic features is when working with a Bootstrap Columns (i.e. col-lg-6), or what we would call a Section, a user can choose to have the content inside Bleed to the edge, or be surrounded by padding.
In bootstrap, columns use padding-left:15px; padding-right:15px; for the horizontal, but padding-top:0; padding-bottom:0; for the vertical.
In our system, we would use padding:15px; all the way around, because users can also set a column/section background colour and/or image, and the logic is that you would want to see colour/image around all sides when not using bleed and vice versa.
I understand that the horizontal margins in bootstrap overlap as a function of the grid system, but padding is cumulative between columns. So my question is: is there a reason why vertical padding is not also set explicitly? What are the potential repercussions of forcing this on our clients?
N.B. Anything can be overridden via a Custom CSS editor, similar to the one in Wordpress, although this capability would obviously be essentially reserved for those "in the know" and not something I would expect a regular user to utilize.
EDIT: The following is a test helper we've created to remove margins from the top of header tags which are the first child of one of our sections (specifics removed for clarity).
section h1:first-child, section h2:first-child, section h3:first-child,
section h4:first-child, section h5:first-child, section h6:first-child
{ margin-top: 0 !important; }
This can also be done for last items as well to remove bottom margins/padding.
If we expand this to cover elements noted below (i.e. forms, p, h1-6, etc.) so the normal spacing persists, would this complicate things further or be adequate to preserve Bootstraps intent while allowing our own features to work?
It's because inside those columns with the default gutter of 30px between columns there's generally forms, ul, ol, p, h1-h6, and other content that have bottom margins, so when it stacks there's vertical spacing, if you were to add bottom or top padding on the column would be quite odd looking when stacked, two paragraphs inside two 50% (col-*-6) columns would have additional padding between the first and second. And nesting columns would be odd and have even more spacing issues. The only time when the vertical stacking wouldn't have space is if you were to stick images in them, but then you can add a custom class to the image to get some bottom margin on the un-floated version.
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 have a %-based grid with a fixed-width (for the moment). The code is based off of this css-tricks article: http://css-tricks.com/dont-overthink-it-grids/
Works great until I have a column that has multiple responsive images in it that are the same size and need to be stacked next to each other (floated). Because of padding issues and what-not, I can not get all three images to come out the same width and height, despite the fact that they start that way. The last one is always taller. Here is a codepen showing the issue: http://codepen.io/joshmath/pen/dEuIv
Any help with this would be really appreciated. I've run into this issue before and always just end up hacking my way through it on a case-by-case basis. Thanks!
For whatever reason, if you remove the padding-right: 0 style from the last element, it fixes the issue.
It looks like you're trying to add spacing between the elements using padding. What I tried instead using the Chrome dev tools was to use a margin instead of padding, and then slightly reducing the width of your elements to around 29.5%. That seemed to work.
just add the following to your css. set the size to whatever you like and all images within your grid will remain that size, if they need to grow / shrink use height/width percents instead.
.grid img
{
width: 350px;
height: 400px;
}
First up, for extreme clarity, here a JS fiddle demonstrating what I'm trying to achieve:
http://jsfiddle.net/bb_matt/VsH7X/
Here's the explanation - my rationale:
I'm creating a responsive site using the 1140 grid framework.
It's a fairly complex layout.
I've created a re-usable simple gallery class which can drop into any defined column size & using media queries, I apply relevant percentage widths to the li elements.
Each of the li elements has a right margin of 5%.
I'm using nth-child(xn+x) in the media queries to remove the right margin at the end of each row.
Everything works well - images resize as the layout resizes, the number of gallery items in a row work as I've defined based on percentages.
The only remaining issue to fix is to clear between rows.
I can't add additional html markup and I want to steer clear of overly complex jquery fixes.
I know of two ways to fix this, but I'm not keen on either of them.
First fix, simply using display: inline-block on the li elements, with a vertical align of top, would flow everything correctly... however, all the percentages get shot and the gallery items no longer neatly fit in the allocated space.
Second fix, give the list items a height. This is the route I will go down if necessary - it will require a different height depending on the resolution - no big deal, but not as neat.
I updated your fiddle here: http://jsfiddle.net/VsH7X/5/
I added a clear: left to the first item in each new row.
ul.gallery li:nth-child(5n+6) {
clear: left;
}
Keep in mind that the :nth-child pseudo class does not work in IE6-8, or FF3 and under.