 |
 | Home | Contact Us | FAQ | Search & Site Map | Link to Us |
 | Sign In | Join | Other 45 Sites in Network |
| HomeDiscussion GroupsGeneralPHPASPPerlColdFusionFlashHTML, CSS, ScriptsBrowsers |
Webmaster Forum / HTML, CSS, Scripts / CSS / September 2006Image and Text Side By Side
Hello, What is the best way to place an image and a text side by side using CSS? Basicaly what I am trying to do is to make the image and the text to appear as follows: Image My Text... XXXXX --------------- XXXXX --------------- --------------- --------------- Do you understand? Like to table columns. However, I was looking to do this without a table. Thanks, Miguel > Hello, > [quoted text clipped - 14 lines] > > However, I was looking to do this without a table. 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: <img src="blah.png" style="float: left"></img> <div style="float: left"> My Text... --------------- --------------- --------------- --------------- </div> >> What is the best way to place an image and a text side by side using >> CSS? [quoted text clipped - 4 lines] >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? If the OP actually wants columns, then I have found that the best, most reliable, most browser-compatible way to make columns is to use side-by-side table cells. Fighting with CSS to make columns work correctly on all browsers was a nonproductive use of my time. -A >>> What is the best way to place an image and a text side by side using >>> CSS? [quoted text clipped - 7 lines] > 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. > If the OP actually wants columns, then I have found that the best, > most reliable, most browser-compatible way to make columns is to use > side-by-side table cells. [...] You're probably right. The image should get floated left, and the text needs a margin-left set to the size of the image, plus about 15 extra pixels. Tables should always be used for tabular data only - not for presentation or layout purposes. 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. > >>> What is the best way to place an image and a text side by side using > >>> CSS? [quoted text clipped - 17 lines] > > You're probably right. >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: > [quoted text clipped - 4 lines] > >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 > 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. > >Tables should always be used for tabular data only - not for > >presentation or layout purposes. [quoted text clipped - 19 lines] > > -A > 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.  SignatureBerg >>>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: [quoted text clipped - 5 lines] >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 >>>>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: [quoted text clipped - 8 lines] > 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. |
Reply to this Message |
 Sign In
 Join
 My Latest Posts My Monitored Threads My Blog My Photo Gallery My Profile My Homepage Start New Thread Enable EMail Alerts Rate this Thread
|
©2009 Advenet LLC Privacy Policy - Terms of Use
This website includes both content owned or controlled by Advenet as well as content owned or controlled by third parties.