Place two anchors side by side using inline-blocks without using the float property

Is there a way to align two buttons next to each other without using floating?

I have encountered an issue where adding a width to one of the buttons causes it to jump down and be on a different line than the other button.

The buttons are centered, so they cannot be floated.

Any suggestions on how to achieve this alignment without using floating?

.home_topbar .more_information, .home_topbar .order_now {
        margin: 80px 0 0;
    }
    .home_topbar .more_information {
        margin-right: 15px;
        width: auto;
    }
    .home_topbar .order_now {
        margin-left: 15px;
        width: 400px;
    }
    
        .button {
        display: inline-block;
        height: 60px;
        padding: 0 15px 0 30px;
        color: #FFF;
        border-radius: 5px;
        background: #000;
        text-align: left;
        font-weight: 400;
        color: #FFF;
        font-size: 1.2em;
        line-height: 60px;
    }
    <a href="" class="more_information button">
        abc
    </a>
    
    <a href="" class="order_now button">
        def
    </a>

htmlcss

Answer №1

Try implementing this solution using the white-space property.

If you are working with HTML, adjust your CSS in the following way:

.button {
        display: inline-block;
        height: 60px;
        padding: 0 15px 0 30px;
        color: #FFF;
        border-radius: 5px;
        background: #000;
        text-align: left;
        font-weight: 400;
        color: #FFF;
        font-size: 1.2em;
        line-height: 60px;
    }
    .home_topbar {
        border: 1px dashed blue;
        white-space: nowrap;
        text-align: center; /* to center buttons */
        min-width: 550px; /* Addressing potential overflow... */
    }
    .home_topbar .more_information, .home_topbar .order_now {
        margin: 80px 0 0;
    }
    .home_topbar .more_information {
        margin-right: 15px;
        width: auto;
    }
    .home_topbar .order_now {
        margin-left: 15px;
        width: 400px;
    }
    <div class="home_topbar">
    <a href="" class="more_information button">abc</a>
    <a href="" class="order_now button">def</a>
    </div>

To prevent the two inline elements from wrapping onto a second line when resizing the window, add white-space: nowrap to the parent container .home_topbar.

Nevertheless, resizing the window may eventually lead to horizontal scrolling due to overflow, so consider setting a min-width value to handle this.

In some cases, specifying a min-width might make nowrap unnecessary.

For a more adaptable design, CSS table cells could be utilized instead.

Check out the demo here: http://jsfiddle.net/audetwebdesign/g6LWc/

Source: http://www.w3.org/TR/css3-text/#white-space-property

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

Tab order in Angular Forms can be adjusted

While constructing a two-column form for simplicity, I utilized two separate divs with flexbox. However, the tabbing behavior is not ideal as it moves down the form rather than moving across when using the tab key to navigate between inputs. I am seeking a ...

htmlangularangular-forms

What is the best way to superimpose text on a variety of images with varying sizes using CSS

I have a client who is requesting a sold text to be displayed on top of all images that have been sold, positioned in the bottom left corner of each image. While I have successfully implemented this feature, the issue arises when dealing with images of var ...

htmlcssoverlayimage-size

What enhancements does HTML5 provide for accessibility?

In what ways does HTML5 improve accessibility compared to HTML 4.01 or XHTML 1.0 Strict? ...

xhtmlhtmlaccessibility

Blog Format Featuring Side-by-Side Columns

Is there a way to achieve horizontal columns that don't cut off articles and flow seamlessly into the next column? I want the columns to have varying heights, such as Post A at 60% height, followed by Post B at 40% height, then Post C at 30%, and fina ...

htmlcss

Tips for resolving the issue of cypress automatically opening a new tab

Recently, I've encountered an issue while using Cypress to perform a test on my website. Every time I click on a button, it redirects me to a new tab, disrupting the flow of my test with Cypress. Despite trying to remove the "target" attribute using t ...

javascripthtmlattributescypress

What is the CSS solution for eliminating a line break immediately following the first word?

While designing an email template in html/css for a mailing list, I encountered an issue where on mobile devices the line breaks after the first word for every paragraph. You can see an example of this problem here. The code for the email template was gen ...

htmlcsshtml-email

Matching multiple divs with different ids in PHP using preg_match_all and regex

I have an HTML page structured like this: <!DOCTYPE html> <html> .... <body> <div class="list-news fl pt10 "> Blue </div> <div class="list-news fl pt1 ...

phpjqueryhtmlcssregex

Creating a Search Functionality within a Tab Component in Ionic

I'm currently facing an issue with adding a search bar under the "Search" tab in my project. I've tried implementing similar logic to what's shown here, but it doesn't seem to function properly when using the ionic serve --lab live in-b ...

htmlangularjscordovaionic-framework

Responsive Website with Horizontal Scrolling

Is it feasible to develop a website that smoothly scrolls across five panels horizontally while maintaining responsiveness? I've managed to achieve this for a specific viewport size by nesting a div with the five panels extended and using javascript t ...

javascriptjqueryhtmlcssresponsive-design

Is there a way to showcase English and CJK text vertically with CSS?

This particular issue was first discussed 14 years ago on Stack Overflow, but a definitive solution still remains elusive. My goal is to have both CJK and Latin characters displayed vertically, with their bottoms facing the right side. While writing-mode ...

htmlcsscross-browserlocalecjk

Stuck autoplay feature when clicking

There is an issue with the play function in the built-in browser audio player. Initially, it starts automatically with the following code... function play(){ var audio = document.getElementById("myaudio"); audio.play(); } However, when modifying the code ...

javascripthtmlaudioonclick

Tips for Enhancing JavaScript Performance

Is there a way to enhance my JavaScript code like this: $(window).scroll(function() { if ($('#sec1').isVisible()) { $('.js-nav a.m1').addClass('active'); } else { $('.js-nav a.m1').removeClas ...

javascriptjqueryhtml

Encountering an undefined error while attempting to retrieve an object from an array by index in Angular

Once the page is loaded, it retrieves data on countries from my rest api. When a user selects a country, it then loads the corresponding cities for that country. Everything is functioning properly up to this point, however, upon opening the page, the city ...

javascripthtmlangulartypescript

Use selenium to locate an element based on its CSS selector

Looking to extract user information from each block using the following code snippet: driver.get("https://www.facebook.com/public/karim-pathan") wait = WebDriverWait(driver, 10) li_link = [] for s in driver.find_elements_by_class_name('clear ...

pythoncssseleniumselenium-webdriverweb-scraping

What is the best way to access the tooltip text in Reddit?

Currently, I am in the process of developing a Selenium web scraping tool specifically for Reddit. However, I am encountering some challenges in extracting the timestamp displayed in the image. from selenium import webdriver from webdriver_manager.chrome i ...

pythonhtmlseleniumwebweb-scraping

Trigger an instantaneous update of the masonry grid

My website currently utilizes a script that generates a grid, and the grid elements are automatically adjusted each time the width of the viewport is modified. Although I do not have access to or control over the script since I did not write it myself, I s ...

javascripthtmljquery-masonry

Issue with displaying PDF files on Google Chrome due to a software glitch

Recently, I encountered a puzzling issue on Google Chrome. I am not sure if the error lies with Google or within my code. When I set the div as display: none; and then show it again, the PDF view only shows a grey background. However, if I zoom in or out, ...

javascriptcssgoogle-chromepdf

Tips for keeping div and input tags selected even after a user clicks

I am working on a quiz script and I am trying to customize it so that when a user clicks on the div or input tags, they remain selected with a different background color. Currently, I have achieved changing the background color of the div when clicked, ...

htmlcssformsinputlabel

Steps for extracting HTML content from a beautiful soup object

My current situation involves a bs4 object listing: >>> listing <div class="listingHeader"> <h2> .... >>> type(listing) <class 'bs4.element.Tag'> I am aiming to retrieve the raw html as a string. Initially, ...

pythonhtmlbeautifulsouphtml-parsing

Show a div once all its content has been fully loaded

I have a section on my webpage that includes images, text, and links. It functions as a carousel. My goal is to show the section only after all content has loaded. I am looking to transition from opacity 0 to opacity 1 with a fade-in effect. Here is the ...

jqueryimagehtmldocument-ready