What is the best way to display my icon <div>s side by side instead of on top of each other?

I am facing an issue with the following code:

<a href="#"><div class="iconFriends"></div></a>
<a href="#"><div class="iconFavorite"></div></a>
<a href="#"><div class="iconPM"></div></a>
<a href="#"><div class="iconShield"></div></a>

Each icon has a CSS class like this:

.iconFriends{
background: url(../images/icons/friends_16x16.png) no-repeat;
width: 16px;
height: 16px;
border: none;
}

However, when I use the code above, it creates an unwanted line break. But, when I replace the <div> with a normal <img src="...">, it displays correctly. How can I resolve this issue?

htmlcss

Answer №1

Make sure to set your div elements to have the display:inline-block property, or even better, remove the divs altogether and apply the styling directly to the a tags (also using display:inline-block)

HTML

<a href="#" class="iconFriends"></a>
<a href="#" class="iconFavorite"></a>
<a href="#" class="iconPM"></a>
<a href="#" class="iconShield"></a>

CSS

.iconFriends{
   background: url(../images/icons/friends_16x16.png) no-repeat;
   width: 16px;
   height: 16px;
   border: none;

   display:inline-block;
}

Answer №2

experiment by assigning a float:left property to each of them

Answer №3

To style your icons in CSS, you can use the following code:

.iconFriends{
 background: url(../images/icons/friends_16x16.png) no-repeat;
 width: 16px;
 height: 16px;
 border: none;
 float: left /* or right, depending on the desired placement */
 }

Answer №4

Choice 1: swap out the <div> for a <span>

Choice 2: adjust the <div> to have a display: inline; property. By default, the display value is block, causing each element to appear on a separate line.

