1 Replies - 527 Views - Last Post: 21 December 2011 - 02:15 AM

#1 unleashreality  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 1
  • Joined: 18-December 11

Overflow-x problem

Posted 18 December 2011 - 07:38 AM

Hey everyone! :)

I'm having trouble with overflow-x at the home page of my site http://www.unleashreality.com/

The set of 3 posts next to each other has a small orange banner with the number of comments and has a negative margin to create a ribbon effect. Then I have an excerpt beneath the image for each which runs beyond the height of each of the 3 post blocks. I want the excerpt to be cut off so that each of the 3 blocks are the same height so i need the vertical overflow to be hidden but the horizontal overflow to be visible for the ribbons to work.

using overflow-x:visible; overflow-y:hidden; doesn't seem to be working. I have read elsewhere that it may have to do with the doctype.

Any ideas or tips would be much appreicated :)

Thank you and have a great day,
Alex

Is This A Good Question/Topic? 0
  • +

Replies To: Overflow-x problem

#2 cupidvogel  Icon User is offline

  • D.I.C Addict

Reputation: 31
  • View blog
  • Posts: 593
  • Joined: 25-November 10

Re: Overflow-x problem

Posted 21 December 2011 - 02:15 AM

Well, this is a difficult issue. Firstly, if you fix a fixed width for the div (or p) for your content, then your content will expand horizontally to that width, and the vertical content will be displayed accordingly, and the rest will be clipped. If you don't set a fixed width, the container will expand to fill the entire page horizontally, while the vertical overflow will again be determined accordingly. If you set the vertical overflow to be hidden and the horizontal overflow visible, the former will dominate, and you will find that the content is limited to the prescribed width, while hiding (if necessary) vertically only. If it has to overflow horizontally and hide vertically, it won't know which one to obey, so it will hide vertically. Height always dominates width, so that if you try to fill a small div of fixed height and width with large content, it will naturally overflow vertically while remaining within the prescribed width (if you are mischievous and use abnormally long words instead, these words will be exceptions and will jut out of the box horizontally. This can be suppressed by using word-wrap: break-word; ). Barring this case, it's not possible to overflow horizontally, even with fixed height, the content will always overflow vertically instead of horizontally
Was This Post Helpful? 1
  • +
  • -

Page 1 of 1