...

View Full Version : need help with an unusual float in a paragraph



wwiii12364
02-27-2008, 02:30 AM
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

rangana
02-27-2008, 02:47 AM
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


<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 :D

wwiii12364
02-27-2008, 07:46 AM
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.

rangana
02-27-2008, 08:04 AM
You could wrap into another div the contents of those texts. I edited the code to fit your requirements:


<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 :D

wwiii12364
02-27-2008, 08:18 AM
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.

rangana
02-27-2008, 08:24 AM
No problem!..You're welcome. Glad I could help :D



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum