Web Analytics Made Easy -
StatCounter Problem with image and border... - CodingForum

Announcement

Collapse
No announcement yet.

Problem with image and border...

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Problem with image and border...

    Afternoon All,

    I am about to start updating some old sites that were developed with tables to using CSS. As a starter I have created a page http://www.wildcatsgym.com/notices/coaches_update.html

    The problem I have is that the image in the top block is going over the border. The CSS is shown here

    Code:
    <style type="text/css">
    <!--
    .image-left {
    	float: left;
    }
    
    .block {
    	font-family: Arial, Helvetica, sans-serif;
    	position: relative;
    	border: medium dotted #c0c0c0;
    	padding: 2px;
    	margin: 2px;
    }
    -->
    And the HTML is here (the relevant bit anyway...)
    Code:
    <div id="block" class="block"><img src="../images/coaches_judges/aleisha.jpg" alt="Aleisha" width="150" height="212" class="image-left"><h1>Name</h1>
    <p>Some text...</p></div>
    
    <div class="block" id="b2">
    		<h1><img src="../images/coaches_judges/renee.jpg" alt="Renee" width="150" height="221" class="image-left">Name</h1>
    		<p> <em>A Wildcats Icon Who is Well Worth Emulating.</em>..<br>
    		Attempting a layout full twist during the  floor warm up at State Clubs in Launceston, Renee landed badly, severely....</p>
    		<p>blah, blah, ...</p>
    
    </div>
    How can I ensure the the border encompassed the image as well?

    Thanks in advance
    Unknown2

    "Who knows"

  • #2
    Because you are floating your image you need to clear the float. Read this
    http://www.positioniseverything.net/easyclearing.html
    ||||If you are getting paid to do a job, don't ask for help on it!||||

    Comment


    • #3
      Cheers
      Unknown2

      "Who knows"

      Comment

      Working...
      X