SitePoint Sponsor

User Tag List

Results 1 to 3 of 3

Hybrid View

  1. #1
    SitePoint Addict Huscy's Avatar
    Join Date
    Jul 2002
    Location
    Newcastle, UK
    Posts
    318
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    fluid height, float: left... all sorts of problems!

    lol ok my code is:

    div.tutthumb {
    width:420px;
    border: 1px solid #000;
    padding: 2px;
    }

    .tutthumb img {
    border:none;
    float: left;
    margin: 2px 4px 2px 2px;
    }

    .step {
    text-align: center;
    background-color: #EFEFEF;
    width: 418px;
    font-weight: bold;
    margin: 5px 0px 1px 0px;
    padding: 2px;
    }

    <div class="tutthumb">
    <div class="step">Step One</div>
    <img src="tutorial_images/tutorial_ps_shock01.gif" width="200" height="200" />
    <br /> <br />
    OK, first of all we make a new canvas, mine is 400x400 pixels, with a black background.
    Now using the type (text) tool, write something across the middle of the canvas, I have written 'hello' as seen to the left.
    </div>

    (for example)

    I want the image to be aligned to the left of the div, but when the image is floated to the left, it seems to break out of the div, and when it ISNT, then the text appears underneath the image - an y ideas?

    this is kinda the setup im after (ignoring the dots):

    |----------------------|
    |........|.....................|
    |..img..|...text here......|
    |........|......................|
    |_____|______________|

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,535
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    You will need to add something like this at the end of your text to stop the float from breaking out of the container.

    Code:
    <br style="clear:both" />
    Just put it at the end of your text.

    If you don't want the text to wrap underneath the image (if you are adding more text that is as it is ok with the text you have at present) then you can set a margin left on the <p> to keep it over to the right of the image.

    e.g.
    Code:
    .tutthumb p {margin-left:205px}
    e.g.
    Code:
    <div class="tutthumb">
    <div class="step">Step One</div>  
      <img src="tutorial_images/tutorial_ps_shock01.gif" width="200" height="200" />
      <p>OK, first of all we make a new canvas, mine is 400x400 pixels, with a black 
    	background. Now using the type (text) tool, write something across the middle 
    	of the canvas, I have written 'hello' as seen to the left. </p>
    	<br style="clear:both" />
    </div>
    Hope that helps.

    Paul

  3. #3
    SitePoint Addict Huscy's Avatar
    Join Date
    Jul 2002
    Location
    Newcastle, UK
    Posts
    318
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    yeah, thanks mate


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •