You have a few options. Use white-space:nowrap; and some padding. Use overflow: scroll;, which adds an extra scrollbar on the bottom, but fixes the wrapping problem in Firefox. Use overflow-y:scroll which is CSS3 and is supported by only modern browsers.
I recently read about a very clever technique to do exactly what you’re asking. In short, you just need to use text-align:justify; on the container element to achieve this, in conjunction with an extra invisible block at the end. This works because inline-block elements are seen as being part of the text content, each being … Read more
.div1{ margin:0 auto; width:100px; height:50px; border:5px solid #995555; } .div2{ width:100px; margin:0 auto; border:5px solid #aaaa55; height:200px; } .div3{ float:right; width:50px; height:100px; border:5px solid cyan; } <div class=”div1″>div1</div> <div class=”div3″>div3</div> <div class=”div2″>div2</div> Demo also at http://jsfiddle.net/XjC9z/1/
vertical-align:top on the elements that you want to be vertically aligned (not on the parent), as they are display:inline-block.
This works on Chrome. h2 { width: fit-content; }
SVG is inline by default. Add display: block to it and then margin: auto will work as expected. Or depending on your layout you may want to keep SVG inline and set text-align: center on a parent element instead. As another alternative, you can center SVG using flex or grid layouts on the parent element.
I can think of five ways to potentially accomplish your goal: Use negative margins on the inner element to move it outside of the parent Use Javascript to move the inner element outside of the parent. Change the source code and move the inner element outside of the parent. Use position: fixed on the inner … Read more
You can use position: absolute and top–margin-top to vertically align something whose height you know, and line-height to give a single line of text a known height with the text in the middle: h1 { left: 0; line-height: 200px; margin-top: -100px; position: absolute; text-align: center; top: 50%; width: 100%; } <h1>Hello, world!</h1>
Using this HTML: <div id=”myElement” style=”position: absolute”>This stays at the top</div> This is the javascript you want to use. It attaches an event to the window’s scroll and moves the element down as far as you’ve scrolled. $(window).scroll(function() { $(‘#myElement’).css(‘top’, $(this).scrollTop() + “px”); }); As pointed out in the comments below, it’s not recommended to … Read more
By default, a block-level element will expand to fill as much width as possible. So its width is basically “100%” (sort of) and you’re saying a maximum of 1000px, so it’s expanding to the maximum of 1000px. The minimum width is still being achieved (it’s at least 500px). Try setting display: inline-block on the element … Read more