I have created the below image, this is what I'm trying to create in a css tableless design. Tables will be easy, but I don't want to use them. The image in my example is just a place holder. The design is 450 width. What I have so far, which doesn't remotely work is: <div style="display:block;"> <div style="display:inline;text-align:center;" align="center"> Title</div> <div align="left"><a href="/link"><img src="" border="0"></a></div> </div> Code (markup): Thanks
I can't tell for sure what you're trying to do here, but just code your image to float left <img src="" style="float:left; margin-right:10px;"> then your text will flow around it to the right and fill your div.
Pretty much, except if the darker bolder text is going to be a header like an H3 or something.... that's a block element so if it were ever given a background colour or something, you'd see that the whole H3 will slide under the float... so to be safe, you might also want to set a left margin =to the width of the image plus some extra space.
First off, a DIV is a block-level element so there's no need to declare its display as such. Second, just float the image to the left and then give the paragraphs a left margin equal to the width of the image (at the very least). Here's a rough example: <div> <img src="#" width="400" height="300" style="float: left;"> <p style="margin-left: 410px;"> text goes here </p> </div> Code (markup): It's very crude, but it works.
Thanks for your help, however I believe I left one thing out, which made Dan's example not work. That one thing is the that I will have more then one of these stacked. When I use Dan's code, my images end up next to each other and other weird stuff.