Tuesday, 10 September 2013

div using css confused using float left and right

div using css confused using float left and right

CSS and a div I'm trying to use float left for image and float right for
the description of it. I can't seem to align them together without
disorganizing their position. I tried adjusting the text but every time
the text is too much, the whole line of paragraph breaks to a new line,
this is what happens.
http://postimg.org/image/b2n0g31sh/
How can I avoid this and make the image stay on it's position and the text
stay to the right, and when reaches its limit it should break to a new
line without disarranging itself from the position float right? This is my
code so far.
http://jsfiddle.net/blackknights/93WGq/
<div id="container" align="center">
<div id="container2">
<div id="wrapper">
<div id="header">
<img src="tsclogo2.jpg" />
</div>
<div id="content">
<div id="menubar">
<ul id="mcolor">
<li><a href="tdesign.html"><font color="#000000">
Home </</a>
</li>
<li class="active"><a href=""><font
color="#000000">About Us</font></a>
</li>
<li><a href="gallery.html"><font
color="#000000">Gallery</font></a>
</li>
<li><a href="contactus.html"><font
color="#000000">Contact Us</font></a>
</li>
</ul>
</div>
</div>
<div id="contentbody">
<div id="contentbodytext">
<div
id="divaboutusintroductionparagraph">&nbsp;&nbsp;INTRODUCTION
PARAGRAPH INTRODUCTION PARAGRAPHINTRODUCTION
PARAGRAPHINTRODUCTION PARAGRAPHINTRODUCTION
PARAGRAPHINTRODUCTION PARAGRAPHINTRODUCTION
PARAGRAPHINTRODUCTION PARAGRAPHINTRODUCTION
PARAGRAPHINTRODUCTION PARAGRAPHINTRODUCTION
PARAGRAPHINTRODUCTION PARAGRAPHINTRODUCTION
PARAGRAPHINTRODUCTION PARAGRAPHINTRODUCTION
PARAGRAPHINTRODUCTION PARAGRAPHINTRODUCTION
PARAGRAPHINTRODUCTION PARAGRAPHINTRODUCTION
PARAGRAPHINTRODUCTION PARAGRAPHINTRODUCTION
PARAGRAPHINTRODUCTION PARAGRAPH</div>
<div id="imageholder">
<img src="bridge.jpg" width="230" height="120" />
<div id="divfloatright">
<p>You rarely hear any entrepreneurs who
succeeded in a snap.
dddddddddddddddddddddddddddddddddd</div>
</div>
</div>
</div>
<!--closing tag for wrapper -->
</div>
<!--closing tag for container2 -->
</div>
<!--closing tag for container -->

No comments:

Post a Comment