Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Feb 2008
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    need help with an unusual float in a paragraph

    Hi all,

    first let me say i am a newbie. i am not a true coder as many of u r. i use dreamweaver and am slowly picking up css by manually typing my external style sheets. i have tried this every way i can think of including using divs to no avail. i am trying to do several of these text boxes on a single page and they all very in amount of content and image size. the code below is close to what i want except that the image falls outside the box i don't want this. is there a way for me to make the image help "size" the text box so it will always remain in the box with minimal padding and float to the left of ALL text. i do not want the text to run under the image if the paragraph exceeds the image in ht.

    here's my code:

    <html>
    <head>

    <style type="text/css">
    <!--
    p.content2 {
    margin: 3em;
    text-indent: 1em;
    border: 2px solid #0066FF;
    padding:.5em;
    background-color:#FF00FF;
    }
    .inline {
    float:left;
    margin: 10px 10px 10px 0px;
    }
    -->
    </style>
    </head>

    <body>

    <p class="content2"><img src="Images/Nutri-Bits 100px2.jpg" alt="Nutrti-Bits" width="100" height="97" id="content_img" class="inline" />Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content <br>
    </p>

    </body>
    </html>


    any help would be greatly appreciated thx
    Attached Images Attached Images  
    Last edited by wwiii12364; 02-27-2008 at 03:32 AM. Reason: changed notification

  • #2
    Senior Coder rangana's Avatar
    Join Date
    Feb 2008
    Location
    Cebu City, Philippines
    Posts
    1,752
    Thanks
    65
    Thanked 372 Times in 365 Posts
    First, the best thing (for me) to solve this one, is to put the image in a separate container and the contents in another container. This two containers will be inside one container, let's say for instance a wrap div.
    I edited your codes..see if it helps
    Code:
    <html>
    <head>
    
    <style type="text/css">
    <!--
    .inline {
    float:left;
    margin: 10px 10px 10px 0px;
    height:100&#37;;
    }
    
    #wrap
    {
    margin: 3em;
    text-indent: 1em;
    border: 2px solid #0066FF;
    padding:.5em;
    background-color:#FF00FF;
    height:100%;
    }
    -->
    </style>
    </head>
    
    <body>
    <div id="wrap">
    <div class="inline">
    <img src="Images/Nutri-Bits 100px2.jpg" alt="Nutrti-Bits" width="100" height="97"/>
    </div>
    <p class="content2">
    Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content <br>
    Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content 
    Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content 
    Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content 
    Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content 
    </p>
    </div>
    </body>
    </html>
    See if it helps

  • #3
    New to the CF scene
    Join Date
    Feb 2008
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    thanks for ur input rangana. i tried it this way as well my problem with it is that my text content is very small on most of the boxes i need to do and it works fine on those but there are one or two where the paragraph height exceeds the image height by just a few words so i end up with those few words under the image and it looks dorky. i don't want to enlarge the image if i can avoid it. i want them to be consistant in size. larger images with little text looks bad too.

  • #4
    Senior Coder rangana's Avatar
    Join Date
    Feb 2008
    Location
    Cebu City, Philippines
    Posts
    1,752
    Thanks
    65
    Thanked 372 Times in 365 Posts
    You could wrap into another div the contents of those texts. I edited the code to fit your requirements:
    Code:
    <html>
    <head>
    
    <style type="text/css">
    <!--
    .inline {
    float:left;
    margin: 10px 10px 10px 0px;
    height:100&#37;;
    padding:0;
    }
    
    #wrap
    {
    margin: 3em;
    text-indent: 1em;
    border: 2px solid #0066FF;
    padding:.5em;
    background-color:#FF00FF;
    height:100%;
    }
    #content
    {
    float:right;
    text-indent:0;
    margin:10px auto;
    }
    -->
    </style>
    </head>
    
    <body>
    <div id="wrap">
    <div class="inline">
    <img src="rangana.jpg" alt="Nutrti-Bits" width="100" height="97"/>
    </div>
    <div id="content">
    <p class="content2">
    Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content 
    <br>
    Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content 
    Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content 
    Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content 
    Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content 
    </p>
    </div>
    </div>
    </body>
    </html>
    See if it helps

  • #5
    New to the CF scene
    Join Date
    Feb 2008
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    damn ur on the ball. i was coming back to let you know i found a solution and u had already replied again! as i was sitting typing earlier that i did not want to enlarge the image i came up with a solution that worked quite well. i simply added a small section of transparency to the bottom of the image. the image appears to be the same size as all the others even though it is not and the transparency prevents the text from going under the image. thanks for your help! greatly appreciated.

  • #6
    Senior Coder rangana's Avatar
    Join Date
    Feb 2008
    Location
    Cebu City, Philippines
    Posts
    1,752
    Thanks
    65
    Thanked 372 Times in 365 Posts
    No problem!..You're welcome. Glad I could help


  •  

    Posting Permissions

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