Is it frowned upon to use <div>'s with display:inline-block frequently?

When creating a horizontal layout for a webpage, I often use div elements with display set to inline:block for the top-level components. For example:

<div id='header'>
    <div class='inline_block'> stuffff </div>
    <div class='inline_block'> stuffff </div>
    <div class='inline_block'> stuffff </div>
</div>

#header{width:100%}
.inline_block{width:20%; display:inline-block;}

Although this method achieves the desired result, it just doesn't feel right. Can anyone provide some insight into why this might be the case?

htmlcss

Answer №1

The div element should be used as a last resort with no special meaning attached to it.

It is recommended for authors to consider using more appropriate elements that enhance accessibility and maintainability, rather than relying heavily on the div element.

Source

While many websites utilize divs extensively, HTML5 introduces new tags with specific meanings. It's important to choose the right elements for better structuring of content.

User agents determine the display characteristics of divs, typically applying a default style of `display:block`. Swapping spans for divs does not necessarily yield the same behavior due to differences between `inline` and `inline-block` display properties.

In some scenarios, changing the display of certain divs to `inline:block` can be beneficial and practical.

When selecting elements, focus on structuring the document properly rather than solely relying on the browser's default styles.

Emphasize the use of semantic markup and CSS that aligns with the content, avoiding generic class names like "inline-block" which may lead to confusion if styles are modified.

Answer №2

While using inline-block is generally acceptable, it's important to consider the naming of your classes. Opt for more descriptive names rather than generic ones like "inline-block." If you do need to apply inline-block to certain elements, make sure to use specific class names. For example, if you want all direct child divs inside #header to display as inline-block, you can achieve this with the following CSS:

#header > div {
   display: inline-block;
   *display:inline; //For IE7
   *zoom:1; //For IE7
}

Keep in mind that in IE7, inline-block may not work properly without triggering hasLayout, which can be done using zoom:1.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Using media files (mp4 and mp3) from a USB drive within a software application

I am currently developing an application that allows users to watch movies and listen to songs. The frontend is being built with Angular, while the backend uses Python/Flask. Once completed, this application will be running on a Raspberry Pi 4. To store t ...

pythonhtmlangulartypescriptflask

Jquery starts functioning properly after the second click and continues to work flawlessly

Despite being a functional script, it only starts working on the second click instead of the first as intended. function change_text() { var button = document.getElementById('toggle_button'); if (button.innerHTML === "Edit") { button.inn ...

jqueryhtml

On the second attempt, Firefox is able to drag the div element smoothly by itself

I have created a slider resembling volume controls for players using jQuery. However, I am facing an issue ONLY IN FIREFOX. When I drag the slider for the second time, the browser itself drags the div as if dragging images. The problem disappears if I clic ...

javascriptjqueryhtmlcss

The jQuery code I'm using is incorrectly selecting all elements with the class name "a2" when I click on them, instead of providing me with

I was hoping to see one a2 element displayed at a time when clicking on a div element, but instead, all a2 elements are appearing simultaneously. I would like to see only one a2 class element at a time upon clicking. <!DOCTYPE html> <html> < ...

javascripthtmljquery

Is it possible to generate a PNG blob using binary data stored in a typed array?

I have a piece of binary data that is formatted as a PNG image. I am looking to convert it into a blob, generate a URL for the blob, and then showcase it as an image in various places where an image URL can be used, such as CSS. My initial approach invol ...

javascripthtmlimageurl

Streamlined Navigation Bar Design for Websites

Struggling with aligning all the navbar options in a single row. Here is an example: https://jsfiddle.net/knyx2u8h/ ` Example Domain <meta charset="utf-8" /> <meta http-equiv="Content-type" content="text/html; char ...

htmlcssnavbar

What could be preventing this bootstrap carousel slider from transitioning smoothly?

I've created a CodePen with what I thought was a functional slider, but for some reason, the JavaScript isn't working. The setup includes bootstrap.css, jquery.js, and bootstrap.js. I'm having trouble pinpointing what's missing that&apo ...

javascriptjquerycsstwitter-bootstrapcarousel

Guide to executing a script within an iFrame on the parent webpage?

If I have a webpage named Page B with a function called "test()", and then another webpage named Page A that includes an iFrame pointing to Page B, how can I trigger the execution of Page B's "test()" function from Page A? ...

javascripthtmliframecross-domain

Combine CRA with Craco to effortlessly integrate and switch between various CSS themes

Directory structure: src/index.tsx src/themes/dark.scss src/themes/light.scss ... Customizing webpack with craco: const path = require('path'); module.exports = { webpack: { configure: (webpackConfig, { env, paths }) => { webpa ...

csswebpack

Raising the css value for each element that is impacted

I am faced with an infinite number of elements that I need to arrange next to each other. Each element has a class called "box". My goal is to separate each box by 10px increments, meaning the first element will have a left property of 0px, the second 10px ...

javascriptjqueryhtmlcsselement

having trouble with developing a dropdown menu using jquery

I'm currently creating a drop-down menu for my website and here is the code I'm using: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html dir="ltr"> <head> <met ...

javascriptjquerycssmenu

What is the best way to show an error message on a field when using a custom form validator?

In my JavaScript code, I have created a form validator that is capable of validating different input fields based on specific attributes. However, I need assistance with implementing error handling and scrolling to the erroneous field. For each <input& ...

javascriptjqueryhtmlformsvalidation

Utilizing nested flexboxes to create a horizontal row within a vertical column

As I work on creating a mock survey form, I've organized the input fields in a column flex-box layout. However, I'm facing an issue with the name field where I want to split it between 'first' and 'last' names while sharing th ...

htmlcssflexbox

Using Angular 8 to Pass Form Data to Another Component via a Service

Is there a way to send all the Formgroup data as a Service in Angular to Another Component without using ControlValueAccessor? I want the receiver to automatically receive the value data whenever someone enters information on a form. I am attempting to mo ...

htmlcssangularangular8

Issue with HTML file not found in Python Tornado AngularJS application (using ui-router)

Looking at my code Folder Structure: App- |--- static | |--- css | |--- js | |--- app.js | |--- templates | | --- header.html | | --- template.html | | --- footer.html | | --- index.html |--- startup ...

pythonhtmlangularjstornado

Modifying the header on an HTML page

Looking for assistance with code to have my site header appear after the page has scrolled past Figure 1 and change on reaching Figure 2. Any suggestions on how I should write this code? Your help is greatly appreciated! ...

jqueryhtmlcss

What are some strategies for customizing the appearance of child components within a parent component?

I have a scenario where I am using parent and child components. When I use the HTML in another component, I also apply my CSS. For example, in my parent component: HTML <div class="chips"> <p class="tags">Tag 1</p&g ...

htmlcssangularangular-components

JS Issue with Generating Content

Introduction( kind of :) ) Starting with the process of generating 5 coffee beans for each cup of coffee. The coffee class includes a strength attribute, and my goal is to visually distinguish the coffee beans which have a strength greater than the select ...

javascripthtmlcsslistclass

Is it possible to specify the same attribute multiple times within an HTML5 element?

After reviewing the HTML5 specification (W3C Recommendation 28 October 2014), I am unable to locate any specific information on whether an element can have the same attribute specified multiple times. For instance, the attribute style sometimes has a lengt ...

htmlattributes

Issues have arisen in IE8 with the background gradient on hover elements in the menu, while it functions properly in all other web browsers

Welcome to the website: I've recently taken on a project involving the gradiated menu on this site. The menu works flawlessly in Firefox, Chrome, and Safari - the hover effect changes the background color to a light gradiated green. However, when it ...

internet-explorercss