I'm currently working on a CSS three column layout (http://jsfiddle.net/methuselah/rCtGd/) and I wanted to ask several questions:
1) For some strange reason there seems to be a 10px gap between the header, content-1, content 2-1, content-2-2. This cannot be seen in jsfiddle but if you load up the code in any browser it is noticeable. How do I get rid of it?
2) I would like to figure out a way of clearly defining a fluid column height. Is this possible? Ideally I would like all the divs header, content-1, content 2-1, content-2-2, footer to stretch in order to accommodate the page.
Thanks in advance.
Answers for your valid questions! :P
10px gap is not found on the jsFiddle because, they use CSS Reset. The goal of a reset stylesheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on.
For getting a good idea about CSS Fluid Layouts, please refer the links below:
The Perfect Fluid Width Layout
2 And 3 Column Fluid CSS Layouts
Do you have any clarifications still? Let me know in the comments! :)
Related
Now I know there are similar questions posted, but I'm looking for a solution for pixel perfection.
Sandbox: http://jsfiddle.net/unqc4a0f/1/
Problem trying to solve:
Attempted code:
.mi{float:left; width:150px;height:200px;padding-right:10px;/*margin-top:3px;*/}
.mt{float:left; width:400px;margin:0;}
In the past I've used the padding/margin hacks to push the image or the text objects down a few pixels to make them visually align at the top edge. And by visually I mean that I know that the fonts have a size and line height, but even taking that into account, the height of the actual font characters may include some space. This you can see in my example above. I've also —based on other threads here —tried using line-height, and although that did achieve pixel perfect alignment, it mangled the the vertical line spacing of the entire paragraph.
My question essentially is whether to continue using the padding/margin hacks or is there a more 'legit' solution. I ask this in regards to building layouts that are responsive and then having no issues with uniform layouts.
Thanks in advance.
Realize it's an old question but...
In CSS one can use a ::before element add a negative margin-top value to it.
Specifically, I wanted to share this Interactive Text-Crop tool I found that helps create a SASS mixin for this purpose.
The gist in this tool is that you remove the capital height from the (font-size * line-height) and then divide by two. But that is a simplification of how your font may or may not be structured.
In reality - There is no "pixel-perfect" answer because when it comes down to it, the physical structure of fonts doesn't always match their font-size and different font-families at the same font-sizes can still look taller or shorter.
Instead of float use a display:table; layout for a perfect inline placement and vertical alignment.
It only requires that you wrap them within an element...
Updated JSFiddle
.wrapper {
display: table;
}
.mi{width:200px;height:200px;display: table-cell;}
.mt{display: table-cell;vertical-align:middle;}
<div class="wrapper">
<img src="http://www.thehollywoodnews.com/wp-content/uploads/2839335-morgan_freeman_wallpaper_4_normal.jpg" class="mi">
<p class="mt">Join me in San Diego at the Global Event for Data-Driven Engagement Marketers. DMA is doing great work to protect marketers around the world, come and hear from leading marketers how DMA is enabling them to NOT MARKET ALONE</p>
</div>
The space is supposed to be there it normally comes from line height which is something you need. If you font size is 14px and you reduce the linee-height to 11px you see the gap will vanish from the top, but the text will look very cramped..
Sometimes to get pixel perfect you have to just tweak like you have with the margin on the image..
I have been trying this problem for quite a while but I haven't found a solution yet.
I have build this site with Bootstrap including two containers. Something is going wrong for the last row in the last container (it has #bottombar). For some reason it is aligned on top of the parent row. Any help would be appreciated!
http://www.dutchcorporatebusinesssolutions.com/Tax-and-Financial
In your stylesheet you have the tablecontent class, which sets the height of tablecontent to 150px. That will make the bottombar appear 150px below the title. Remove the
height: 150px;
from your .tablecontent CSS class and you should be fine.
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;
}
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.
I've a fixed width 3 columns css layout working good when vertical scrollbar is hidden, but it will break as soon as vertical scrollbar shows up.
I've 2 questions,
Can I deal with the scrollbar as an css element defining z-index to make it in top of right div?
Since I think the answer to my first question is "No, you can't do that", I ask What can I do to avoid this?
example here:
http://www.mataborrao.eu/teste.html
1 - No
2 - One simple option is to always display the scrollbar. Check out this answer: Making the main scrollbar always visible
You're correct on answering your first question; As far as I know, you can't attach styles to the scrollbar. Your second question is somewhat broad, as many browsers out there will deal with scrollbars differently.
For example, depending on your OS/browser, the content on your page will shift to make room for the bar, while other browsers (for instance FF on Windows, I believe), will keep the content where it would be if there wasn't a scrollbar present (this prevents shifting if more content appends/flows vertically).
Alternatively, you could try to force the bar to always be there... this would work in most cases:
html {
overflow: -moz-scrollbars-vertical;
overflow-y: scroll;
}
Hope this kinda helps?!
Would this solution work for you? One of the columns is fluid but perhaps it will help: http://matthewjamestaylor.com/blog/ultimate-3-column-holy-grail-pixels.htm
The solution is there for a layout that looks like this:
It's trivial to exit the pixel values but take note of the "nested div structure". To convert this to a fixed layout you can look at http://matthewjamestaylor.com/blog/how-to-convert-a-liquid-layout-to-fixed-width - I'm not sure that it will work though - you may run into the same problem. I suggested the liquid layout because it will dynamically resize for you when the scrollbar is there...