3 Replies - 608 Views - Last Post: 02 July 2012 - 08:02 PM

#1 0rchid0  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 14
  • Joined: 20-June 12

Float property not working for word-wrap! >:0

Posted 02 July 2012 - 02:23 PM

I've scoured my code for an answer, but I can't sort out why this float property isn't working to wrap text around the image in this div. The div in question is "rightside". The image is supposed to be padded into the bottom right corner. It does that, nicely. But, the text which starts above it, and *should* wrap around it from the left...only pushes it down when I add more lorem ipsum gobbledy gook. Any guesses as to why float: (blah) won't work? Any help is much appreciated.


#mainwrapper {
	
	margin-top: 100px;
	margin-left: 210px;
	padding: 0px;
	overflow: hidden;	
	
}


#leftside {
	
	width: 290px; 
	border: 1px solid teal; 
	float: left;
	
}


#leftside p {
	
	padding: 5px;
}


#leftside img {
	
	padding: 5px;
	
}


#rightside {
	
	width: 615px; 
	border: 1px solid teal; 
	float: right;
	margin-right: 280px;
	
	
}

#rightside img {
	
	margin: 2px;
	float: right;
	padding: 5px;
}
		
#rightside p {
	
	padding: 5px;
	img float: right;
}




aaaaand.... The HTML

<div id="bodycontent">
		
		<div id="leftside">
			<img src="fillerphoto.jpg">
			<p>
				Quis dolor a dui faucibus porta. Morbi eget nibh non nibh 
				mattis aliquam. Donec libero enim, molestie at aliquet et, 
				ultricies ut urna. Nunc a odio quis ipsum luctus adipiscing. 
				Proin libero purus, pellentesque id ultrices quis, suscipit 
				ac lectus. Morbi eget nibh non nibh 
				mattis aliquam. Donec libero enim, molestie at aliquet et, 
				ultricies ut urna. </p>
		</div>
		
		<div id="rightside">
			
		   <p>  Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
				Nunc sed nunc metus, sed auctor arcu. Praesent sed nisi 
				et nunc facilisis consectetur quis lacinia mauris. Morbi 
				quis dolor a dui faucibus porta. Morbi eget nibh non nibh 
				mattis aliquam. Donec libero enim, moles......    
				
				</p>
				<p></p><img src="blah.jpg" class="rightside"></p>
		
		
		</div>



Is This A Good Question/Topic? 0
  • +

Replies To: Float property not working for word-wrap! >:0

#2 e_i_pi  Icon User is offline

  • = -1
  • member icon

Reputation: 795
  • View blog
  • Posts: 1,681
  • Joined: 30-January 09

Re: Float property not working for word-wrap! >:0

Posted 02 July 2012 - 03:55 PM

You need to:
  • Put float attributes on the correct classes in your CSS
  • Put your DOM elements in the correct order
  • Make sure you have closed off DOM elements

Try this instead:
<style>
#mainwrapper {
	margin-top: 100px;
	margin-left: 210px;
	padding: 0px;
	overflow: hidden;	
}


#leftside {
	width: 290px; 
	border: 1px solid teal; 
	float: left;
}


#leftside p {
	padding: 5px;
}


#leftside img {
	float: left;
	padding: 5px;
}


#rightside {
	width: 615px; 
	border: 1px solid teal; 
	float: right;
	margin-right: 280px;
}

#rightside img {
	margin: 2px;
	float: right;
	padding: 5px;
}
		
#rightside p {
	padding: 5px;
	float: right;
}
</style>
<div id="bodycontent">
	<div id="leftside">
		<img src="fillerphoto.jpg">
		<p>
			Quis dolor a dui faucibus porta. Morbi eget nibh non nibh 
			mattis aliquam. Donec libero enim, molestie at aliquet et, 
			ultricies ut urna. Nunc a odio quis ipsum luctus adipiscing. 
			Proin libero purus, pellentesque id ultrices quis, suscipit 
			ac lectus. Morbi eget nibh non nibh 
			mattis aliquam. Donec libero enim, molestie at aliquet et, 
			ultricies ut urna.
		</p>
	</div>
	<div id="rightside">
		<img src="blah.jpg" class="rightside">
		<p>
			Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
			Nunc sed nunc metus, sed auctor arcu. Praesent sed nisi 
			et nunc facilisis consectetur quis lacinia mauris. Morbi 
			quis dolor a dui faucibus porta. Morbi eget nibh non nibh 
			mattis aliquam. Donec libero enim, moles......    
		</p>
	</div>
</div>


Was This Post Helpful? 1
  • +
  • -

#3 0rchid0  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 14
  • Joined: 20-June 12

Re: Float property not working for word-wrap! >:0

Posted 02 July 2012 - 04:59 PM

@e_i_pi - I appreciate your help, very much. Tried this. It did not work, though. Still encountering the same problem. I actually had the float attributes applied to those particular classes, when I was trying to sort out a way to clear up this problem, before posting anything on DIC. I've troubleshooted quite a bit, and I'm still totally stumped.

I'm not sure what you mean by "DOM elements". I searched out Document Object Models, and I've not gleaned anything more specific than that there is a hierarchical structure, to which I should be adhering. I would be very happy to know more about this. Could you please elaborate?
Was This Post Helpful? 0
  • +
  • -

#4 e_i_pi  Icon User is offline

  • = -1
  • member icon

Reputation: 795
  • View blog
  • Posts: 1,681
  • Joined: 30-January 09

Re: Float property not working for word-wrap! >:0

Posted 02 July 2012 - 08:02 PM

If you run the code I wrote in a browser, it displays as you intend it I believe. The changes I have made are:
  • Added float: left to the #leftside img selector in your CSS
  • Changed img float: right to float: right on the #rightside p selector in your CSS
  • Fixed up the HTML (i.e. - the DOM elements) in the rightside of your HTml (you had an empty <p> element, and a extra </p> element that would have caused problems)
  • Moved the <img> in the rightside DOM element to the top of the element.

In regards to the DOM elements, HTML behaves the same as XML - it needs an equal number of opening tags as closing tags, and the opening and closing orders need to be the same. For example, your code was like this:
<div id="bodycontent">
	<div id="leftside">
		<img src="fillerphoto.jpg">
		<p></p>
	</div>
	<div id="rightside">
		<p></p>
		<p></p>
		<img src="blah.jpg" class="rightside">
		</p>
	</div>
</div>


...whereas it should have been like this...
<div id="bodycontent">
	<div id="leftside">
		<img src="fillerphoto.jpg">
		<p></p>
	</div>
	<div id="rightside">
		<img src="blah.jpg" class="rightside">
		<p></p>
	</div>
</div>


Notice how your code had a closing </p> without a relative opening <p>?
Was This Post Helpful? 1
  • +
  • -

Page 1 of 1