Vertically centering, side-by-side

[enchant]

From time to time, I have to do a layout where a photo is on one side of the page, and a description is on the other. I want the description to line up vertically to approximately the middle of the photo. In the past, the easy way to do this was to create a simple two-cell table.

But everywhere I turn, I hear that tables are evil and I should be using alternative methods to achieve my layout. Is there a better way to do this that is cross-browser compatible?

Thanks.

[webprutser]

Haha .... just the type of question I need. When I started making websites I used tables for the lay-out, but just like you, I heard and read tables shouldn't be used unless the content was suitable for a table. Don't ask me for a thorough explanation as to why tables are not favourable. I must have read it, but don't recall it. What I have experienced though that when you have certain wishes about lay-out, tables may cause you troubles and thus I have decided to leave table lay-out behind me.
I am at the beginning of the non-table-lay-out road, but a page with on one side of the page a photo and a description next to it, should be something I could work out and is a challenge that will help me as well. When you don't use tables you put your content in a <div> or a <span> and by adding a class or an id to it you put the corresponding lay-out in your CSS file.
Let me try this one, if I can't fix it I know where to turn for help at this forum, so your question will be answered in any case and offers me an opportunity to learn as well.

[enchant]

Thanks, webprutser - I appreciate it.

I'm trying to avoid tables as much as I can. It was my general "go to" container, and truth be told, it did a pretty good general purpose job. Another task that I'm having problems replacing it with is when I want to center a bulleted list. Just centering it in a div causes the bullets to skew, obviously. Simply enclosing it in a one-celled table with auto margins solves the problem. The only other way I know around this is to give a div a hard-coded width and center it. This is a frustrating method, because if you change the contents, you've got to go back to the trial and error method to find the new div width. AFAIK, there's no way for a div to expand to its content.

[SuzyUK]

OK, I'll bite ;)

tables are evil ONLY WHEN you turn off CSS and the page doesn't make sense, even better, and to prove it's not CSS that is the aggressor here - try "listening" to your page.. and no I'm not being all weird or deep - I mean use a screen reader or equivalent text browser software.. now try listening or reading plain text.. does the page flow, does it make sense.. is the description connected with the picture?

If it is, then use a table for goodness sakes!

if not that's why the need to do it another way, if it doesn't make sense in plain text it won't make sense to assisted technologies (AT) or to a BOT (i.e. a SE!)

@enchant your solution, I would guess, is inline blocks.. like inline text they naturally appear side by side, and they can be vertically aligned.. just like plain text well hmm an image beside some text.. in the old days before tables decided they could make that look "prettier" really was just that an image beside some text .. so if that's what you need, then use CSS to STYLE that text beside the image.. I don't care whether it's a div, a span a p or a img.. every one of those elements can be made to display inline or inline-block.. the message I will repeat is - make the page make sense before thinking about how it will display

it's not Hocus Pocus..or a fight, or some age old taboo it really is that simple.. more so these days as not everyone views a web page on a PC browser ;)

[webprutser]

O, o .... back to basics? I'm not sure, Suzy, what you mean by a screen reader ... I'm a bit confused though about the whole table-or-no-table concept. Guess will read some more about why I should or shouldn't use them or maybe better when I should or shouldn't use them. Anyhow, I managed to put the image on the left side on the page, on a centered body, the text on the right side and with margin-right and margin-top can put it on any place next to the image I want. My nomination as web-whizard is at stake here!

This is the html:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" >
<meta http-equiv="X-UA-Compatible" content="IE=8" />
<title>Wereldwinkel</title>
<meta name="keywords" content="testfile forum">
<link rel="styleSheet" type="text/css" href="test_1.css">
</head>

<body>
<div id="sample">
<img src="images/homepage.png">
<div id="sample_text">I'm just writing some text here, to show how it will be displayed.</div>
</div>
</body>

and this is the CSS:
/* CSS Document */
body {
position: relative;
background-color: green;
background-image: url(images/background.jpg);
background-repeat: no-repeat;
background-position: top center;
}

#sample {
width: 750px;
margin: auto;
border: 2px solid black;
}

#sample_text {
display: inline;
height:150px;
width: 250px;
border: 2px solid green;
float:right;
margin-right: 47px; /* width div 750 - 365 (used image) - 250 (width div) - 40px (padding) / 2 = 47,5 ==> 47px */
margin-top: 200px; /* height used image 550px: 550-150(height div)/2=200 */
padding:20px;
}

