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.

Float Left Obstruction

Featured Replies

Dear All,

 

I am working on a small image gallery using XHTML and CSS. However, rather unfortunately I have fallen upon a slight stumbling block. This one is quite difficult to explain verbally so I have included the following screenshot which should help explain things.

 

Screenshot available via:

http://www.freeuploader.com/out.php?i=47829_screenshot.gif

 

Basically I am using float left just to give the gallery an air of flexibility. Although as you can see from the screenshot, images to get ‘jammed’ unless all the image captions are of a similar length. Is there a way to prevent this without ‘fixing’ the layout or leaving copious amounts of white space?

 

Kind Regards

Les

If you are talking about the one pic thats out of place, I would suggest making a limit to the caption size? so they are always the same "length" regardless of content

  • Author
If you are talking about the one pic thats out of place, I would suggest making a limit to the caption size? so they are always the same "length" regardless of content

 

Thank you 'paperclip'. How might one go about this in CSS?

Hi,

 

You would need to look into "Auto Truncation" - You can use php code that allows you to set a maximum amount of characters used. So you could set a limit of 20 and once that limit is reached it will show ... i.e

 

title here showing trunca...

 

The only way to do this in css is using scroll bars - so you would set a height of the box and add this statement overflow: auto; - this will add a scrollbar.

 

This isnt the prettiest solution so for truncation see the example below.

 

Truncation tutorial here: http://www.totallyphp.co.uk/code/shorten_a_text_string.htm

 

Hope that helps :)

 

Ben

I'm not exactly sure what the problem is - your visual isn't very self explanatory as it just shows one slide on a single row in between two rows of other slides - how is that single slide affected by the text underneath it as they all seem to have a similar text content and text width.

 

Can you exmplain some more?

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.