Skip to content
View in the app

A better way to browse. Learn more.

Web Designer Forum

A full-screen app on your home screen with push notifications, badges and more.

To install this app on iOS and iPadOS
  1. Tap the Share icon in Safari
  2. Scroll the menu and tap Add to Home Screen.
  3. Tap Add in the top-right corner.
To install this app on Android
  1. Tap the 3-dot menu (⋮) in the top-right corner of the browser.
  2. Tap Add to Home screen or Install app.
  3. Confirm by tapping Install.

Auto-fit a floated div

Featured Replies

I've got a div that encloses a photo with text to the left of it. Here's the code:

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">

[ ... ]

<div style="width: 500px: margin: auto">

<img src="myimage.jpg" width="200" height="300" style="float: right">

<div style="float: right">
Here is some text that SHOULD appear to the left of the photo.
</div>

</div>

 

The problem is that the div enclosing the text wants to be at 100% width and therefore positions itself below the image.

 

Now in this very simple code, it's obvious that the width of the div text should be 300px, and by specifying that in the div, I'd solve the problem, but it's not always this obvious. Is there anything I can do that will coerce the text div to nestle itself next to the image?

 

Thanks for any help.

Delete the float: right for the text div. You've got the correct order with the floated image div first because if the float: right div is first, it should position itself at the top right and then the text div without a float and without a width will move up on the left if there is enough width.

 

<div style="width: 500px: margin: auto">

<img src="myimage.jpg" width="200" height="300" style="float: right">

<div>
<p>Here is some text that SHOULD appear to the left of the photo.</p>
</div>

</div>

Edited by Wickham

  • Author

Hmm... Apparently I'm not getting my email notifications.

 

Thanks for the help. I'll give that a try.

Create an account or sign in to comment

Account

Navigation

Search

Search

Configure browser push notifications

Chrome (Android)
  1. Tap the lock icon next to the address bar.
  2. Tap Permissions → Notifications.
  3. Adjust your preference.
Chrome (Desktop)
  1. Click the padlock icon in the address bar.
  2. Select Site settings.
  3. Find Notifications and adjust your preference.