.iconFriends {
    display: inline;
    ...

Answer №5

To improve the layout, I recommend rearranging the order of your elements like so:

<div class="icon iconFriends"><a href="#"></a></div>

Make sure to include the extra icon class on the div.

Next, update your CSS with the following code:

.icon a
{
    display: block;
    width: 16px;
    height: 16px;
}

.iconFriends
{
    background: url(../images/icons/friends_16x16.png) no-repeat;
    width: 16px;
    height: 16px;
    border: none;
    float: left;
}

By adding float: left;, all elements will be aligned on the same line. Setting display: block; on the a element allows you to define its width and height, making the entire element clickable.

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

Guide to resizing images with next.js

I have an issue with resizing an image within a Bootstrap card using next/image. I am trying to decrease the size of the image to about 60% of its original size and prevent it from filling the entire top portion of the card. I attempted wrapping the imag ...

cssreactjsbootstrap-4next.jsbootstrap-cards

Struggling with z-index or float issues on Chrome and Safari with CSS styling

Check out my website at I have incorporated the Easy Slider 1.7 plugin from this source and made some custom JavaScript modifications for a banner rotator. The issue I am facing is that on webkit browsers, the navigation links (1,2,3,4,5) on the banner a ...

htmlcssgoogle-chromesafariwebkit

Ways to enlarge the font size of text on a mobile website?

this is the site i have added viewport, but with image, the text saw on phone is small, how to make the text bigger when see on the phone, what should I add to the code? this is the site i have added viewport, but with image, the text saw on phone is sm ...

htmlcss

Instead of displaying the location attribute in an alert, populate it into a text area

I have a function that can retrieve my current location using longitude and latitude coordinates. However, I am looking to automatically fill a text area (Populate Here) with the results instead of displaying an alert. <!DOCTYPE html> <html> ...

javascripthtmlcordova

Updating dropdown menu selection after successful form submission validation

I'm currently working on a PHP sign up/registration form that retains and resubmits user input if validation fails. Although I have successfully implemented text boxes, password inputs, and radio buttons, I am encountering some challenges with the dro ...

phphtmldrop-down-menu

Utilizing JavaScript for manipulating arrays and displaying images

After asking this question previously without a satisfactory solution, I am hoping to provide better clarification. Imagine having an array with 3 items and it lands on 0 - a code is set up to display this in a div. Now, I want the image to be shown righ ...

javascripthtmlcss

The Bootstrap grid column remains steady and does not fluctuate

Trying to get a grasp on Bootstrap 4, I've set up my page with a three-column layout and defined the following properties for each column: Column 1: col-sm-9 col-md-8 Column 2: col-sm-3 col-md-2 order-sm-first Column 3: col-xs-12 col-md-2 My expecta ...

htmlcsstwitter-bootstrapbootstrap-4

Unlocking the attributes of Angular form elements: A guide

Imagine we have a form like this <form name="myForm" data-ng-controller="Ctrl"> <input name="input" data-ng-model="userType" data-description="User Type" required> </form> When working in the controller, we can refer to the input el ...

javascripthtmlangularjs

Enhancing the appearance of div content in Angular by utilizing local template variables and material elements

Within this particular implementation, I have utilized an md-sidenav component with a local template variable #sidenavsearchArea. <md-sidenav #sidenavSearchArea align="" mode="push" opened="false"> sidenav content here.. </md-siden ...

cssangular

Preventing the execution of JavaScript methods with the use of the button and POST method

Unraveling this mystery: <button onclick:"javascript:cerrarPop('lightA')">Cancelar</button> fails to trigger any action. The idea of placing the button inside the post crossed my mind, but alas, the page undergoes a refreshing episode ...

javascripthtmlajax

The background only partially covers the section

In a current project test using the provided template from , I encountered an issue when changing the section <section role="main" id="main"> to incorporate the carbon class as the background does not fill completely. My attempts to adjust the secti ...

htmlcss

Tips for optimizing background images for various screen sizes?

I'm experiencing an issue with my background image where the head is being cut off on larger screens. Is there a way to ensure that the entire picture is always displayed regardless of screen size? The initial property for background-size is set to co ...

htmlcssbootstrap-4sassbackground-image

broken alignment of right-aligned Bootstrap navbar

I need help with displaying a navbar on my webpage. I want the right side of the navbar to show different elements based on whether the user is logged in or not. If the user is not logged in, it should display "Login" and "Register," and if they are logged ...

htmlcsstwitter-bootstrap

What steps do I need to follow in order to utilize Express Generator to create a node skeleton with an HTML view

Is there a way to create a skeleton for Node.js using Express generator with an HTML view engine? For example, we typically do npm install -g express-generator express -v pug but it seems we cannot create a skeleton for express -v html ...

htmlnode.jsexpressexpress-generator

Autofill Dropdown in AngularJS Using Data from Previous Page

Despite searching extensively on StackOverFlow, I was unable to find the answer I needed. So, I am posting my question below. I have a form that includes a dropdown menu. When a user clicks a button, they are taken to a new HTML page with additional infor ...

javascripthtmlangularjs

Spinning an SVG circle using a group element

I'm interested in rotating an SVG circle without affecting the rotation of other elements. https://i.sstatic.net/Be501.png My attempt to rotate the white circle using rotateZ(15deg) resulted in this: https://i.sstatic.net/GMp96.png This is the prog ...

csssvg

JavaScript to toggle the visibility of elements when they move outside of a specified container

Check out this js+html/css project I worked on: http://jsfiddle.net/A1ex5andr/xpRrf/ It functions as intended - opening and closing with the use of .advSearch-btn to open/close, and .advSearch-control .canc to close. However, I am facing an issue where it ...

javascriptjqueryhtmlcss

What is the process for submitting a form on consecutive URLs?

I have a form that requires input for settings and includes two buttons: one to save the form and another to both save and execute the settings. <form method="post" action="/settings/{{id}}/save"> <!-- input fields --> ...

javascripthtmljquery

Display the input in the text box before making a selection from the dropdown menu

Latest Technologies: $(document).ready(function(){ $('#userID').change(function(){ $('#username').val($('#userID option:selected').data('username')); }); }); Coding in HTML: <select class="form- ...

javascriptjqueryhtmlajax

When floated to the right, the element is being pushed onto the next line in Firefox

Within a div, there are four elements. I specifically want the last element to be positioned on the far right, so I applied float: right to it. However, in Firefox, the last element gets pushed to the end of the next line instead. This issue does not occ ...

htmlcssfirefox