Question

i want content NOT to wrap around it’s floating sibling (may it be floating on content’s left or right).

there will be no content following the content so containing floats/realigning baselines is out of the question. i just want content to “stand up and not curl around”

i know this is easily done by putting overflow:auto/hidden on the content – done it many times. however, this time, i cannot because.

• the content will contain an <ul> of inherited width and has box-shadow – content will clip shadows if it has overflow:auto/hidden
• i cannot set padding to the sides of <ul> because it has to be the same width as content.
• i must NOT explicitly set dimensions, paddings and margins in any unit of measure, the same way when i do it when putting overflow:auto/hidden. this includes (but not limited to) adding a margin to move the wrap away from the floating element – the floating element’s content may be dynamic in width.

my html and css is here: http://jsfiddle.net/QQQB5/2/ – but this one uses overflow to prevent wrapping but clips the shadows.

is there any other way to prevent content from wrapping aside from using overflow? as much as possible, no hacks, no “tricks/cheats”. additional mark-up accepted if it can’t be avoided.

Answer 1

Just use float:left on the content container as well and it will be fine 🙂

.content {zoom:1; float:left;}

Update:

Just because the link you provided which is from 2004 used FNE this isn’t the case nowadays.

With CSS3 you just add:

.container:after { 
      content: "";
      display: block;
      clear: both;
 }

and you don’t float everything.