Wrapping text around image thats in a div

papillonstudios · May 3, 2011

I am having troubles with my css code.

I am trying to wrap text around an image that is contained in a div but when i try 'float:right' the image get taken out of the div.

I have also tried using position:relative but as i thought it just puts the image over top of the text.

heres my code

.leftPost img {
     float:left;
}

<div class="leftPost"> 

			       				<div class="post-cat-three"> 
    			    			
    			
    		<!-- Display the Title as a link to the Post's permalink. --> 
    					<h2> 
    						<a href="http://localhost:8888/TerranFarms/?p=1" rel="bookmark" title="Permanent Link to Welcome!!"> 
    							<h2>Welcome!!</h2>    						</a> 
    					</h2> 
            
             			<!-- Display the Post's Content in a div box. --> 
             			<div class="entry"> 
        	 			<div class="text"><p>Happy Holidays everyone!!!</p> 
<div>Welcome to TerranFarm Equine Products, dealers for Mar-Weld and Duralume Aluminum Products, specializing in Round Pens, Horse Stalls and Gates.</div> 
<div><a href="http://localhost:8888/TerranFarms/wp-content/uploads/2011/04/pic.png"><img class="image alignright" title="pic" src="http://localhost:8888/TerranFarms/wp-content/uploads/2011/04/pic.png" alt="" width="250" height="188" /></a></div> 
</div        
               
             		</div>

FYI this is for a wordpress template and i have tried using the image align in wordpress but it doesnt change anything

heres is all my css

#wrapper {
width:662px;
height:200px;
position: absolute;
left:50%;
margin-left:-331px;
}

#logo {
background: url(images/logo.png);
width:378px;
height: 128px;
position:absolute;
left:50%;
margin-left:-188px;
top:70px;
}

#navigation {
background: url(images/navbarbg.png);
width:662px;
height:66px;
position:absolute;
top:264px;
}

#navigation a {
text-decoration: none;
color: black;
font-size: 18px;	
}

#navigation #home {
position: absolute;
left:20px;
top:15px;
}

#navigation ul {
position: absolute;
top:23px;
left:57px;
}

#navigation ul :hover {
color: blue;
height: 50px;
}

#navlist li {
display: inline;
list-style-type: none;
padding-left: 20px;
padding-left: 20px;
}

#content {
background: url(images/contentbg.png);
width: 662px;
height: 738px;
position:absolute;
top:356px;
}

.postContainer {
margin: 25px;
}

.leftPost {
background: #999; /* for non-css3 browsers */

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#d5d3c6', endColorstr='#9f8b73'); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#d5d3c6), to(#9f8b73)); /* for webkit browsers */
background: -moz-linear-gradient(top,  #d5d3c6,  #9f8b73); /* for firefox 3.6+ */ 


}

.leftPost h2 {
background: #999; /* for non-css3 browsers */

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#b7663a', endColorstr='#6a280e'); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#b7663a), to(#6a280e)); /* for webkit browsers */
background: -moz-linear-gradient(top,  #b7663a,  #6a280e); /* for firefox 3.6+ */ 
padding: 5px;
}

.leftPost a {
color: white;
text-decoration: none;
font-family: Arial;

}

.leftPost .text {
padding: 10px;
}

#footer {
width:180px;
position:absolute;
left:50%;
margin-left: -90px;
text-align: center ;
top:1107px;
font-family: Arial;
font-size: 9px;
}

Zane · May 3, 2011

If I had to guess, it's because you're floating the img and not the A anchor tag that the image is in. You need to assign a class to that anchor tag and float that instead.

papillonstudios · May 3, 2011

its floating to the right but its taken out of the div

papillonstudios · May 3, 2011

I need a answer quick!

cssfreakie · May 3, 2011

I need a answer quick!

?? and your paying? indeed nothing

if you want a quick answer put it online somewhere so we don't have to first download it and run it on our own servers.

cssfreakie · May 3, 2011

have a look at this source. i quickly made a wrapper div, with a fixed width. inside that is a paragraph without an image and another with an image inside. maybe this is what you are looking for. this works out of the box.

<!DOCTYPE html
     PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />       
        <link type="text/css" rel="stylesheet" href="css/style.css" />
        <title></title>
<style type="text/css">
.wrapper{ width:500px;overflow:hidden;background:#9f9f9f;padding:20px;position:relative;}
.wrapper img{width:200px;float:left;padding:10px; }
</style>
    </head>
    <body>
      <div class="wrapper">
          <img src="http://kristinasa.files.wordpress.com/2010/08/patience.gif" alt="" />
          <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
            
          </p>
          <hr />
          <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro
              <img src="http://kristinasa.files.wordpress.com/2010/08/patience.gif" alt="" />
              quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

          </p>
      </div>
    </body>
</html>

live example here: http://cssfreakie.webege.com/phpfreaks/wraptext.php

papillonstudios · May 3, 2011

that would work but the div is inside of another which is why im having the issue

ex

<div>

Text

image

Text

</div>

I have done this before but i have a fixed height and put the text with an overflow if it was longer than the space available. But I want to avoid that

cssfreakie · May 3, 2011

sorry i don't see any problem of a div in a div apart from do you really need that. As already said an online example is always easier to debug stuff. (since you made your business of it, i bet you agree with that)

the logic is exactly the same use an id or class and set properties to the inner elements, i already showed how to, the only thing is to adapt it to your code. If you have an online example i am happy to take a look, but as far as i can tell from your explanation this how to do it.

in case you can only set a class or ide to the outer div, do like this

div.classname div{
property:xxx;
}

papillonstudios · May 3, 2011

i changed my design a little

Sign In

Wrapping text around image thats in a div

Recommended Posts

papillonstudios

Link to comment

Share on other sites

Zane

Link to comment

Share on other sites

papillonstudios

Link to comment

Share on other sites

papillonstudios

Link to comment

Share on other sites

cssfreakie

Link to comment

Share on other sites

cssfreakie

Link to comment

Share on other sites

papillonstudios

Link to comment

Share on other sites

cssfreakie

Link to comment

Share on other sites

papillonstudios

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information