Adding overflow: hidden; to the body should solve your problem. It defines a new block formatting context as described in this article: The magic of overflow: hidden. jsFiddle Demo (the body tag is automatically added by jsFiddle, that’s why I haven’t included it in the HTML markup) UPDATE (thx to @clairesuzy): This solution does not … Read more
Position the outer div however you want, then position the inner divs using absolute. They’ll all stack up. .inner { position: absolute; } <div class=”outer”> <div class=”inner”>1</div> <div class=”inner”>2</div> <div class=”inner”>3</div> <div class=”inner”>4</div> </div>
Here is a pure CSS solution. I took this example Check it out if you want to learn more. He also use jQuery Masonry as fallback. CSS: .masonry { /* Masonry container */ -moz-column-count: 4; -webkit-column-count: 4; column-count: 4; -moz-column-gap: 1em; -webkit-column-gap: 1em; column-gap: 1em; } .item { /* Masonry bricks or child elements */ … Read more
This should be all you need. .float-wrap { /* 816 = <number of floats> * (<float width> + 2 * <float border width>) */ width: 816px; border: 1px solid; /* causes .float-wrap’s height to match its child divs */ overflow: auto; } .left-floater { width: 100px; height: 100px; border: 1px solid; float: left; } .outer … Read more
The problem is sub-pixel rounding. When you are designing with percentages there will be times that the math doesn’t result in full pixels (70% of 721px is 504.7px). 721 is arbitrary, but using percentages you’ll run into arbitrary numbers. There’s no avoiding that. Most browsers figure out a rounding solution for you that doesn’t break … Read more
Assuming the element which is floated and will be centered is a div with an id=”content” … <body> <div id=”wrap”> <div id=”content”> This will be centered </div> </div> </body> And apply the following CSS: #wrap { float: left; position: relative; left: 50%; } #content { float: left; position: relative; left: -50%; } Here is a … Read more
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
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
Very simple answer for this problem that seems to catch a lot of people: <img src=”https://stackoverflow.com/questions/11411219/url-to-image”> <p>Nullam id dolor id nibh ultricies vehicula ut id elit.</p> img { float: left; } p { overflow: hidden; } See example: http://jsfiddle.net/vandigroup/upKGe/132/
Another option is, instead of floating, to set the white-space property nowrap to a parent div: .parent { white-space: nowrap; } and reset the white-space and use an inline-block display so the divs stay on the same line but you can still give it a width. .child { display:inline-block; width:300px; white-space: normal; } Here is … Read more