and I think I do even understand it.
#sample is a container, a block-level element, that holds the image and the text. The image naturally flows to the left side of the container and by placing the text in a div that floats right and let it behave as an inline element it positions itself at the right side of the image. The borders are only added for testing, so you can see what happens. The container is 750px width, centerd by margin: auto; the text is placed in a div of 250x150px.

[webprutser]

Did some reading in the meantime and I now know what a screenreader is.
This is an interesting page at Wikipedia on tableless web design: [en.wikipedia.org...]

[SuzyUK]

@webprutser, sorry to be disdainful as I know you're learning, but I don't believe wikipedia is the fountain of knowledge on this subject (nor may others I hear ;)) - a screen reader is an assisted technology that a blind (or poorly sighted) person might use to navigate a web page - it reads HTML code literally.., that is the most basic way to know if your page make sense - in real terms you've no need to know or follow exactly what a screen reader is or does..but back to real basics.. copy the source of the (any not just yours) page (view source - copy page CTRL-A/CTRL-C or select all and right click copy) the paste into any HTML editor then view the page.. it won't look "pretty" but does it make sense? that's the closest you will get without spending out for the tech, pretend you have the crappiest browser on earth but you still want to read the site and understand the page, forget rounded corners, curvy, images, backgrounds.. can you read the page? - this isn't a trick question

now do that with your own page, only when you're happy with the "plain" view can you get on with the CSS.. CSS does NOT AFFECT THE MEANING of the page it only suggests an appearance depending on the media you state in your <link> element or the actual CSS itself - e.g.

@media print {}

should apply CSS suggestions only when someone actually wants to print a page

[SuzyUK]

@webprutser

missed your code posting.. so I know your "web-whiz" rep is at stake ;) & I'm trying to help, honest I am. You will get this if it's the last thing alt or I do, and I'm sure others are hoping it's soon ;~)

you said about your own code sample above.. that

The image naturally flows to the left side of the container and by placing the text in a div that floats right and let it behave as an inline element it positions itself at the right side of the image.

No it doesn't flow naturally, (forget the CSS suggestions about how you'd like it to display) - if the image were to flow naturally it would be INSIDE the DIVision - as soon as you made a page DIVision you broke the "natural" flow the image is now outside it.. try your own code without CSS.. where is the image?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" >
<meta http-equiv="X-UA-Compatible" content="IE=8" />
<title>Wereldwinkel</title>
<meta name="keywords" content="testfile forum">
</head>
<body>
<div id="sample">
<img src="images/homepage.png">
<div id="sample_text">I'm just writing some text here, to show how it will be displayed.</div>
</div>
</body>

[enchant]

SuzyUK, do YOU have an acceptable method of achieving this goal?

[webprutser]

Good morning, Suzy ...
That's a lot of stuff to deal with on a Saturday morning. Starting with the above: Without CSS my image is at the left side of the screen, not at the left side of a div or a body, but of the screen. I think that was what I meant with "natural" flow. For me it feels natural when it does, but what's natural in the end, talking about html and computers?

Whether a page makes sense without CSS code? That's an interesting question. A website obviously should offer me information, it has a function. A car has a function also, it should take me from A to B. I can be taken from A to B in, let's say a Mini Cooper or an Aston Martin, if you let me chose I'll take the Aston Martin.
What I'm trying to say is that we have a lot of senses that decide how we experience something. When we cut down all things to it's basics, we deprive ourselves from things that are valuable to us. I make a point of this, since I have had a lot of discussions about the looks of websites in general with my brother. Those are useful discussions, since I run the risk of making a fancy looking website, forgetting it has an informative function in the first place, when I'm not counter-balanced by someone like him.

Let me try what you suggest and go to my personal number one website and look at it without styling.
Haha .... it's about the same difference as comparing a Mini to an Aston Martin, but I'm not disappointed, it still tells me what I need to know. I think it's a rather good suggestion you make: look at the page without CSS and see if it still makes sense. Once it does, I'll start p i m p ing (spaces in order to get it displayed) it, if you don't mind. The hovering of my favorite site is a feast for the eye, I wouldn't like to miss it.

I never realized, shame on me, how useful internet can be for visually disabled people. The information on wikipedia was about the tableless webpages, but you gathered that from my post. I'm a Wikipedia fan, make some contributions myself every now and then, so why not improve the information on the screen-reader?

