I've got a simple layout I'd like to do, that would take me maybe 3 minutes to put together using tables, but I know that that's not what tables are supposed to be for any more. The simple layout that I am looking at is that I have about 20-30 sets of pictures that I want to place down along the left side of a page, and information about the person on the picture that I want to put down the right side of the page. I do NOT want this information to wrap around the picture if it gets longer than the picture does. I want the text to the right to be left justified and start in the same place all the way down the page. In essence, I want to create an effect equivalent too the following table using divs and CSS, but I have no idea how. This is a common problem thus far in my transition to the use of divs and CSS and in this case it's come to a head, and is driving me nuts. <table> <tr> <td> <img> </td> <td> <p>text<br> text<br> text<br> text</p> </td> </tr> <tr> <td> <img> </td> <td> <p>text<br> text<br> text<br> text</p> </td> </tr> . . . <tr> <td> <img> </td> <td> <p>text<br> text<br> text<br> text</p> </td> </tr> </table> Code (markup):
Simply group an image with the supporting text. .bio { /*see note [1] below*/ overflow: hidden; } .bio img { float: left; } .bio p { margin-left: 200px; /*nominal value--make it a bit larger than the widest pic*/ } ========= <div class="bio"> <img src="some.jpg" alt="John Doe"> <p>all about John Doe</p> </div> Code (markup): Do that once for each bio. cheers, gary [1] You'l have to apply a hack for IE6. See my enclosing float elements demo.
I'm looking over your tutorial, and while helpful (I know exactly where I'm going to use that on my own homepage), I'm afraid it might not give me the same end effect. My main goal is being able to put in content without having to scale individual styles for each object. I'm often working with small images, and text so long that it extends two lines past the bottom of the image. If I use float-left and have the text float up to the right of the image, this then causes the two lines below the image to sneak in under the picture. I specifically want to AVOID that. It's great for inserting an example picture into a huge paragraph, but it's stylistically sloppy when you're listing facts about a person (Name, address, phone number, ect) it does look really sloppy. Will any of your examples on your example page operate the way I'm looking for?
tables are meant for tabular data. i.e. a train schedule with departure and arrival times would be best used in tables. Personally, tables are easier to use then div's for me. But most experienced web designers these days think tables are a big no-no if it can be done with div's
What I want to put together is, in my understanding, a headerless table. In one column I have a picture of a person (a piece of data) in the other, information about them. It's got a 'picture data' column, and an 'information data' column. Each row pertains to a particular person. Each cell is a cross reference between the column header (picture or personal data) and the row header (person). So using a table is one semantically appropriate way to code it, in my opinion. But I know a lot of people out there would not consider this a table, and so think it should be done in divs. I'd like to try to do it that way. If I can, I will. But I'm just looking for some simple code to do a simple task. So far no one has specifically told me that a given small set of classes will create the simple effect I'm looking for. I understand that you guys are helping me out of the kindness of your hearts, and I really do appreciate it. Er... kk5st, one more question for you. Why .bio p rather than p.bio?
I think I got you with this. Comments are in bold. <!-- each of your images and text starts here --> <!-- a box to wrap text and image in --><div class="box"> <!-- a box for image only --><div class="textimg"><img name="" src="" width="200" height="150" alt="" style="background-color: #999999"></div> <!-- a box for text only --><div class="textbox"> <p>All info that matches the image in here BOX 1</p> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </p> </div> </div> <!-- each of your images and text ends here --> The style sheet for this would be: /* start page image and text boxes build*/ div.box{ float: left; height: auto; width: 50%; border: 1px dotted #FFFF00; margin: 2px; padding: 5px; background-color: #FF0000; } div.textbox{ float: right; border: 1px solid #00FF00; clear: none; height: auto; width: 55%; background-color: #FFFFFF; padding: 3px; } div.textimg{ float: left; height: 150px; width: 200px; padding: 2px; border: 1px solid #0000FF; background-color: #FFFFFF; margin-right: 10px; } /* end page image and text boxes build*/ You can see a working example of this ---> click me This is just a simple way of doing things so play around with the box sizes and you should get what you want. All with div's and css. And for the record, use tables (Google, Amazon etc do and no-one gives them grief) if you think its easy. What you are trying to do would be very easy with tables and if it was me doing the same thing I would be using tables for this job too. Also read this post which has some great comments about tables. I hope this helps.
Doy. Float the text -container- right after floating the picture container left. I'll have to try that out. Thanks.
My examples here, and on my site are applicable to your problem. The reason for ".bio p" is that I want the rules to apply to a p that is descended from the container of class .bio. Look at the example below, and you'll see a further extension of the idea, with ".bio div p". <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title> Untitled </title> <style type="text/css"> /*<![CDATA[*/ #wrapper { border: 1px solid black; width: 500px; margin: 25px auto; } .bio { /*see note [1] below*/ width: 100%; /*hack for IE*/ overflow: hidden; border: 1px solid black; margin: 10px; } .bio img { float: left; } .bio p, .bio div { margin-left: 200px; /*nominal value--make it a bit larger than the widest pic*/ } .bio div p { margin: 1em; } /*]]>*/ </style> </head> <body> <div id="wrapper"> <div class="bio"> <img src="bullseye.jpg" width="75" alt="John Doe" /> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas tristique pretium elit. Sed urna libero, luctus vel, feugiat eu, pellentesque ut, dolor. Proin est. Etiam. </p> </div> <div class="bio"> <img src="bullseye.jpg" width="175" alt="John Doe" /> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas tristique pretium elit. Sed urna libero, luctus vel, feugiat eu, pellentesque ut, dolor. Proin est. Etiam. </p> </div> <div class="bio"> <img src="bullseye.jpg" width="75" alt="John Doe" /> <div> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas tristique pretium elit. Sed urna libero, luctus vel, feugiat eu, pellentesque ut, dolor. Proin est. Etiam. </p> <ul> <li>some stuff about the guy </li> <li>some more stuff </li> </ul> </div> </div> <div class="bio"> <img src="bullseye.jpg" width="175" alt="John Doe" /> <div> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas tristique pretium elit. Sed urna libero, luctus vel, feugiat eu, pellentesque ut, dolor. Proin est. Etiam. </p> <ul> <li>some stuff about the guy </li> <li>some more stuff </li> </ul> </div> </div> </div> </body> </html> Code (markup): cheers, gary
Okay. I've been looking over the code, and while I do appreciate the help thus far, neither of these solutions actually gives the desired result. As I previously said, I am looking for a set up that will -dynamically- size the containers based on what is put into them so that if someone else down the road dumps a new picture in it'll stretch everything correctly. A table will do that, but neither of the two solutions above will do that. I have to specify the width of the picture, the text, or both, in the CSS hard code. Not to say it hasn't been educational and useful. There are pages I will be editing soon where this will actually be something I can use to replace the tables. I am a little concerned about using a float without a clear though. I've heard/been told before that you have to clear the float at some point, and it's best done inside it's parent container. Is that not the case? I would like to say that I've used a few techniques from this page to alter the code on another page I was working with that has a similar, but not identical set of needs, and it's worked marvelously. Thank you.
You have to keep in mind that the 800lb gorilla, IE, is a PoS. Were it a halfway decent browser, what you ask would be simple. See the code I've posted below. The fact is that we have to dumb things down or use non-semantic markup for that pig. In this case, ask yourself whether you want the odd contributor to mess up the page with off sized images. It would be a fairly trivial matter to use ImageMagick on the server to resize over-width images. Make the left margin of a size that will accommodate the widest allowed image. That is covered in the reference I gave you, enclosing float elements. There are several ways to enclose or clear a float. No one of them will work as desired in all cases. At least one will work for any given case. See this? It's simple for modern browser, but IE is obsolete and non-compliant. So, there you are. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title> Untitled </title> <style type="text/css"> /*<![CDATA[*/ #wrapper { border: 1px solid black; width: 500px; margin: 25px auto; } .bio { display: table; border: 1px solid black; margin: 10px; padding: .75em; } .bio div { display: table-cell; vertical-align: top; } .bio div p { margin: 1em; } /*]]>*/ </style> </head> <body> <div id="wrapper"> <div class="bio"> <img src="bullseye.jpg" width="75" alt="John Doe" /> <div> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas tristique pretium elit. Sed urna libero, luctus vel, feugiat eu, pellentesque ut, dolor. Proin est. Etiam. </p> <ul> <li> some stuff about the guy </li> <li> some more stuff </li> </ul> </div> </div><!--end bio --> <div class="bio"> <img src="bullseye.jpg" width="175" alt="John Doe" /> <div> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas tristique pretium elit. Sed urna libero, luctus vel, feugiat eu, pellentesque ut, dolor. Proin est. Etiam. </p> <ul> <li> some stuff about the guy </li> <li> some more stuff </li> </ul> </div> </div><!-- end bio --> </div><!-- end wrapper --> </body> </html> Code (markup): cheers, gary
I see what you mean, and my loathing of IE grows. Your suggestions are quite sensible. Sorry if I was a bit of a pain on this. I'm going to have to experiment with the different float clearing styles you suggest. I'm going to try to avoid hacks where I can because I honestly don't understand them yet, and using code I don't understand tends to get me into trouble.