You can achieve this effect with no additional markup using pseudo-elements and the adjacent sibling selector (~): li { width: 2em; height: 2em; text-align: center; line-height: 2em; border-radius: 1em; background: dodgerblue; margin: 0 1em; display: inline-block; color: white; position: relative; } li::before{ content: ”; position: absolute; top: .9em; left: -4em; width: 4em; height: .2em; background: … Read more
There is no newline, just the div is a block element. You can make the div inline by adding display: inline, which may be what you want.
Use display: inline-block instead of floatand give the container white-space: nowrap. div#sub > div#ranking { position:relative; top:42px; left:7px; width:722px; height:125px; overflow-x:auto; overflow-y:hidden; white-space: nowrap; } div#sub > div#ranking > div.player { display: inline-block; width:67px; height:120px; margin-left:5px; background-color:#f3e1bb; } Here an example: http://jsfiddle.net/D5hUu/3/
Well, if you really need to use float declarations, you have two options: Use clear: left on the leftmost items – the con is that you’ll have a fixed number of columns Make the items equal in height – either by script or by hard-coding the height in the CSS Both of these are limiting, … Read more
The usual method when not using floats is to use display: inline-block: http://www.jsfiddle.net/zygnz/1/ .container div { display: inline-block; } Do note its limitations though: There is a additional space after the first bloc – this is because the two blocks are now essentially inline elements, like a and em, so whitespace between the two counts. … Read more
Never fails, once I post the question to SO, I get some enlightening “aha” moment and figure it out. The solution: .container { border: 1px solid #DDDDDD; width: 200px; height: 200px; position: relative; } .tag { float: left; position: absolute; left: 0px; top: 0px; z-index: 1000; background-color: #92AD40; padding: 5px; color: #FFFFFF; font-weight: bold; } … Read more
It sure seems to have been asked before (2003), and before (2002), or before (2005) The last link actually suggest a javascript-based solution, but for a fixed (i.e. non fluid) solution. It is consistent however, with other advices found The only way to do that is to put the floated element somewhere in the middle … Read more
Simply use vertical-align: .className { display: inline-block; vertical-align: top; }
Aside from the clear: both hack, you can skip the extra element and use overflow: hidden on the wrapping div: <div style=”overflow: hidden;”> <div style=”float: left;”></div> <div style=”float: left;”></div> </div>
You could put the two floated divs into another one that’s got “overflow: hidden” set: <div style=”overflow:hidden”> <div style=”float: left;”>Left</div> <div style=”float: right;”>Right</div> </div> <div style=”clear: both; margin-top: 200px;”>Main Data</div> edit — To add a bit to this 5-year-old answer: I think the cause of the confusing behavior is the somewhat complicated process of margin … Read more