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 often have an image that I wrap text around, and sometimes the texts wraps awkwardly, like so:
In the HTML, the image is floated to the left and the text simply follows:
<p><img style="float:left;" src="/images/[image]" /></p>
<p>This is my David Copperfield, <em>I was born</em> kind of bio. For a more concise one, please see the press kit.</p>
...
This mostly works, except when the text length just happens to run past the bottom of the image and flow back to the left margin, and when the amount of text isn't long enough to fill more than one line (in this case, it's only one word). When that happens, it looks really bad.
So, is there a way to control the text flow so that this doesn't happen?
What you could do is add overflow: hidden to the p tags where there is text. This will make it so any text that wraps after the image will be in line with the larger part. Now when you have large paragraphs this may look funny, however if your paragraphs are all fairly short this should help.
Example: http://jsfiddle.net/8ZsKy/2/
alternately you could just add a class rule and apply it to potential "problem" paragraphs.
p.wrap-inline {
overflow:hidden;
}
EDIT: updated jsfiddle (oops)
This question actually had me thinking although it is actually annoying sometimes, In the past i have fixed similar problems to this by adjusting the line height a little,
line-height:20px;
or adjusting the actual size of the image a little bigger or smaller,
<img style="float:left;" src="/images/[image]" width="100" height="200" />
or alter the tracking of the text
letter-spacing: 0.1em;
or use hyphenation (I don't like it or recommend it)
hyphens: auto;
However as far as my knowledge goes i do not know of any css rules to eliminate text orphans. There might be scripts but i have never heard of it and have doen a bit of research on it a while back. Hope it helped :)
This is how floating works. If you don’t want that, don’t use float; you can e.g. use positioning instead, so that the text appears as a block on the right of the image.
There’s unfortunately no way to use floating and request e.g. that the last line should not be short. You can prevent the very last word from appearing on a line of its own by using a no-break space between it and the preceding word, e.g. it will. And you could extend this to a group of short words. But this would just mean that the group appears on a line of its own and the preceding line is correspondingly shorter (and may therefore look odd).
If the text is just a little too long, you could modify its rendering to take less space vertically e.g. by removing empty lines between paragraphs, though this would be a major layout change (though perhaps a good one):
p { margin: 0 }
p + p { text-indent: 1.3em; }
<img style="float:left; clear="both" src="/images/[image]" />
I'm trying to build a 2 column layout with a consistent vertical rhythm (aligned baselines). The calculations for this are pretty straightforward, and I have them working fine. My question is this:
When two columns of text sit side by side, is it possible to have vertical rhythm maintained (or regained) when the vertical-margins in the columns are not 'whole lines'.
In this example: http://jsfiddle.net/beejamin/PMCXt/ I have an unordered list, where both the list, and the list items have 'half a line' of margin-bottom. When there are an even number of list items, the margins add up to a whole line, and the rhythm is kept (that's good!). When there are an odd number though, the baselines are thrown out, and can't ever join up again (unless I get lucky and another odd-numbered list comes along).
Setting whole-line margins on list items is too much (especially with a long list), and setting no margin is not enough.
Is there any way I can avoid/mitigate this? I won't know the number of lines in advance, and I don't want to use javascript for this (I'm trying to build a generic scheme that I can re-use).
OK, so here's a pure CSS solution. It relies on :nth-child and :last-child selectors, so only browsers that support those selectors will do it. That's good enough for me, seeing as it's really just a nice piece of polish. It would be easy enough to apply for older browsers with some javascript, too.
Here's the working example: http://jsfiddle.net/beejamin/DpSzW/
The key is this selector:
li:nth-child(odd):last-child { margin-bottom: 1.6em /* One full line */}
This adds a full line's margin to the last-child of a list, whenever the last-child is also an odd-numbered child. The full line margin replaces the half-line the item would normally have, and so the vertical rhythm is restored. Basically, it makes any list always take up an whole number of lines.
When a list has an even number of items, the selector does nothing, and everything stays nice.
Not 100% sure, as I didn't test in all conditions, but this seems to work.
Keep the line-height the same.
keep the margins the same as the line-height.
keep the font-size the same.
Example: http://jsfiddle.net/jasongennaro/PMCXt/1/
I have a list of items that I am displaying in a floated list, with each item in the list at a fixed width so that there's two per row. What is the best practice to prevent this horrible thing from happening:
alt text http://x01.co.uk/floated_items.gif
Possibilites:
Trim to a specified number of characters before displaying the data. Requires guesswork on how many characters will be "safe".
Overflow: hidden. Hacky.
Remove the background and just have a top border on each item.
Possible but silly:
Have a scrollbar in each item by doing overflow: auto, this will look horrendous.
Add a background image to the container. It's not guaranteed that there's always an equal number of items so this option is out.
Any help on this irritating issue appreciated!
Are you using a fixed font size, i.e. specified in px? If not you also need to consider the various text size options of each browser which is probably going to make the concept of trimming the string redundant. If it is fixed then perhaps seeing how many Ws you can fit in and restricting your text to that -3 and appending an ellipsis, not sure what this list is for so that's one approach.
Personally I'd probably use overflow:hidden as that covers all eventualities and ensures that it'll always keep your layout consistent.
I guess the last option would be to keep a tight control over what can be added to the list and prevent the problem occuring in the first place. Prevention better than cure as they say, although probably unhelpfully.
There are scripts that help with this by comparing the li in blocks of two and making them both equal to the tallest.
Usually, rather than thinking what's best from a css point of view though, you should consider what presentation you want, then get the css/JavaScript to get you to your desired effect.
If this is something that you're just wanting out of the way, consider using a gradient background image that highlights the top of the li and suggests the block without actually filling it in.
Adding link to a jQuery solution: Equalize
One solution would be to have a alpha-based PNG that would slowly fade the text to the backgroundcolor of your container, on the last 10px or so. That would look good if some text are considerebly shorter than the long ones, however in the case where the text would be equal to the container it could look kinda silly.
Of course, in combination with display: hidden and white-space: no-wrap
From an accessibility point of view it's not a good idea to simply hide the title, since that could hide content on people who increase font sizes due to bad eyesight. Your design should be able to float when hit by bad resolutions or similar obstructions, even if it floats into something less pleasing to the eye.
Now if I understand your issue with the background image correctly, I believe your problem could be solved using the techniques describes in the ALA article on sliding doors, where the background image expands with the content.
Here's some controversy for you.. use a table?
Sounds like you have a grid of data to me, would a table answer this problem for you?
It also raises the question, do you actually want the items to be the same height, or just have the same amount of black background behind them? You could apply the black to the row's background, then create the centre white separator with borders and margins.
You could try using:
ul li{
display:block;
float:left;
width:6em;
height:4em;
background-color:black;
color:white;
margin-right:1em;
}
ul{
height:100%;
overflow:hidden;
}
div{
height:3em;
overflow:hidden;
background-color:blue;
}
Don't know about cross browser consistensy though.
EDIT: This is the html I'm assuming:
<div>
<ul>
<li>asdf
<li>asdf trey tyeu ereyuioquoi
<li>fdas dasf erqwt ytwere r
<li>dfsaklñd s jfañlsdjf ñkljdk ñlfas
<li>ksdflñajñldsafjñlksdjfñalksdfjlkdhfc,v.mxzn
</ul>
</div>
I want to display data like the following:
Title Subject Summary Date
So my HTML looks like:
<div class="title"></div>
<div class="subject"></div>
<div class="summary"></div>
<div class="date"></div>
The problem is, all the text doesn't appear on a single line. I tried adding display="block" but that doesn't seem to work.
What am I doing wrong here?
Important: In this instance I dont want to use a table element but stick with div tags.
It looks like you're wanting to display a table, right? So go ahead and use the <table> tag.
I would use the following markup:
<table>
<tr>
<th>Title</th>
<th>Subject</th>
<th>Summary</th>
<th>Date</th>
</tr>
<!-- Data rows -->
</table>
One other thing to keep in mind with all of these div and list based layouts, even the ones that specify fixed widths, is that if you have a bit of text that is wider than the width (say, a url), the layout will break. The nice thing about tables for tabular data is that they actually have the notion of a column, which no other html construct has.
Even if this site has some things, like the front page, that are implemented with divs, I would argue that tabular data (such as votes, responses, title, etc) SHOULD be in a table. People that push divs tend to do it for semantic markup. You are pursuing the opposite of this.
I don't mean to sound patronizing; if I do, I've misunderstood you and I'm sorry.
Most people frown upon tables because people use them for the wrong reason. Often, people use huge tables to position things in their website. This is what divs should be used for. Not tables!
However, if you want to display tabular data, such as a list of football teams, wins, losses, and ties, you should most definitely use tables. It's almost unheard of (although not impossible) to use divs for this.
Just remember, if it's for displaying data, you can definitely use a table!
If there's a legitimate reason to not use a table then you could give each div a width and then float it. i.e.
div.title {
width: 150 px;
float: left;
}
Is there a reason to not use tables? If you're displaying tabular data, it's best to use tables - that's what they're designed for.
To answer your question, the best way is probably to assign a fixed width to each element, and set float:left. You'll need to have either a dummy element at the end that has clear:both, or you'll have to put clear:both on the first element in each row. This method is still not fool-proof, if the contents of one cell forces the div to be wider, it will not resize the whole column, only that cell. You maybe can avoid the resizing by using overflow:auto or overflow:hidden, but this won't work like regular tables at all.
or indeed this, which is very literally using tables for tabular data:
https://stackoverflow.com/badges
Just to illustrate the remarks of the previous answers urging you to use table instead of div for tabular data:
CSS Table gallery is a great way to display beautiful tables in many many different visual styles.
Sorry, but, I'm going to tell you to use tables. Because this is tabular data.
Perhaps you could tell us why you don't want to use tables?
It appears to me, and I'm sure to a lot of other people, that you're confused about the "don't use tables" idea. It's not "don't use tables", it's "don't use tables to do page layout".
What you're doing here is laying out tabular data, so of course it should be in a table.
In case you're unclear about the idea "tabular data", I define it like this: bits of data whose meaning isn't clear from the data alone, it has to be determined by looking at a header.
Say you have a train or bus timetable. It will be a huge block of times. What does any particular time mean? You can't tell from looking at the time itself, but refer to the row or column headings and you'll see it's the time it departs from a certain station.
You've got strings of text. Are they the title, the summary, or the date? People will tell that from checking the column headings. So it's a table.
The CSS property float is what you're looking for, if you want to stack div's horizontally.
Here's a good tutorial on floats: http://css.maxdesign.com.au/floatutorial/
display:block garauntees that the elements will not appear on the same line. Floating for layout is abuse just like tables for layout is abuse (but for the time being, it's necessary abuse). The only way to garauntee that they all appear on the same line is to use a table tag. That, or display:inline, and use only (Non-Breaking Space) between your elements and words, instead of a normal space. The will help you prevent word wrapping.
But yea, if there's not a legitimate reason for avoiding tables, use tables for tabular data. That's what they're for.
In the age of CSS frameworks, I really don't see a point of drifting away from table tag completely. While it is now possible to do display: table-* for whatever element you like, but table is still a preferred tag to format data in tabular form (not forgetting it is more semantically correct). Just pick one of the popular CSS framework to make tabular data looks nice instead of hacking the presentation of <div> tags to achieve whatever it is not designed to do.
display: block
will certainly not work, try
display: inline
or float everything to the left then position them accordingly
but if you have tabular data, then it is the best to markup in <table> tag
some reference: from sitepoint
You'll need to make sure that all your "cells" float either left or right (depending on their internal ordering), and they also need a fix width.
Also, make sure that their "row" has a fixed width which is equal to the sum of the cell widths + margin + padding.
Lastly make sure there is a fixed width on the "table" level div, which is the sum of the row width + margin + padding.
But if you want to show tabular data you really should use a table, some browsers (more common with previous generation) handle floats, padding and margin differently (remember the famous IE 6 bug which doubled the margin?).
There's been plenty of other questions on here about when to use and when not to use tables which may help explain when and where to uses divs and tables.
Using this code :
<div class="title">MyTitle</div><div class="subject">MySubject</div><div class="Summary">MySummary</div>
You have 2 solutions (adapt css selectors to you case):
1 - Use inline blocks
div
{
display: inline;
}
This will result in putting the blocks on the same line but remove the control you can have over their sizes.
2 - Use float
div
{
width: 15%; /* size of each column : adapt */
float: left; /* this make the block float at the left of the next one */
}
div.last_element /* last_element must be a class of the last div of your line */
{
clear: right; /* prevent your the next line to jump on the previous one */
}
The float property is very useful for CSS positioning : http://www.w3schools.com/css/pr_class_float.asp
The reason the questions page on stack overflow can use DIVs is because the vote/answers counter is a fixed width.
Tabular data can also be represented as nested lists - i.e. lists of lists:
<ul>
<li>
heading 1
<ul>
<li>row 1 data</li>
<li>row 2 data</li>
<ul>
</li>
<li>
heading 2
<ul>
<li>row 1 data</li>
<li>row 2 data</li>
<ul>
</li>
</ul>
Which you can layout like a table and is also semantically correct(ish).
For the text to appear on a single line you would have to use display="inline"
Moreover, you should really use lists to achieve this effect
<ul class="headers">
<li>Title</li>
<li>Subject</li>
<li>Summary</li>
<li>Date</li>
</ul>
The style would look like this:
.headers{padding:0; margin:0}
.headers li{display:inline; padding:0 10px} /The padding would control the space on the sides of the text in the header/
I asked a similar question a while ago Calendar in HTML and everyone told me to use tables too. If you have made an igoogle home page, just yoink their code.
I made a system of columns and sections within the columns for a page. Notice with google you can't have an infinite number of columns and that offends our sensibilities as object people. Here's some of my findings:
You need to know the width of the columns
You need to know the number of columns
You need to know the width of the space the columns inhabit.
You need to ensure whitespace doesn't overflow
I made a calendar with DIV tags because it is impossible to get XSL to validate without hard coding a maximum number of weeks in the month, which is very offensive.
The biggest problem is every box has to be the same height, if you want any information to be associated with a field in your table with div tags you're going to have to make sure the whitespace:scroll or whitespace:hidden is in your CSS.
Preface: I'm a little confused by the responses so far, as doing columns using DIVs and CSS is pretty well documented, but it doesn't look like any of the responses so far covered the way it's normally done. What you need is four separate DIVS, each one with a greater "left:" attribute. You add your data for each column into the corresponding DIV (column).
Here's a website that should help you. They have many examples of doing columns with CSS/DIV tags:
http://www.dynamicdrive.com/style/layouts/
All you have to do is extrapolate from their 2-column examples to your 4-column needs.
You should use spans with:
display:inline-block
This will allow you to set a width for each of elements while still keeping them on the same line.
See here, specifically this section.
Now, to appease the downvoters - of course tabular data should be in a table. But he very specifically does NOT WANT a table. The above is the answer to HIS QUESTION!!!
First display:block should be display:inline-block , Although you might have figured it out already.
Second you can also use display:table , display:table-cell , display:table-row and other properties.
Although these are not as good as using table.