Here in this code snippet
You will see a table (or matrix as some may call it) of bookmarks. Each row is identified by a tag. The challenge here is to make sure that the column for tags has a consistent width.
The specific class that requires a constant width is
.tag_hold
I attempted the obvious approach of setting
width: 100px;
However, there was no visible change when I did this.
Setting a width for an inline element won't work because of its nature. To make the width take effect, consider using display: inline-block; instead of display: inline;.
However, if you are dealing with tabular data, it's recommended to use the <table> element as it is specifically designed for such purposes – no need to create something from scratch.
The issue with the functionality lies in the fact that the display is set to inline instead of inline-block
Update the display: inline; to display: inline-block;
.tag_container{
position: relative;
top: -2px;
display: inline-block;
font-size: 13px;
color: #000000;
padding: 0px 0px 0px 0px;
width:100px;
}
When you use display:inline, the width is ignored and the element is pushed regardless. To address this, you can switch to either display:block or display:inline-block and float the elements based on your desired appearance.
Alternatively, consider utilizing Twitter Bootstrap for a more streamlined approach.
Using inline-block as suggested by previous answers is the way to go.
I have gone ahead and tidied up your CSS for you, removing any unnecessary styles. You can view the updated version here: http://jsfiddle.net/sjD24/12/
I have developed a Multiple Page Application (MPA) for Android and iOS which navigates to different pages when users want to view them. Everything is running smoothly so far, but I now want to add some backend sync features. The issue I am facing is that I ...
I'm facing a bit of a dilemma here. I have a form with multiple fields, including one for entering links. When you input a link and click the add button, the link is added to a link_array using jQuery. My goal is to send this array through the jQuery. ...
I have a PDF file from an external source embedded on this page. Although it displays correctly, I am concerned about the file being downloaded each time the page is visited. Would using an object tag instead help to cache the PDF and prevent repeated do ...
My current challenge involves altering the background-color of a parent <td> element, without being able to directly modify the HTML structure. The software system utilized at my workplace strictly relies on SQL queries for data manipulation and gene ...
I currently have a basic upload form set up. Here's the HTML code: <html> <head> <title>Upload a File</title> </head> <body> <font face=verdana size=2> <form enctype="multipart/form-data" method="post" act ...
I have been working on developing my own jQuery Gallery Plugin. The crucial initial markup that is required to initialize the plugin includes: Initial HTML <div class="riGallery"> <ul> <li><a href="http://www.example.com" ...
Currently, I am dealing with a select field setup in the following way: <%= f.select(:avaliador_id) do %> <% @usuarios_array.each do |u| %> <%= content_tag(:option, u.first, value: u.last) %> <% end %> <% end %> My q ...
I am struggling to correctly write the code to display the background image in this page only once, without repeating, and centered about 500px down the page. I tried something like "background-image: norepeat" but it didn't work. I looked at the W3C ...
After storing some data in firebase that can be retrieved on the client side, I use JQuery to add it to the HTML. Although the process of prepending the data to the DOM element is straightforward, there is a security concern as raw code can make the applic ...
I have encountered an issue in Chrome where I created a hexagon group using HTML and CSS. While it displays fine in Firefox, the edges of the hexagons appear distorted in Chrome. Here are my code snippets: HTML <div class="col-sm-12 margin-left-100" i ...
I am attempting to develop a CSS selector that can target the specific entries within the page-top-menu: Header menu - Menu 1 DE #page-top-menu > div > div.menu-wrapper > ul > li.i39.dropdown.layer.item-type-1.catid-0eca5a6c6e53f281b9e0469ca3d ...
Currently, I am working on an Angular project that involves dynamically populating a calendar. In addition to this, I have a range of dates and the task at hand is to modify the background for specific days within this date range. To manage dates effective ...
My goal is to create a webpage with the following structure: I want to display content in a large scrolling slideshow while allowing it to scroll left under a white sidebar. Although this may seem simple, I have experimented with various structures and am ...
I am facing an issue with my layout setup in different browsers. When I have a list of divs inside a flex div, it displays correctly in Chrome: However, in Firefox, it only shows a horizontal scroll with one line. Is there a way to prevent the forced hor ...
There is a JavaScript function that captures the value from a select dropdown and appends it to the end of a textarea field (mask) whenever a new selection is made. function addToEditMask(select, mask) { var selectedValue = document.getElementById(sel ...
Having a bit of trouble positioning two div's side by side. Divs are usually block elements, but this time I'm facing some challenges in getting them to sit next to each other. Here's the HTML code: <div class="contact"> <div ...
Has anyone found a method to implement a sticky first column in Angular Material using CSS? Check out the editable Stackblitz code here. I attempted to modify this approach from https://jsfiddle.net/zinoui/BmLpV/, but encountered issues where the first c ...
Can someone guide me on how to set up a touch event handler in JavaScript using the mousedown, mousemove, and mouseup events? I would really appreciate any suggestions or tips! ...
Within my code in settings.py, I define the static URL like so: STATIC_ROOT = os.path.join(BASE_DIR, "static") STATIC_URL = '/static/' The location of my static files and folders is at /home/myLinuxUsername/myApp/static/interactive-preview-depe ...
My current plugin.js file houses all my plugins for responsive design, but it is unnecessarily large and cumbersome for mobile devices. I am considering creating two separate plugin.js files to toggle between for mobile and desktop views. What are the r ...