Check out this Demo Fiddle: http://jsfiddle.net/UI_Designer/2gqy9s9k/1/
The container has 4 blocks. Each div contains width:25%, so it fills the entire container.
If I remove one div, there will be empty space in the container. Is it possible to fill the container again?
.container{
width:100%;
border:1px solid #333
}
.badge-block{
float:left;
width: 25%;
}
.badge-block img{
width:80%;
}
If you're looking to make elements take up the left-over space, you can achieve this using display: table; and display: table-cell. This method works effectively to distribute space evenly.
To see how it works in action, simply remove one of the images from the code snippet provided in the demonstration below:
.container {
width: 100%;
border: 1px solid #333;
display: table;
}
.badge-block {
display: table-cell;
}
.badge-block img {
width: 80%;
}<div class="container">
<div class="badge-block">
<a href="javascript::" data-toggle="tooltip" title="General Pack Rs.50" class="badge-icon">
<img src="http://www.globalniche.net/wp-content/uploads/2013/07/badge1.png" class="img-responsive">
</a>
</div>
<div class="badge-block">
<a href="javascript::" data-toggle="tooltip" title="General Pack Rs.50" class="badge-icon">
<img src="http://www.globalniche.net/wp-content/uploads/2013/07/badge1.png" class="img-responsive">
</a>
</div>
<div class="badge-block">
<a href="javascript::" data-toggle="tooltip" title="General Pack Rs.50" class="badge-icon">
<img src="http://www.globalniche.net/wp-content/uploads/2013/07/badge1.png" class="img-responsive">
</a>
</div>
<div class="badge-block">
<a href="javascript::" data-toggle="tooltip" title="General Pack Rs.50" class="badge-icon">
<img src="http://www.globalniche.net/wp-content/uploads/2013/07/badge1.png" class="img-responsive">
</a>
</div>
</div>In this case, using display: table-cell is highly recommended.
.container{
width:100%;
border:1px solid #333;
display: table;
}
.badge-block{
display: table-cell;
}
.badge-block img{
width:80%;
}<div class="container">
<div class="badge-block">
<a href="javascript::" data-toggle="tooltip" title="General Pack Rs.50" class="badge-icon"><img src="http://www.globalniche.net/wp-content/uploads/2013/07/badge1.png" class="img-responsive"> </a>
</div>
<div class="badge-block">
... (remaining code and structure remains the same)
If you prefer to only support modern browsers, consider using flexbox instead...
.container{
width:100%;
border:1px solid #333;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
.badge-block img{
width:80%;
}<div class="container">
<div class="badge-block">
<a href="javascript::" data-toggle="tooltip" title="General Pack Rs.50" class="badge-icon"><img src="http://www.globalniche.net/wp-content/uploads/2013/07/badge1.png" class="img-responsive"> </a>
</div>
... (remaining code and structure remains the same)
To ensure consistent column width in your container, you can utilize the display: table property along with table-layout: fixed. Instead of using floats, apply display: table-cell to your div elements (cells).
Here is an example:
.container {
display: table;
table-layout: fixed; // Ensure all columns have same width
width: 100%;
border: 1px solid #333;
}
.badge-block {
display: table-cell;
width: 100%;
}
Check out this demo for more details: http://jsfiddle.net/2gqy9s9k/4/
Utilizing display: table-cell has always been the traditional approach, but Flexbox is paving the way for the future.
Thanks to Flexbox, achieving this layout is now a breeze, especially since all major browsers have adopted its third version as the "standard".
Give the code snippet a try and scroll down to see the results.
.container{
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}
.badge-block{
margin: 0 auto;
}
.img-responsive{
width: 100%;
}<div class="container"><div class="badge-block"><a href="javascript::" data-toggle="tooltip" title="General Pack Rs.50" class="badge-icon"><img src="http://www.globalniche.net/wp-content/uploads/2013/07/badge1.png" class="img-responsive"> </a></div>(repeating HTML code structure) </div>For more in-depth knowledge on Flexbox, don't forget to check out the Complete Guide to Flexbox. Additionally, explore Flexy Boxes, a fantastic tool that visually generates prefixed Flex code for you.
Here is my customized HTML code using Bootstrap: <div class="col-lg-4 col-12 text-center"> <div style="width: 80%; margin: auto"> <ul class="list-group"> {% for sl in my_list %} <li ...
I'm looking to create a minimalist front page for my wife's jewelry website. I envision a simple layout with a blurred background and a sleek title at the top. In the center of the page, there will be several sections dedicated to different types ...
I'm facing an unusual CSS challenge. Check out this simple code snippet below that showcases the issue: <html> <head> <style> .hover { float: right; } .hover:hover { background-color: blue; ...
I'm currently in the process of creating a color legend using d3, and I've managed to display it vertically. However, I would like it to be shown horizontally instead. Below is a snippet of the code I've been working on along with a link to ...
Can anyone help me figure out why my function is not displaying the content after one click? It seems to only work after two clicks. Is there a way to fix this so that the information loads and displays with just one click? function getFuncDoc(funcName, ...
Issue can be replicated by visiting the following URL: Click on the hamburger icon to open the navigation menu Click on "Services" Click "< Services" within the submenu to attempt to go back For some reason, the removeClass method is not removing t ...
I am thoroughly enjoying the easySlider 1.7 and found it incredibly simple to implement. The only modification I wish to make is to relocate the next and previous buttons above the slider instead of below it. Does anyone have any suggestions on how to achi ...
I have an HTML form structured like this: Within the dropdowns, there is a uniform list of choices: Option 1, Option 2, Option 3. Users must select a value for each key, which currently functions correctly: Yet, I am seeking to enhance this functionality ...
http://jsfiddle.net/hL8tvet8/ Look at the fiddle above. In most cases, a floating element remains inside its parent element. However, in this case it is not behaving as expected and I am unsure why. I am trying to get the blue floating div to move into ...
Is it possible to create a div within a fullscreen iframe without using JavaScript? I want to achieve a similar layout to the Netflix player, with static buttons and functions in PHP. The div should have a cut background positioned on top of the iframe. ...
Task: Retrieve 10 Array Values from HTML Input Field and Arrange Them in Ascending Order In order to add 10 values from an HTML input field to a JavaScript array, I have created an input field through which data is passed to the array in JS. Two labels ar ...
Having an issue with loading an image via file_path on Vue. When using a hardcoded path, it works fine. Refer to the sample code below: JavaScript function getRestaurantsbyId(id) { var restaurants = { "1" : { "name": "xxxx", ...
Recently, I made the decision to switch the old code in my <head> from jQuery to Vanilla JS. Essentially, when you click on the hamburger icon, the mobile menu should fade-in and all the links should transition smoothly. I attempted to substitute the ...
Hey there! I have a live website (check it out here, although it's currently behind a "coming soon" cover). The site has two stylesheets: one for regular styles (style.css) and one specifically for responsive design (width.css). The responsive stylesh ...
I'm working on a simple web page where I showcase some information. Here is the code snippet from my .cshtml file: <div style="text-align: left"> Test <p style="color: #1e83ca;"> @Html.Label(Model.MemberName) &n ...
I am encountering an issue with my function regarding a login form validation using JSON data. The code seems to be working correctly, but only when I input the correct data immediately after refreshing the page. For example, if I enter an incorrect login/ ...
I'm currently facing an issue with trying to create a step-by-step operation that involves fading the container div around a target div, changing the background, and then fading it back in. The problem is that all the functions in this block are being ...
In a recent discussion (jQuery Ajax PHP redirecting to another page), it was mentioned that when utilizing ajax for redirection to a PHP page, an event needs to be set in the following manner: $.ajax({ type: "POST", url: "ajax.php", data: dataString, ...
I am currently in the process of converting a bootstrap template to react framework. My question is, is there a way for me to load stylesheets on demand? For instance, if I have 2 components and I import the same stylesheet separately in both components, ...
I have successfully implemented a textarea box that expands upon click and retracts when it loses focus. However, I am facing an issue where if the textbox is already in expanded form, I want it to stay expanded if the user clicks anywhere within the cont ...