www.webdeveloper.com
Results 1 to 2 of 2

Thread: How to make float not overlap other text

Hybrid View

  1. #1
    Join Date
    Mar 2008
    Posts
    70

    Question How to make float not overlap other text

    I'm floating the green box to the right and I want it to go to the right but find space for itself where it doesn't overlap other things. I thought that's what float is supposed to do? Since there is not enough room to the right of the text, it should go below the text. I want the float to decide based on the size of the red div whether it can fit or not and I want it to never overlap anything.

    HTML Code:
    <html>
    <body>
    	<div style='width:188px;height:333px;border:1px solid blue'>
    		<div style='width:99px;height:99px;display:inline-block;background-color:green;overflow:hidden;float:right;'>green box</div>
    		<div>
    			<div style='white-space:nowrap;border:1px solid red'>asdf asdf asdf asdf</div>
    		</div>
    	</div>
    </body>
    </html>

  2. #2
    Join Date
    May 2009
    Location
    Rochester, NY
    Posts
    364
    Try putting the red div as a float. I don't know if that will push the green box downward when the text gets too large, but it might.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles