HTML / CSS float left auto-fill the gap
I have created a dashboard that connects to sql to get the job status. each set of jobs is mapped to a Div set to float on the left. if all is well it looks like this:
when there is an error, the div containing the assignment is automatically expanded to show the assignment and then looks like this:
I was wondering if there is a way for the other divs to adjust and move to white space? I guess it won't be possible using only HTML and CSS, so I'm willing to use jquery if anyone knows of any add-ons that can easily do this!
Thank!
source to share
I think float:left
creates its own block
you need to use display property
here is the example you need:
ul {display:table;}
ul li {display:table-cell;}
and if you want to keep the div property float:left;
you need to provide position:absolute
the error parts (main error tag).
or after seeing the error, you can use the jquery hide event when the user clicks the close button then it will be hidden.
JS Fiddle
Link: http://jsfiddle.net/abidkhanweb/mqz9j060/2/
Try the following:
$('.close').click(function() {
$(this).parent().hide();
});
.main{ width:100%;}
.sub{width:23%; position:relative; background:green; height:80px; float:left; margin:1%;}
.sub .error{position:absolute; width:100%; left:0px; top:0px; background:red; height:100px; z-index:10;}
.sub .error .close{position:absolute; right:10px; top:10px; text-align:center; font-size:11px; background:#FF0; height:20px; width:35px; cursor:pointer; content:"";}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="main">
<div class="sub"></div>
<div class="sub">
<div class="error">
<span class="close">close</span>
</div>
</div>
<div class="sub"></div>
<div class="sub"></div>
<div class="sub"></div>
<div class="sub"></div>
<div class="sub"></div>
<div class="sub"></div>
</div>
source to share