Hi all. I’m having a problem with a border style I’ve applied to a paragraph and an image that is floated next to the paragraph. For some reason I get awfully confused with floats, block elements and inline elements. I have uploaded a sample page to http://www.mosaik.com.au/borderIssue.html where I’ve just grabbed the necessary code from my development page. I’m also including the same code below:
The text of the paragraph wraps perfectly around the image but the border continues right under the image. I would like the border to start in line with the text "PGA Professional". I’m sure this is a simple issue to remedy but I’m just not seeing it right now (must be the lack of sleep!!).
Thanks in advance.
In line 62 you should add left margin to the p.position class listed below. I think the best way to do this would be to change the markup a bit. something like what I have listed below may work better.
something like that..
Thanks for your help, the second solution does work for the sample I provided. Of course I left some information off my post (you’re supposed to be able to read my mind, right? :) ) The content in the box is dynamic and a number of the boxes will be appearing on the one page. Some of the boxes will have an image and some may not, so simply changing the margin means it will look great if there is an image but won’t look so good if there isn’t. Sorry, kinda crucial piece of information I forgot to mention!
I guess I could somehow pass the information from the database that if there is an image add padding to the .position class but that’s a little beyond me – I’ll have to ask the forums for my CMS about that!
I’ve tried your first solution but, because there will be an image sometimes and not others, I can’t specify the width of the image and copy containers. Also, I can’t specify a height as the image and copy size will vary. I tried putting width:auto for .copyContainer but then that container moves below the floated image. Also the .bodyContainer collapses. If I use overflow:hidden or add a clearing div this fixes the .bodyContainer but the .copyContainer is still below the .imgContainer because of the width:auto!
Starting to wish I hadn’t designed the site this way! Any thoughts? Maybe I should just tell the client they *have* to have an image?!
If this is the case I would use a default image as a bg of the img div if there is no image. It does not make sense to me how the site would look consistent without an image. I would definitely consider restructuring your html as I provided above for cross browser support as well as not needing an image. Hope that makes sense, If you revise your code I would be happy to take a look.
You must be logged in to reply to this topic.
*May or may not contain any actual "CSS" or "Tricks".