Image and Text Side By Side
in [CSS]
|
Prev: CSS and plain text
Next: div a:hover IE 6.0
From: axlq on 28 Sep 2006 20:15 In article <slrnehl996.qh9.spamspam(a)bowser.marioworld>, Ben C <spamspam(a)spam.eggs> wrote: >>>Put the text in a <div> or something, and make both the image and div >>>float: left. Put the <img> immediately before the <div> in the source: >> >> Won't that cause the text to flow around the image underneath, if the >> text is long enough? > >No, because the text is in a floating box of its own. They both float >around any other inline stuff that might be in the containing box, in >this case nothing. Except the columnar aspect would get lost if the browser window is narrowed too far, when one box wraps under the other, no? I guess you could put both boxes in a no-wrap container. -A
From: axlq on 28 Sep 2006 20:19 In article <1159448501.873388.121850(a)m73g2000cwd.googlegroups.com>, matthom(a)gmail.com <matthom(a)gmail.com> wrote: >Tables should always be used for tabular data only - not for >presentation or layout purposes. This mantra gets repeated a lot, and while the intention is good, the problems with it are well known, so I won't restart the argument again here. >Let's say the image is 200 pixels wide: > ><img style="float:left" /> ><div style="margin-left: 220px;"> >Text goes here ></div> > >That should be all you need. No, that's not columnar presentation. The text will wrap under the image. Try doing it in CSS in such a way that always preserves the side-by-side relationship. It's not as straightforward as a table, and you end up with just about as many markup elements. In this case, there's not much semantic difference between <div> and <td>. -A
From: Ben C on 29 Sep 2006 03:00 On 2006-09-29, axlq <axlq(a)spamcop.net> wrote: > In article <slrnehl996.qh9.spamspam(a)bowser.marioworld>, > Ben C <spamspam(a)spam.eggs> wrote: >>>>Put the text in a <div> or something, and make both the image and div >>>>float: left. Put the <img> immediately before the <div> in the source: >>> >>> Won't that cause the text to flow around the image underneath, if the >>> text is long enough? >> >>No, because the text is in a floating box of its own. They both float >>around any other inline stuff that might be in the containing box, in >>this case nothing. > > Except the columnar aspect would get lost if the browser window is > narrowed too far, when one box wraps under the other, no? Yes it will. > I guess you could put both boxes in a no-wrap container. I'm not sure that would work-- the white-space property only affects text layout, not float placing. You could give each column a % width-- 50% each (or a bit less if they have borders/padding/margins). Then you should get two side-by-side columns no matter how narrow the viewport is, until you reach the point that one of the columns is narrower than the longest word in it. If you set a min-width on the div that the two columns are in, then past that point, you'll get a horizontal scrollbar, which might be better than one column jumping below the other. I think it's simpler to just use a table though.
From: matthom@gmail.com on 29 Sep 2006 09:36 > No, that's not columnar presentation. The OP was just looking for a way to have text appear to the right of an image. The CSS and HTML I mentioned will work - have you tried it? > The text will wrap under the image. No, it won't. The "float: left" will make the image float left, while everything in the markup AFTER the image will float to the right of the image. The margin-left is necessary, however. > It's not as straightforward as a table, > and you end up with just about as many markup elements. > ><img style="float:left" /> > ><div style="margin-left: 220px;"> > ></div> How could the above be MORE markup than a table? We have the <img> and the <div> - that's it. A table is not meant for layout - use CSS - it allows for much more control, and it makes future changes much easier for the developer. axlq wrote: > In article <1159448501.873388.121850(a)m73g2000cwd.googlegroups.com>, > matthom(a)gmail.com <matthom(a)gmail.com> wrote: > >Tables should always be used for tabular data only - not for > >presentation or layout purposes. > > This mantra gets repeated a lot, and while the intention is good, > the problems with it are well known, so I won't restart the argument > again here. > > >Let's say the image is 200 pixels wide: > > > ><img style="float:left" /> > ><div style="margin-left: 220px;"> > >Text goes here > ></div> > > > >That should be all you need. > > No, that's not columnar presentation. The text will wrap under the > image. Try doing it in CSS in such a way that always preserves the > side-by-side relationship. It's not as straightforward as a table, > and you end up with just about as many markup elements. In this > case, there's not much semantic difference between <div> and <td>. > > -A
From: Bergamot on 29 Sep 2006 11:51
matthom(a)gmail.com wrote: > > A table is not meant for layout - use CSS - it allows for much more > control 'Control' is a poor choice of words since the author doesn't actually have any. 'Flexibility' may be better. -- Berg |