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

polygon with five or more sides

Can divs be created with shapes such as five or six corners? I am looking to create clickable zones on a map and any alternative methods would be greatly appreciated. ...

csshtml

Delving into the World of CSS

I have been working on changing the background image using this JavaScript code, but I am not sure what to reference in the CSS file. Despite reading through everything, my screen still remains blank. $(function() { var body = $('body'); var bac ...

javascriptjqueryhtmlcss

Is it possible to use the AngularJS function with the <div> HTML element?

I am facing an issue with displaying a modal when clicking on a <div> element. The function assigned to show the modal by changing the CSS property 'display' from 'none' to 'block' works fine when attached to a button, b ...

javascripthtmlangularjs

Can React components receive props or data when they are inserted into regular HTML code?

I have a project where I need to make updates to an old-fashioned website. The current layout is table-based and coded by hand. My idea to streamline the process is to use React to minimize repetitive coding tasks. Specifically, I want to loop through an a ...

javascripthtmlreactjs

Adding quotes is optional when using the append function

We are retrieving product options from the displayed html using variables PRODUCT_CUSTOM_1_ and PRODUCT_NAME_. Some products have quotations like " and '. However, when we post these strings elsewhere, they get cut off at the ". We need to either remo ...

javascriptjqueryhtmlquotations

What is the best way to assign a Python variable to an <a-assets> element?

There exists a Python function that provides the chosen background <a-sky ID="sky" color="{{object.background}}"></a-sky> The backgrounds can be in the format of '#c6aa99', '#e1a600', '#290942', 'star' ...

pythonhtmlaframe

Attitude: Defiant and Ignoring Authority

So far, no suggestions have been made, indicating that maybe I haven't properly summarized the issue; The problem arises when I absolutely position the section with the class="container" using an additional class or id specific to that <div>. I ...

javascriptjqueryhtmlcss

The image upload failed: the server could not locate the requested URL

I am completely new to working with Flask, and I'm currently in the process of creating a basic image uploading application. After comparing my code with various tutorials on how to build similar apps, it seems like everything is in place. However, w ...

javascripthtmljqueryajaxflask

The Dojo claro css method utilizes absolute positioning for styling ContentPane elements

I am currently utilizing dojo 1.8 and facing an issue with unwanted padding in my bordercontainer/contentpane layout. The problem arises when I incorporate the claro css file, as it seems to apply styles directly inline to the div elements used for my cont ...

cssdojo

Do Scss mixins have the ability to adapt to different screen sizes

In my CSS, I set different font sizes for different devices: For example: @media only screen and (min-width: 480px) and (max-width: 599px) { t-heading { font-size:14px; } } @media only screen and (min-width: 600px) { t-heading { font-size:24px; } } I ...

cssresponsive-designsass

How do you position items in the center and lower right corner of a flexbox that takes up the entire

One feature on my website is a flex box that takes up the entire window with a width of 100% and a height of 100vh. Within this flex box, I've centered text and a button, but now I'd like to add a footer to the page. If I simply place the footer ...

cssruby-on-railsrubywebflexbox

PHP code to create a search form with a dropdown menu

I'm currently working on developing a simple advanced search feature where users can input a keyword and select a category from a dropdown menu. The search functionality will then display results that match both the selected category and keyword in th ...

phphtmlmysql

Utilizing CSS in Angular applications

I am currently working on an Angular 2 application and I am fairly new to Angular. I am facing an issue where my CSS does not seem to be applying properly. There are three key files involved: landing.component.html landing.component.scss landing.compone ...

cssangular

I am looking to transmit information from flask to React and dynamically generate HTML content based on it

index.py @app.route('/visuals', methods=["GET", "POST"]) def visuals(): global visclass return render_template('visframe.html', images=visclass.get_visuals()) visframe.html <div id='gallery'></div> { ...

javascripthtmlreactjsflaskreact-fullstack

Guide to dynamically altering the header logo as you scroll further

I'm attempting to dynamically change the logo in my header based on how far I've scrolled down the page. While I have experimented with libraries like Midnight.js, I specifically need to display an entirely different logo when scrolling, not just ...

jqueryhtmlcssheader

Creating dynamic charts in Javascript using Firebase

My dad recently asked me to enhance our motor home by integrating an Arduino with Firebase to monitor the water and propane tanks. He's hoping to be able to check tank levels from his phone so he can see when they need refilling. I've successful ...

javascripthtmlfirebase

JavaScript updates the cursor after the completion of the JS function

Here is some code that I have been working with: <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> </head> <body style="background-color:yellow;width ...

javascriptjqueryhtmlajax

The website's responsiveness is not adjusting correctly to different screen widths

When I switch to a responsive website, the background turns red at a width of "285px" even though I have set the max width to "1140px". If I use min-width, the effect doesn't show up until 256/276px. I've tried both max and min width settings, bu ...

cssresponsive-designmedia-queries

Increase the jQuery level and utilize the .find() method

Currently, I am delving into the realm of jquery and facing a minor hiccup with selectors. Below is the structure of my DOM: <li> <header class="title"> <span>Text</span> <a href="#work-1">My trigger</a> ...

javascriptjqueryhtml

Why do I continue to encounter the error message saying 'jQuery is not defined'?

As a newcomer to the world of jQuery and Visual Studio Environment, I embarked on the journey of creating a circular navigation menu bar following the instructions provided in this link. Despite my efforts, I encountered a hurdle in the head section where ...

javascriptjqueryhtmlcssjquery-ui