see attached screen shot

A picture 300px (h) x 200px (w) promoted to front page will float or bleed into the next teaser. I would like to show pictures in this height without messing up the design. Please help me realize what I am doing am I doing wrong? Thanks.

CommentFileSizeAuthor
YourAutoRights photo bleed.jpg218.93 KBmjasonbaker

Comments

mjasonbaker’s picture

mjasonbaker commented
Status: Active » Closed (fixed)

I added clear:both; to css for .node-inner. I think this is the right and best solution

bsherwood’s picture

bsherwood commented
Version: 6.x-1.0-beta3 » 6.x-1.x-dev
Status: Closed (fixed) » Active

This does work, but is there a reason why Zen doesn't default to this?

zaglick’s picture

zaglick commented

This solved my problem as well, it might be something the Zen team could add to the CSS commented out it a themer needed it. However, if this is the biggest flaw I have with Zen (and it is) its still a great product

hedley’s picture

hedley commented

I agree I am constantly adding clear: both to node's to prevent things like this happening. Adding .clearfix to the node's class or this:

.node:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

would solve this problem, and would still allow for nodes to be floated next to each other. I can't think of any situation when this behaviour isn't desired, can anyone?

hedley’s picture

hedley commented
Category: support » feature
hedley’s picture

hedley commented
Title: image with height of 300 px bleeds over into node teaser/frontpage » clear nodes
hedley’s picture

hedley commented

Any thoughts on whether this should be included in Zen?

johnalbin’s picture

johnalbin
they/他
Primary language English
Location Taipei, Taiwan
commented
Status: Active » Closed (fixed)

6.x-1.x is in bug fix mode.