Overflow-X problem :)

**unleashreality** · Dec 18, 2011 08:37

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

**Paul O'B** · Dec 18, 2011 14:39

Hi,

The ribbons are cut off because your post block parent is set to overflow:hidden;. It's this element that is cutting the ribbons short.

Code:

div.post-block {
    float: left;
    height: 480px;
    margin-right: 15px;
    overflow: hidden;
    padding-bottom: 10px;
    width: 310px;
}

It's floated so doesn't need overflow:hidden for float clearing but for some reason you have given it a height and then cut off all the content. Seems a bit weird to me. You seldom want to set heights on elements that hold text.

**unleashreality** · Dec 18, 2011 15:17

hey paul, thanks for your reply

I have the parent set to overflow hidden because I want each of the post blocks (and consequently the row of three) to have the same height. Each has a different title so therefore the height of the excerpt below is unknown a priori. I'm using wordpress and, as far as I can tell, I have to pre-set the number of characters to be displayed for the excerpt. What i've decided to do is to just display more excerpt than would be shown and set the overflow to be hidden so that it gets cut off and fills the space. So that's why i need to hide the overflow on the vertical but i need the horizontal overflow to be visible.

I've uploaded the stylesheet with overflow-x:visible, overflow-y:hidden and when i inspect in chrome, it says that these attributes are set but the horiozontal overflow is still hidden.

heeeelp

really appreciate your input.
thanks again
alex

**ralph.m** · Dec 19, 2011 03:53

What you are doing here is really not practical at all, and will most likely make life a lot harder for visitors—which you can't afford. As Paul says, setting heights on text containers is a disaster, as is horizontal scrolling. It would be better to let each box sit be low the next and find its own natural height—better for the layout and better for visitors, who can then follow the posts down the page instead of scanning over columns and scrolling to see hidden content.

**unleashreality** · Dec 19, 2011 10:00

why is it a disaster? I don't want horizontal scrolling. All I want is for the negative-margin of the ribbon to not be hidden by setting overflow to hidden of the entire element and rather want the horizontal overflow to be visible and the vertical overflow to be hidden.

Please read the question again and, if you can, address the problem at hand rather than suggesting I 'fix' it by changing my design

**Paul O'B** · Dec 19, 2011 15:52

You can't set -y to hidden and -x to visible because if y-is hidden then x is reset to be hidden also.

According to the specs "some combinations with ‘visible’ are not possible: if one is specified as ‘visible’ and the other is ‘scroll’ or ‘auto’, then ‘visible’ is set to ‘auto".

You could move your arrow outside of the div if there were no immediate parents that had position:relative set but unfortunately you have quite a few.

e.g. This allows an element to move outside of an overflow:hidden box:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type"text/css">
.wrap {
	padding:40px;
	position:relative;
	width:600px;
	border:1px solid red;
}
.test {
	width:500px;
	height:500px;
	overflow:hidden;
	border:1px solid #000;
	margin:100px;
}
.outside {
	position:absolute;
	width:100px;
	margin:0 0 0 -30px;
	background:red
}
</style>
</head>

<body>
<div class="wrap">
		<div class="test">
				<p>Lorem ipsum text Lorem ipsum textLorem ipsum textLorem ipsum textLorem ipsum textLorem ipsum textLorem ipsum textLorem ipsum textLorem ipsum textLorem ipsum textLorem ipsum textLorem ipsum textLorem ipsum textLorem ipsum textLorem ipsum textLorem ipsum textLorem ipsum textLorem ipsum textLorem ipsum textLorem ipsum textLorem ipsum textLorem ipsum textLorem ipsum textLorem ipsum textLorem ipsum textLorem ipsum textLorem ipsum textLorem ipsum textLorem ipsum textLorem ipsum textLorem ipsum textLorem ipsum textLorem ipsum textLorem ipsum text</p>
				<p class="outside">Outside</p>
				<p>Lorem ipsum text Lorem ipsum textLorem ipsum textLorem ipsum textLorem ipsum textLorem ipsum textLorem ipsum textLorem ipsum textLorem ipsum textLorem ipsum textLorem ipsum textLorem ipsum textLorem ipsum textLorem ipsum textLorem ipsum textLorem ipsum textLorem ipsum textLorem ipsum textLorem ipsum textLorem ipsum textLorem ipsum textLorem ipsum textLorem ipsum textLorem ipsum textLorem ipsum textLorem ipsum textLorem ipsum textLorem ipsum textLorem ipsum textLorem ipsum textLorem ipsum textLorem ipsum textLorem ipsum textLorem ipsum text</p>
		</div>
</div>
</body>
</html>

Or maybe you could restructure the overflow:hidden container to have say 10px padding each side and then you could drag the arrow into the padding and it would not be hidden.

User Tag List

Thread: Overflow-X problem :)

Thread Tools

Display

Overflow-X problem :)

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions