minor issue with the background in CSS

I am trying to display two icons side by side using HTML code. Here is what I have:

<head>
<style>
.icon_one{
    width:25px;
    height: 20px;
    background:#ffffff url('icon_one.jpg') no-repeat right top;
}

.icon_two{
    width:25px;
    height: 20px;
    background:#ffffff url('icon_two.jpg') no-repeat right top;
}
</style>
</head>

<div class="icons"><div class="icon_one"></div><div class="icon_two"></div></div>

My goal is to arrange them side by side like this: icon1|icon2

However, the current output of the code displays them vertically as:

icon1

icon2

Any guidance on how to achieve the desired layout would be greatly appreciated.

css

Answer №1

Simply include the following code:

.icon_one, .icon_two{display:inline-block;}

View the Live Demo

This will eliminate the need to clear floats later on.

If you prefer using floats instead, you can do so as shown below:

.icon_one, .icon_two{float:left;}

See Demo with floats

Answer №2

Include a float in your elements...

.element1, .element2 {
    float: right;
}

Answer №3

To make the icons appear next to each other, include float:left in each icon class and don't overlook adding some margin space between them.

Answer №4

Consider switching the div elements to span elements.

<span class="symbols">
    <span class="symbol_first"></span>
    <span class="symbol_second"></span>
</span>

Answer №5

To align multiple div elements, you have two options: use float:left; or set each div to display:inline-block;

For instance:

.icon_one, .icon_two{
    width:25px;
    height: 20px;
    background:red url('icon_one.jpg') no-repeat right top;
    display:inline-block;
}

.icon_two{
     background:blue url('icon_two.jpg') no-repeat right top;
}

http://jsfiddle.net/jasongennaro/YESWV/1/

Note: You can optimize your code as shown above.

I also modified the background-color for better visibility in the example.

Another approach:

.icon_one, .icon_two{
    width:25px;
    height: 20px;
    background:red url('icon_one.jpg') no-repeat right top;
    float:left;
}

.icon_two{
    background:blue url('icon_two.jpg') no-repeat right top;
}

http://jsfiddle.net/jasongennaro/YESWV/2/

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

Make sure that the input field and label are aligned side by side in the

Is there a way to arrange the following HTML in the specified layout? <div> <div> <label>Counterparty</label> <input id="paymentsApp-inpt-cpty" ng-model="selectedPaymentCopy.counterparty" ng-required="true" ...

htmlcss

Learn how to stream videos using the YouTube Player API's loadPlaylist feature

Is there a way to make the next video play automatically using the loadPlaylist option? I've tried implementing this code but unfortunately, it doesn't work and the video won't play: <div id="player"></div> <script> var ...

javascriptcssyoutubeyoutube-api

Display column header row divider for pinned columns in v5 DataGrid

