I have created div grid system with HTML and CSS using the float:left method.
It works fine, however whenever there is a variable height difference between two divs in the same row, the next div starts at the bottom most position just below the div that has the greatest height.
Here's the codepen:
http://codepen.io/anon/pen/GJZWoX
CSS:
.parent{
width:330px;
}
.red{
float:left;
width:150px;
height:150px;
margin-bottom:10px;
margin-left:10px;
background-color:red;
}
.blue{
float:left;
width:150px;
height:300px;
margin-bottom:10px;
margin-left:10px;
background-color:blue;
}
Is there a way to solve this error using just css? Any good answer would be appreciated.
This is what I'm looking for:
Thank you
Just CSS? With flexbox you could http://demosthenes.info/blog/844/Easy-Masonry-Layout-With-Flexbox
But I would opt for Javascript as a more robust (and slightly better browser support at the time of posting) approach.
via JQuery Masonry http://masonry.desandro.com/ (supported from IE9+)
Related
Starting with this fiddle we see a basic animation of a box flying from its start position to its finish position. This is the known good code. (I tried it as a stackoverflow snippet, but it didn't work here for some reason.)
HTML
<div id="start">Start</div>
<div id="finish">Finish</div>
<div id="fly">Fly</div>
CSS
#start{
position:absolute;
background:red;
height:100px;
width:100px;
line-height:100px;
text-align:center;
left:0px;
}
#finish{
position:absolute;
background:blue;
height:100px;
width:100px;
line-height:100px;
text-align:center;
left:200px;
}
#fly{
position:absolute;
background:yellow;
height:100px;
width:100px;
line-height:100px;
text-align:center;
left:0px;
transition:1000ms;
}
#fly.finish{
left:200px
}
JavaScript
document.getElementById("fly").className = "finish";
-
Unlike the fiddle above this fiddle below however does not work. Rather than transitioning gently from the start location to the finish, it starts at the finish. This is because it should transition from a "left" property to a "right" property.
HTML
<div id="start">Start</div>
<div id="finish">Finish</div>
<div id="fly">Fly</div>
CSS
#start{
position:absolute;
background:red;
height:100px;
width:100px;
line-height:100px;
text-align:center;
left:0px;
}
#finish{
position:absolute;
background:blue;
height:100px;
width:100px;
line-height:100px;
text-align:center;
right:0px;
}
#fly{
position:absolute;
background:yellow;
height:100px;
width:100px;
line-height:100px;
text-align:center;
left:0px;
right:auto;
transition:1000ms;
}
#fly.finish{
right:0px;
left:auto;
}
Javascript
document.getElementById("fly").className = "finish";
Although I understand why this doesn't work, I need a box to fly to the right of the screen from just off the left edge of the screen. Most solutions to this issue either look strange on extremely wide screen devices, or have a slow response time on narrow mobile devices. I want an animation that's responsive to browser width, travelling more slowly across narrow screens and more quickly across wide screens.
What is the most elegant solution for this?
Ideally I'd like not to use any external libraries, but if I must, the page is already using jquery, so that would be the ideal one to use if that helps.
I'm not opposed to writing extremely long JavaScript functions, but shorter is always better.
As you know that the animation doesn't work cause can't animate two different attributes, in this case, changing left and right value in hope for the element to be animated.
My suggestion would be this:
#fly.finish {
left:calc(100% - 100px);
}
this is assuming that the box is always 100px width. Hope it helps!
Change your flying elements "left" property to (100% - elements width) as shown below.
#fly.finish{
left: calc(100% - 100px);
}
Can someone please explain to me why i can't get the "Ken Burns" effect to show up properly when increasing the size of my images?
I pretty much tried hacking away at this with different images and different CSS settings but I really can't get them stacked and not floating outside the box. It's not interference with my CSS, as I tried it standalone as well.
I would like to have a banner with say a max of 1200x600 that fits the width of the screen. Please provide complete CSS.
https://codepen.io/planetgrafix/pen/erAcF
#slideshow {
position:relative;
width:800px;
height:400px;
overflow:hidden;
border:8px solid #ccc;
}
slideshow img {
position:absolute;
width:360px;
height:240px;
top:50%;
left:50%;
margin-left:-180px;
margin-top:-120px;
opacity:0;
snip...
https://gist.github.com/pithyless/1861253
Thank you.
I'm trying to make a fullscreen site, also responsive, but on smaller screens the elements in the container overflow making it not 100% it varies depending on how many items are in it. Using:
top:100%;
position:relative;
width:100%;
height:100%
works, only if the screen is a certain size, on mobile devices using that it doest work, and appears half on the previous container.
Is there a way to position from the bottom of the element rather than top?
http://jsfiddle.net/q8tvwm2k/2/
Update:
Never minds found a pretty bad but working solution.
I'm pretty sure you really want a position:absolute to have another div relative to it. You just didn't word the question correctly. position:relative sets the point to which its children can be position:absolute, which is where you want to use top and the like. This is the structure you need to see:
HTML
<div class='surround'>
<div class='inside'>
<div class='outer'>
<div class='inner'>
</div>
</div>
</div>
</div>
CSS
.surround{
position:relative;
}
.inside{
height:100px; width:100px; position:absolute; top:100px; left:100px;
}
.outer{
height:100px; width:100px; position:relative;
}
.inner{
position:absolute; top:30px; left:10px;
}
I am trying to inject a banner div
<div id='banner'></div>
on top of an existing webpage in such a manner so that when a person scrolls the webpage the banner remains on top. Also the webpage should be pushed down by the banner so that every part of the page remains accessible.
Here is my CSS:
#banner {
position:fixed;
display:block;
top:0px;
background-color:#FFFFFF;
width:100%; height:250px;
border:2px solid;
}
Here is my jquery:
$("body").prepend("<div id='banner'></div>");
I tried using jquery to find all divs that were fixed and changing them to relative before executing the above line but still the banner does not work. The error is shown in the following picture https://drive.google.com/file/d/0B0sCu8aj8zu2akhtcEdtajJJZEU/edit?usp=sharing
Please Help.
And I am not looking for ad revenue here this is just a practice task.
Here is a jsFiddle I have created. The banner div is at the top of the page.
It stays at the top while scrolling.
The HTML:
<div class="page">
</div>
The css:
.oldBody
{
width:100%;
height: 3000px;
background-color: navy;
margin-top:250px;
}
#banner
{
position:fixed;
top:0px;
background-color:#FFFFFF;
width:100%;
height:250px;
border:2px solid;
z-index:10000;
}
The JS:
$("body").wrapAll("<div class='oldBody'></div>");
$("body").prepend("<div id='banner'></div>");
Please maintain z-index of banner div.Z-index should be grater then other div on that page.
#banner {
position:fixed;
display:block;
top:0px;
background-color:#FFFFFF;
width:100%; height:250px;
border:2px solid;
z-index : 99999
}
i'd just like to present a different way to create the element:
var $banner = $('<div/>', { 'id' : 'banner' });
$('body').prepend($banner);
this technique for creating elements with jquery comes in handy when you have several different element to create. as a note, you can also create the element like so:
var $banner = $('<div/>').attr('id', 'banner');
I think the best way is first keep your ad on top in relative position when a person scroll page your function check the page-scroll .scrollTop() and then add fixed position on banner ad container just like freeze header, if you need further help in this regard let me know, I will provide you code. thanks I hope this technique will help you
It is a grid structured content similar to this:
<div id="gridBlock">
<div class="list-lot-item">
<div class="list-lot-item-info">
<div class="list-lot-item-col2"></div>
<div class="list-lot-item-col3"></div>
</div>
</div>
<div class="list-lot-item">....</div>
</div>
with some CSS like so (but more in JSFiddle):
#gridBlock .list-lot-item{
float:left;
position:relative;
height:25px;
width:50px;
border:1px solid #fff;
padding-left:2px;
}
#gridBlock .list-lot-item-info,
#gridBlock .list-lot-item-info-on{
display:block;
position:absolute;
background-color:#fff;
border:1px solid #fff;
width:50px;
}
#gridBlock .list-lot-item-info{
z-index:199;
}
#gridBlock .list-lot-item-info-on{
border:1px solid red;
top:0;
z-index:200;
position:relative;
background-color:yellow;
}
#gridBlock .list-lot-item-col2,
#gridBlock .list-lot-item-col3{visibility:hidden;}
#gridBlock .list-lot-item-info-on .list-lot-item-col2,
#gridBlock .list-lot-item-info-on .list-lot-item-col3{visibility:visible;}
where for each box "hover" state I apply a new "on" class with higher z-index:
$('#gridBlock .list-lot-item').hover(
function(){$(this).children(0).removeClass("list-lot-item-info");$(this).children(0).addClass("list-lot-item-info-on");},
function(){$(this).children(0).removeClass("list-lot-item-info-on");$(this).children(0).addClass("list-lot-item-info");}
);
It works perfect, obviously, in FF, Chrome, IE8+ but our old little friend IE7 is weak. Please try in Compatibility Mode and see it:
Live Demo in Action
IE7 pops the hovered box under the neighboring grid boxes when it should be visa-verse. Any good suggestion how to fix it?
I don't have access to any versions of IE to test this as I work on Ubuntu.
But, my understanding is that z-index depends on the position:absolute;
Try it out removing position:relative; from #gridBlock .list-lot-item-info-on
If this happens to break your design, you could reset it with margins too.
Add this:
#gridBlock .list-lot-item:hover {
z-index:200;
}
Since IE7 is very strict with z-indices. Take your .list-lot-item they all have the same z-index value (which is nothing) so whichever come last are on top of the earlier ones. And they cannot break out of the order of the parents.
Take elements A and B, which have a z-index of 1 and 2 respectively, any child of A, no matter how high the z-index will appear under B. IE7/8 is very strict about this.
JSFiddle