I have organized my items within a div tag and am attempting to align the images and text horizontally so that they reach the maximum length of the page, overflowing into the next line and forming a horizontal list instead of a vertical one (at least, in theory). However, no matter what changes I make to this div tag, it remains unchanged?
CSS:
.change{
width: 100%
min-width: 400px;
max-width: 960px;
margin: 0 auto;
white-space: pre-wrap;}
Full HTML code available in the comments:
Place a div within the primary div for each item and apply float:left; to each item's div
Your fiddle seems to have some issues with the mark-up and CSS.
Here is an example of what you currently have:
<div id= "flag">
<div id="flag1"> ... </div>
<div id="flag1"> ... </div>
<div id="flag1"> ... </div>
The inner div elements all have the same ID, which should be changed to a class. Your CSS only styles classes, not IDs.
Also, make sure your image src attributes have closing quotes and point to accessible images.
Remember the difference between applying styles to a class vs an ID:
.flag{ .. } // apply to class
vs
#flag { ... } // apply to id
Consider reworking your structure like this:
<div id="flags">
<div class = "flag">
<span>A - ALPHA</span>
<img src="..." title="..." border= "1"/>
</div>
<div class = "flag">
<span>B - BRAVO</span>
<img src="..." title="..." border= "1"/>
</div>
<div class = "flag">
<span>C - CHARLIE</span>
<img src="..." title="..." border= "1"/>
</div>
</div>
To display 8 flags per row, you can start with CSS like this:
#flags {
width: 100%
min-width: 400px;
max-width: 960px;
margin: 0 auto;
}
.flag {
float:left;
display:inline-block;
width:120px;
height:100px;
background-color:pink;
}
.flag span {
display:block:
width:100%
height:40px;
}
.flag img {
display:block:
width:100%;
height:60px;
}
I am having an issue with the order class when using a list-group inside a dropdown-menu in Bootstrap 5. I checked the documentation on ordering classes in Bootstrap 5 but I can't seem to get it to work inside the dropdown-menu. Here is a sample of t ...
Currently, I am diving into learning Three.js by following their comprehensive getting started guide, which can be found at . I have diligently copied the code provided on the site and ensured that I am using the most up-to-date library. However, when I ex ...
I'm working with Bootstrap 4 and I would like the color of my navbar toggle icon (commonly referred to as the burger menu) to change when it is hovered over. I have attempted the following code but it is not producing the desired result: .navbar-light ...
Recently, I utilized the Google Map editing service from this site: https://developers.google.com/maps/documentation/javascript/styling This link provided me with two things: 1. A JSON code 2. The Google API link However, I am unsure about how to incorpo ...
Seeking assistance with creating an HTML table with a horizontal scroll and fixed cell width. I have managed to implement the horizontal scroll feature using the code below, but struggling to adjust the cell widths. Any tips or suggestions would be greatly ...
Here is an example of html snippet for a dropdown menu: <form name="navList" onsubmit="return submitForm();"> <select name="subMenu"> <option value> </option> <option value> CR_ID </option> <option value> CR_HEADL ...
translate3d(0%, 0px, 0px); is causing issues with my position fixed element. In my demo, you'll notice that clicking the button should open up the content just fine, but it is supposed to stay fixed at the top in a position fixed. Therefore, when scr ...
Encountering an issue with nextjs 13, let me explain the situation: Within a card component, there is an external div containing an internal link to navigate to a single product page. Using onClick on the external div enables it to gain focus (necessary f ...
I have been using the function below to generate text for Bootstrap's tooltip plugin. Why is it that multiline tooltips only work with <br> and not \n? I would prefer to avoid having any HTML in my links' title attributes. Current Sol ...
Hello everyone! I am currently in the process of creating a display toggler for my website. I have two separate pages, index.html and toggler.html. In index.html, the "TEXT" is displayed, while toggler.html contains the actual toggler or switch button. Whe ...
I have successfully implemented a feature that allows users to convert temperature values displayed in a drop-down menu to either Celsius or Fahrenheit. For this functionality, I am using a select input with ng-options as shown below: <select ng-model ...
.navbar { background-color: #F91F46; } .src-bar { border: 0; border-radius: 5px; outline: none; padding-left: 15px; width: 30vw; } <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.2/css/bootstrap.min.css" in ...
After creating a SVG circle and surrounding it with rectangles, I am now attempting to draw a group of 2 rectangles. The alignment of the rectangle combo can either be center-facing or outside-facing, depending on the height of the rectangle. However, I am ...
No matter how hard I've tried, setting the body with padding: 0 and margin: 0, as well as attempting to set the doc() with setMargin, nothing seems to be effective ...
Below is a table for reference: <table width="100%"> <tr> <td id="td1"></td> <td id="td2"></td> <td id="td3"></td> <td id="td4"></td> </tr> </table> Is there a wa ...
Currently facing an issue with Swiper Slider and Simple Parallax Scrolling. Whenever I switch slides, the same image is displayed repeatedly. I suspect the problem lies in the fixed position of the image within the parallax effect. Attempted to resolve b ...
Struggling to compile Bootstrap 5 with sass, I have a feeling that I might be missing some important scss files. When I added the <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7 ...
When the menu appears on the right side with right: 0;, I change it to right: -200px; when closing it so that the mobile page does not show the menu on the right. My goal is to display the fa-bars symbol when the menu is closed (right: -200px;), and the fa ...
I'm currently working with a restful API, MVC, and ajax. My goal is to retrieve data from the backend and then display images within certain div elements. The expected outcome should resemble this example: https://i.stack.imgur.com/BFqWL.png This sni ...
Is there a way to create a duplicate cursor effect on my website, making it appear twice and perhaps look like it's drunk? I want the cursor to still interact with images and change accordingly, but always have two visible. Can this be achieved easily ...