I'm attempting to customize the appearance of pinned columns in MUI's DataGrid by adding a column header-row divider. The official demo by MUI for pinned columns [https://codesandbox.io/s/qix39o?file=/demo.tsx] displays the pinned column header ...

cssreactjsmaterial-ui

Can a border-bottom be made the same size as a class it is not linked to in CSS?

Can I set a border-bottom to match the size of a separate class? For example, I want a border-bottom at the bottom of each <section> tag. However, since the sections span the full width of the screen, the border-bottom inherits that width. Each < ...

htmlcsssassbootstrap-4

Issue with body element displacement when utilizing Bootstrap 5.2 toast component

While utilizing a Bootstrap 5 toast, I noticed that it causes the entire body to shift down. I suspect that there may be an issue with how I am handling relative and absolute positioning attributes, but I am uncertain. This is my first time using Stack Ove ...

javascriptphpcssbootstrap-5

Prevent the appearance of a scrollbar on a fixed-position popup element

Whenever I click on a button, a Sidebar opens up and fills the entire screen due to its position being set to fixed. Here's how it looks with TailwindCSS: return ( <div className="fixed z-40 flex left-0 top-0 h-screen w-screen"> ...

cssreactjstailwind-css

If the width is below 767, the previous code will not be effective in jQuery

Challenge: How can I ensure that the code within the if statement only executes when the screen width exceeds 767px, and does not work if it is less than 767px? Using jQuery: $(document).ready(function() { $(window).resize(function() { if ($( ...

javascriptjquerycss

How to Alter the Color of a Hyperlink in HTML

I've been working on an angular2 application and I'm using a hyperlink to trigger a method that opens a small popup window. I've tried different methods to change the color of the link when it's clicked, but so far none have worked. Th ...

htmlcssangular

Webpack doesn't seem to be able to display custom fonts

I have a small project in progress using webpack. One of the tasks I'm facing is loading custom fonts. I followed the official tutorial here, where it explains how to handle assets in webpack configuration. My custom fonts are located within the src ...

javascriptcsswebpackfonts

The 8 x 8 grid I am constructing is functional, however, the issue lies in the fact that the first line only begins with a single # symbol

I am attempting to create an 8 x 8 grid. It's coming together, but the issue is that the first line only starts with one # sign. function print(msg) { console.log(msg); return msg; } let result = ""; for(let i=1; i<=8; i++) { result += ...

javascripthtmlcss

Pictures in Windows 7 have shifted to the left

After a recent migration to the Windows 7 operating system at my company, I encountered an issue. While using the same Visual Studio 2010 master file that was working fine on my Windows XP machine, I noticed that all the images below were now shifted to t ...

asp.nethtmlcss

What could be causing the overflow of content from my div element?

Let's discuss the problem at hand: I have an HTML code snippet: <div id="container"> <div id="fixedImg"></div> <div id="content" class="clearfix"> asdf <br /> asdf <br /> df<br />asdf & ...

htmlcss

Are there any methods to personalize the CSS transition?

I have a question about modifying the style of an element with the transition property. It seems that any changes made are done gradually. Is there a way to monitor these style changes, prevent immediate modifications, and instead replace them with a cus ...

javascriptcssvue.js

What is the best way to position images and text on a webpage using CSS?

Is there a way to properly align images and text in my code? Below is the code I am currently using. Any suggestions on how to achieve the alignment? <ul> <li> <a href=""><i class="icon-profile"></i> </a> < ...

htmlcss

Adjust the background of the page at regular intervals

I currently have: <script type='text/javascript'> var imageID=0; function changeimage(every_seconds){ //change the image if(!imageID){ document.getByTagName("body").src="icwXI.jpg"; imageID++; } else{if(imageID==1){ document.ge ...

javascripthtmlcss

What steps should I take to create a collapsible Bootstrap navbar?

I'm attempting to recreate the scrolling functionality seen here: It seems like they might be using a customized Bootstrap Navbar, so I've taken one from here: and tailored it to my needs. How can I achieve the effect where the navigation bar ...

javascriptcsstwitter-bootstrapnavbar

Choosing between JavaScript and Handlebars.js depends on the specific needs

Can anyone explain the advantages of utilizing Handlebars.js or similar libraries over solely relying on JavaScript? Thus far, I haven't come across any functionality in Handlebars that cannot be achieved with just pure JavaScript. ...

javascripthtmlcssnode.jshandlebars.js

The CSS Scroll-Snapping feature seems to be overlooking one specific element that it should be snapping to

Currently, this website is designed to work exclusively for mobile devices. When viewed in Chrome's mobile view using the inspector, everything appears to be functioning correctly. However, when accessed through Safari or on an actual mobile phone, th ...

ioscssmobilesafarivertical-scrolling

Using Selenium to extract and manipulate text content enclosed within specific HTML tags

Imagine you have this snippet of HTML code <tag1> "hello" <tag2></tag2> "world" </tag1> If we use driver.find_element(By.CSS_SELECTOR,"tag1").text, it will display the string "helloworld". ...

pythoncssseleniumselenium-webdrivercss-selectors

Overruled fashion

Here is the HTML code from my custom page: <div class="notes quotes-notification member-savings f-left"> <h2>My Notifications</h2> <ul> <li><b>I need to make some changes in the HTML, different from other pages you have ...

htmlcss