I have a large container with 7 smaller containers inside
<div id="big_div">
<div>a</div> <div>a</div> <div>a</div>
<div>b</div> <div>b</div> <div>b</div><div>b</div>
</div>
Is there a way to arrange the 7 containers in two columns, one with 4 and the other with 3 elements, without modifying the HTML, possibly using nth_child?
#big_div{
}
#big_div div{
}
For those looking for a more contemporary approach to displaying content in "columns," check out this demonstration (DEMO):
#big_div {
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2;
}
#big_div div:nth-child(3) {
-moz-column-break-after: always;
-webkit-column-break-after: always;
break-after: always;
}
Explore browser compatibility at caniuse by visiting this link.
#large_container{
width: 100%;
zoom:1;
}
#large_container div{
float:left;
width:50%;
}
#large_container:after{
content:"";
display:block;
clear:both;
}
To achieve the desired effect without using additional HTML, you can utilize the nth-child(1n+4) selector in CSS. It is important to note that this selector may not be supported in all browsers, particularly older versions of Internet Explorer.
Here is an example using CSS:
For organizing rows:
#big_div{
width: 100%;
}
#big_div div{
float:left;
width:33%; //(100% / 3 )
}
#big_div div:nth-child(1n+4){
float:left;
width:25%; //100% / 4
}
I'm struggling to create a collapsible navigation bar for my website that works well on mobile devices. Here's the code for my navigation bar: <div style="padding-bottom: 50px;"> <header id="main-header"> <div ...
Having issues with my contact form that has 3 fields and a textarea... I've used jQuery for validation and PHP to handle email sending. The contact form is functioning correctly, but the From field in the received emails is not displaying as expect ...
I'm currently working on a JSP/HTML web page where I need to disable or "gray out" the entire page when a button is clicked. This will prevent the user from accessing any other elements on the page until it's disabled. Any ideas on how to achiev ...
I'm attempting to incorporate a multiselect input from the bootstrap-select Library into a Bootstrap dropdown menu. The issue arises when I open the dropdown menu and click on the multiselect input, causing the menu to close and preventing me from usi ...
I am looking to create a product catalog with 1-4 products in a row, each displayed in a box with details and prices. I would like to be able to generate the catalog easily using an XML/CSV file that can be updated. Can anyone provide guidance on how to ac ...
I'm working on a webpage that allows users to create elements dynamically and I want to save those elements to the server. When someone else visits the page, I want them to see those saved elements as well. I'm not too familiar with web programm ...
I am facing an issue with a keyframe spinner that rotates an image on the y-axis. It works perfectly in Chrome but fails to function in Firefox. I have tried changing the HTML tags to div or span class/id, but nothing seems to work. Interestingly, other ke ...
I am facing an issue where I am trying to write data to MySQL. When I input the data and press the submit button, the console log message from the function indicates that everything is okay. However, upon checking the database, there is nothing saved. Can ...
I'm faced with a challenge involving a non-clickable textbox that is meant to hold a running total. Each time a checkbox is clicked, its value should be added to the total in the textbox. However, I am now struggling to figure out how to perform mult ...
I am facing an issue with importing css and js files into a view in React using vite. The styles are not loading properly, and I have to keep commenting and uncommenting the imports in my code for them to be recognized when entering the view. Below is a s ...
I have a click event attached to multiple buttons on my page, each loading a different .php file into the same div. The issue arises when the time to load increases after several clicks. $('#start').click(function() { $('#mainbody&apos ...
I'm struggling to align two components using the <div display='table-cell'> method. The first component is showing a gap at the top which I want to remove in order to have them aligned perfectly. Check out the JsFiddle example here: h ...
Currently utilizing the Material UI next framework to construct a wrapper for the card component. This customized wrapper allows for personalization of the component. I have successfully extended the component so that the title and image within the card ca ...
My Angular/Typescript website needs to integrate a third-party script that generates a table. However, I'm facing issues with rendering the table within the home.component.html file. I've managed to embed the script, but it doesn't seem to ...
I'm facing a dilemma in choosing between an ASP.NET control and an HTML element for creating a button with a CSS-defined background that changes on hover... 1. Initially, it seems the ASP.NET ImageButton control is not suitable for this purpose becau ...
My task involves displaying an image with two div elements placed above it - one containing an image and the other containing text. I need to combine these three elements to create a final image and store it in a database/server. To achieve this, I am usin ...
Is there a way to directly display an HTML widget (such as one created by dygraphs) in an external browser like Chrome? Saving the widget, creating an HTML page, linking it to the widget, and using browseURL could be an option, but I am looking for a more ...
Using Angular 4 material for a table has presented me with two issues: 1. When sorting a table, it displays the description of the sorting order in the header. I would like to remove this. https://i.sstatic.net/5bHFO.png It displays "Sorted by ascending o ...
I'm currently in the process of developing my cookbook app and the next feature on my agenda is the grocery list functionality. Once on the recipe page, users will have the option to click on an "Add to Grocery List" link which will redirect them to a ...
I am facing an issue with implementing multiple checkboxes with limits in JavaScript, as shown below. $(".checkbox-limit").on('change', function(evt) { var limit = parseInt($(this).parent().data("limit")); if($(this).siblings(':checked&ap ...