In writing this post, I wanted to include a centered image with four lines of text off to the side, like this:
As someone who is struggling to move away from table-based layouts, I did my best to create that structure using only CSS. But after 30 minutes of fighting with divs, floats, clears, aligns, and google searches, I gave up and whipped out the table code. Two minutes later, the table was done and published. Yes, I gave up--I didn't want to spend my entire lunch hour on five lines of text!
My question is this: can someone point me to a site that explains exactly how to create the above look using CSS? All pointers appreciated.
The truth about tables is simple, they have been over used, and over used for the wrong things. The HTML Table tag is just that, for creating tables, not for creating entire webpage layouts. If you are looking to create a table for your page, then should be fine. Just remember to format the design of the table using CSS by adding an ID or CLASS to the table.
It’s always a fun experiment though, to see how long you can work on trying to get CSS to do the table the way you want, before you quit and end up using the table tags after all.
I often refer to the w3c site for CSS info. They have a Tips and Tricks page at http://www.w3.org/Style/Examples/007/ that will give you some ideas.
-Mark
It is, how you say... Way to freaking difficult. More difficult than it ought to be. Found myself hunting high and low for a decent vertical centering solution in CSS so I could make the menus of our new site look halfway decent. The easiest thing for your example would probably be some sort of line-height attribute.
If it's any consolation, your linked post is layed out correctly in firefox. :)
I didn't point you to a tutorial on floats because most of them are more confusing than instructive. I can tell you that doing something like this is easy if you understand some basic things.
Here is my code (view source):
http://www.aaronboswell.com/rob.html
The first one is yours. The second is the code to use without any css. The third is the same code with css applied (I used inline styles, but you can apply them the same way in an external file).
Basically you put everything into a div tag (which is a container tag). Then put in all of your stuff (an image tag and then four lines of text in a p tag). Now you have your image on top and the paragraph of text below it.
Looking at the table you can tell that the text is not as long as the image. This makes it easy for the image to float:left and not have the paragraph of text wrap below it. If you try to float:left the text, the image would go to the right.
Like I said, this is a simple fix. Not all float examples are this easy. Here is a pretty in-depth page. I confused the hell out of me when I was starting out, but it does cover most of the types of floats.
http://css.maxdesign.com.au/floatutorial/
Hopes this helps and makes sense.
Eric Meyer explains it best: http://www.complexspiral.com/publications/containing-floats/
Normally I'm reading a post in which you're the expert. Finally I get to be the "expert"! I have been working on these same problems a lot lately since everyone is on this CSS kick. "it's so easy to just change your CSS file and the whole site looks new," they say. Whatever. I can redesign a whole web site in half the time it takes for them to get the first CSS to layout correctly. Notice not one answer you got actually solved your problem. I say screw it and comments like the one from plattapuss. Build your table and be done. Chances are, you're not going to keep any of the original code when you tire of your web site's look.
It's a pity that Firefox/IE don't support the css display type "inline-block". If they did, you could use this: http://homepage.mac.com/adrianm/rob/rob.html
Looks fine in Safari and other WebKit browsers though :-)
Hi Rob,
this is my first comment on Robservatory, but I've been reading from the beginning, and I read MacOSXHints daily since 10.0. A big thank you for your work, it's been wonderful to follow over the years. Finally I feel I can contribute: I might have a working answer for this one. I tried the page of Aaron Boswell, but his boxes do not appear horizontally centered in my browser (Safari 2.0.4), maybe he uses a different one? I've been successful with this code: http://cc.oulu.fi/~thu/other/rob.html (view the source of the page to see the css, it's in the html instead of an extra file).
I hope this helps.
Thanks again,
Thomas from Finland.
Thomas-
I am using Safari. I didn't add a horizontal center because I wanted to keep it as simple as possible. When I was trying to figure out floats, I had a hard time figuring out how they worked because of all the extra code. I like your example and am in no way trying to flame.
Aaron
I used an <ul> list instead of a <p> element because this is more semantic. It's a list of links, so I'm using a list.
http://blog.grimm.tv/rob.html
First example uses the image as background image (style image) because it assumes that the image doesn't contain information which requires the images used as HTML element. Therefore no float is needed.
Second example uses the image as HTML element because it assumes that the image contains information which requires that the images couldn't be used as background image.
In my CSS travels, I have found that your situation can either be achieved with simply floating the image left as suggested by Aaron Boswell above, or by creating a set-width containing DIV and then creating two DIVs inside that float against each other - thus creating 2 columns - much like a HTML table would:
<div style="width: 500px">
<div style="width: 245px; float: left">
First column content here
</div>
<div style="width: 245px; float: right">
Second column content here
</div>
</div>
Rob - In my opinion is very helpful article. Can I add link to this article on my site?
basically, set a div to wrap around your text stuff
give that div the border/padding/width stuff you need
pop in your image
float left
with a right margin of however many pixels you need
have four paragraph tags each with a set margin
bam, you're set
Comments are closed.