I had a nice example of trying to get rid of tables when a table turned out to be the approriate means to put the information in. Was making a kind of productpage and started putting pictures of productts and descriptions in a div. All was positioned well, but once more products were added I had an enormous amount of different id's to take care of the lay-out. Thinking about how to solve this, all of a sudden it appeared to me that I overlooked tables as being the perfect means for this kind of information.
In general, what I read about tableless pages is that they are easier accessable for search bots, load faster, are more appropriate to use for screenreaders and better suited for display at e.g. mobile phones. If this is indeed the case, there a lot to say pro tableless design. My productpage, however, told me to always check first what kind of information the page contains, before chosing a with or without tables-version.

Thanks for sharing your opinion with me and of course thanks for all the help I got sofar on switching to an other way of designing my pages.

[SuzyUK]

@enchant.. if it's a product listing or such like then a table is fine, there are use cases for tables but if it's a more relaxed thing photo with text snippets then just using the elements themselves inside a div.. the sample below shows both ways

<style type="text/css" media="screen">
table {border-collapse:collaspe;}
td {border:1px solid #000; padding: 5px;}
td img {display: block;}

.pics {border: 1px solid #f00;}
.pics img, .pics span {display: inline-block; border: 1px solid #000; vertical-align: middle;}
.pics span {padding: 5px;}
</style>
</head>
<body>
<table summary="product listing">
<tr>
<td><img src="http://www.webmasterworld.com/gfx/logo.png" alt="" width="218" height="112"></td>
<td><p>This is the WebmasterWorld Logo</p><p>The site offers News and Discussion for the Web Professional</p></td>
</tr>
</table>
<hr>
<div class="pics">
<img src="http://www.webmasterworld.com/gfx/logo.png" alt="" width="218" height="112">
<span>This is the WebmasterWorld Logo<br><br>The site offers News and Discussion for the Web Professional</span>
</div>
</body>

you can, and are supposed to be able to, make a block level element, like a <p> or a <div> also display as an inline- block but IE7 and below needs a bit of help.. I've used a span above to make sure it's OK, and technically inside the div.pics the img and the text may both be inline elements anyway - but if you did want to use a <p> like you can in a table cell.. you would have to enter two lines of code for IE

e.g
p {display: inline-block;}
*p {display: inline;}

the second one must be in a separate rule and should be shown to IE7 and below only - you can do this by adding an * before the p like I have or putting it in an [IE LTE 7] stylesheet (won't need the asterisk then)

in fact here's a how to using the same code as the first sample, but wrapped in a div so you can use multiple paragraphs of text beside the picture, and still have them all aligning.

<div class="pics">
<img src="http://www.webmasterworld.com/gfx/logo.png" alt="" width="218" height="112">
<div><p>This is the WebmasterWorld Logo</p><p>The site offers News and Discussion for the Web Professional</p></div>
</div>

add this to the CSS:

.pics div {display: inline-block; border: 1px solid #000; vertical-align: middle;}
*.pics div {display: inline;}

[alt131]

You will get this if it's the last thing alt or I do,

Definitely not the last - I have future plans involving cups of fair-trade coffee ;)

@Suzy, webprutsers description of the code sample he posted is quite correct: The image is inside #sample exactly as described, and it naturally flows to the left side of the container because it is an inline element in the normal flow so will be drawn from top/left unless the document has been set right-to-left.

@webprutser

Whether a page makes sense without CSS code? That's an interesting question. A website obviously should offer me information, it has a function. A car has a function also, it should take me from A to B. I can be taken from A to B in, let's say a Mini Cooper or an Aston Martin, if you let me chose I'll take the Aston Martin.

Exactly, and <div>'s are Mini Coopers - quite useful, but they never have the same meaning as an Aston Martin like <p>aragraph, <q>uote, <li>st item ... ;)

@enchant, other options "depend".
This is one of the things css has troubles with. As suzy says, display:inline-block is logical, but ie needs some help. Another similar option is display:teble/table-cell (that's display, not actually coding/marking up a table in the html), but firefox has troubles with that - and it is easier to "fix" ie than try to work around firefox.
If this is a whole page of images and descriptions, then it sounds "tabular", so would be correctly marked up as a table.
I also wonder about the purpose/nature of the description, because a definition list might also be appropriate.
If the description will only ever be a single line, the code can be this simple:
<p><img width="100" height="110" src="myimage.jpg" alt="Description">My image description</p>
and css:
p { width: 400px; border: 1px solid black; padding:10px; }
img {margin-right:10px; vertical-align:middle;/*this is what makes it work */}

If there are only a few of these the image could be set as a background-image on the p instead of being coded into the html:
<p class="moretext">Image description</p>
p.moretext {
background: transparent url(myimage.jpg) 10px center no-repeat;
padding-left:120px;
}

[enchant]

I'm going to create a small philosophical side bar, so to speak.

Although I'm a fairly small-time website designer, it's my only source of income, and I often have to make compromises if I'm going to be able to pay my mortgage and feed my family.

So when a customer tells me that they want the website to look like their brochure, and that this text should be just a little bit lower and that image just a smidge to the right... my only option is to find a way to do it, one way or the other. Otherwise, they'll tell their business friends how unhappy they were with me, and my competitors will get that work.

So I compromise as best I can. I explain the realities of the web vs. print media, the various browsing devices (screen, phone, etc.), and the plight of the visually impaired. But in some cases, my customers (or potential customers) don't give much of a rat's behind about these issues. It's their money they're spending, and if I want it, I'll do it their way. And in this economy, I'm finding myself at the bottom of the food chain, and I'm not losing any sleep if I've broken a lot of "proper html design" rules in order to get the job.

All that said, I do appreciate all of the tips and intend on doing a lot of experimentation with these ideas to create good-looking and accessible websites. And I thank you all.

[SuzyUK]

well if you're getting the coffee I'll quit sulkily ;)

anyway I was being a bit pendantic over webp's code, I know there is nothing wrong with it, in fact as you see my inline-block code (with the nested div involved) is similar

what I meant by "No" was to try and illustrate that it's not "naturally" flowing to the left of the text because the natural (no CSS) properties of the nested DIV make it go below the image - so the image is not naturally on the left of text it's above it - the proper 'natural' way to do this, without thinking about the end design is:

<p id="sample">
<img src="images/homepage.png">
I'm just writing some text here, to show how it will be displayed.</p> 

that shows the image naturally to the left of the text it just might not look quite how you want it too ;)

if you wanted to treat the text portion differently you would span the text (btw, a floated element is not inline, it's a floating block) a span is naturally inline, without CSS the page will still display the intent and it can still be floated if required, or, without adding anything just floating the image itself is usually the desired effect and is fact what floats were originally designed for. further <p>'s of text will wrap around the image.. that's the natural behaviour of an image with text - though it's not always a designers chosen effect

floating the nested div of text right in the original sample is indeed fine, it's not against the flow, it's already in a division of it's own and is already naturally 'disconnected' from the image anyway, floating it is a design thing pure and simple.. in my natural <p> - aligning the text right in the paragraph, floating the image left with a right margin would have the same effect without the need for the nested div - i.e. the separation I was trying to make between writing the code for the design and designing already naturally flowing code

Floating will work to get simple side by side blocks - but won't vertical center because it's still a block, vertical-align only works on inline elements or table cells, an inline-block is an inline element whose content can be formatted like blocks like a table cell.

Floats used to be all we had to get the side by side look, but now display:inline-block or display: table-cell would be the better choice IMHO floats themselves have been abused, but with no other choice it couldn't be helped - like tables, sometimes a float is the right choice sometimes it isn't

I only meant to try and illustrate that even in this simple example divitis can creep in as soon as you are thinking about the end product, it's of course OK to do this, and there are usually many ways to achieve an end result. I had just hoped to help web-whiz get a feel for the "flow of document" i.e. reading the plain text as opposed to reading the design - both the original question and webp's code can't really avoid a table like structure behind them i.e. row/wrapper div, cell/nested div or image - hence me suggesting that a table might very well be the right choice but it all depends what you want the underlying semantics to do, the advantage to the float solution is that you can interchange the "columns", the disadvantage is that you get no vertical alignment

I'll get me coat, off to the coffee shop ;)

Suzy

[SuzyUK]

indeed @enchant that is the reality, sorry we're taking over your thread a bit here!

I don't think it's a compromise really, once you use any element, right or wrong, you will be able to use CSS padding and margins to do the nudging, there's always a way to do something, many ways sometimes, which is the beauty of CSS really ;)