There are two solutions I can think of quickly off the top of my head. You can either give the #headercontainer element a z-index CSS property… #headercontainer { /* … other CSS … */ z-index: 1000; } … or you can do it the way I think it should be done… #headercontainer { /* … … 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
Here’s one way to do it. I’m randomly varying the size of the div within a fixed range, then setting the position so the object is always placed within the current window boundaries. (function makeDiv(){ // vary size for fun var divsize = ((Math.random()*100) + 50).toFixed(); var color=”#”+ Math.round(0xffffff * Math.random()).toString(16); $newdiv = $(‘<div/>’).css({ ‘width’:divsize+’px’, … Read more
Viewport units for CSS 1vw = 1% of viewport width 1vh = 1% of viewport height This way, you don’t have to write many different media queries or javascript. If you prefer JS window.innerWidth; window.innerHeight;
instead of doing it like that, why not just make the flyout position:fixed, top:0; left:0; once your window has scrolled pass a certain height: jQuery $(window).scroll(function(){ if ($(this).scrollTop() > 135) { $(‘#task_flyout’).addClass(‘fixed’); } else { $(‘#task_flyout’).removeClass(‘fixed’); } }); css .fixed {position:fixed; top:0; left:0;} Example
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
You should use a sticky footer solution such as this one : * { margin: 0; } html, body { height: 100%; } .wrapper { min-height: 100%; height: auto !important; height: 100%; margin: 0 auto -142px; /* the bottom margin is the negative value of the footer’s height */ } .footer, .push { height: 142px; … Read more
Static positioning is the default positioning model for elements. They are displayed in the page where they rendered as part of normal HTML flow. Statically positioned elements don’t obey left, top, right and bottom rules: Relative positioning allows you to specify a specific offset (left, top etc) which is relative to the element’s normal position … Read more
SVG is inline by default. Add display: block to it and then margin: auto will work as expected.
z-index is relative. See this detailed answer, which I wrote for a similar question. If none of the other elements have a defined z-index, using z-index: 1 will be fine. Model: How is the z-index determined? z-index <div id=A> Auto 1 <div id=B> Auto 1.1 <div id=C style=”z-index:1″></div> Manual 1 <div id=D></div> Auto 1.1.2 </div> … Read more