Buttons that overlap when using inline-block styling

I am struggling to understand why my two buttons (#btn-color and #btn-icon) are stacked on top of each other instead of being aligned side by side. Can you help me find a solution?

#btn-color,
#btn-icon {
  display: inline-block;
}

#btn-icon a {
  font-weight: 600;
  font-size: 1.15em;
  padding: 15px 20px 15px 43px;
}

#btn-color a {
  font-weight: 600;
  padding: 20px 35px;
  border-radius: 5px;
  border: 2px solid transparent;
  color: #fff;
  background-color: #d11e5d;
}
<div id="ftr-icn-wrap" class="flex">
  <div id="btn-icon"><a href="#">professional</a></div>
  <div id="btn-color"><a href="#">Contact me</a></div>
</div>

htmlcss

Answer №1

By default, your anchor elements have a display: inline property which means top and bottom padding are not applied. To fix this, update the CSS to use display: inline-block.

#btn-color, #btn-icon {
  display: inline-block;
}

#btn-icon a {
  font-weight: 600;
  font-size: 1.15em;
  padding: 15px 20px 15px 43px;
  display: inline-block; /* updated */
}

#btn-color a {
  font-weight: 600;
  padding: 20px 35px;
  border-radius: 5px;
  border: 2px solid transparent;
  color: #fff;
  background-color: #d11e5d;
  display: inline-block; /* updated */
}
<div id="ftr-icn-wrap" class="flex">
  <div id="btn-icon"><a href="#">professional</a></div>
  <div id="btn-color"><a href="#">Contact me</a></div>
</div>

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

What are the reasons for JavaScript's inability to locate an element?

I'm facing an issue where my JavaScript code is saying that my div is null. Here is the snippet of JavaScript causing the problem: var box = document.getElementById("box"); box.style.height = box.innerText; And here is the relevant HTML code: < ...

javascripthtml

Form Rolling Over

I recently updated the navigation bar on our pending site by incorporating styled hyperlinks. Initially, one of these hyperlinks directed to PayPal, but due to security concerns, I had to replace it with an encrypted button instead. The challenge I' ...

htmlcsspaypal

An easy way to incorporate an image into an HTML button

Is there a way to add an image on a button? I've been attempting to create a banner-like element for a large button, but the image doesn't seem to integrate inside the button as desired. https://i.sstatic.net/UYxEt.png I aim to have the image co ...

htmlcss

Ways to prompt the numerical keyboard on mobile devices using the input type "text" attribute

When using the input type "number," the default keyboard on mobile is numeric. However, I prefer to use type "text" because I am entering a PIN which may begin with 0 and requires additional attributes such as minlength, maxlength, and pattern. I am curio ...

htmlformsbootstrap-4

What is the method for automatically scrolling down while hovering over an image?

How can I make it so that when an image is hovered over, it automatically scrolls to the bottom of the image? I have a couple of questions: How can I ensure the image scrolls to the end when hovered over? Currently, when I hover over the image, it doe ...

javascripthtmlcsshover

How can I make a div collapse in the same way as the Facebook chat

I am working on creating a chat feature similar to Facebook chat for personal use. Everything is functioning correctly, except for some issues with the CSS. I attempted using position absolute to arrange the div, which worked fine, but encountered problem ...

jquerycss

Border only at the bottom of the outline

I need help creating a bottom outline border when the cursor hovers over an image. I prefer to use this inner border style to avoid any layout issues with a traditional border-bottom. Below is my current code, which includes outline margins: .img-lightbox ...

htmlcssborderoutline

Refine information by using checkboxes with the help of jQuery, MySQL,

How do I use PHP and jQuery to filter content with checkboxes? I'm getting a warning about an undefined index when I try to post the form via jQuery. Check out my JavaScript file: function filterContent(){ var all = $(".all").val(); $('input.al ...

phpjqueryhtml

Can a login page be added to a third-party rendition of an existing website?

Is it feasible to develop a customized version of our school website that offers users the ability to log in and access their schedules, assignments, etc.? My objective is to design a more streamlined and visually appealing interface. What type of coding ...

phphtmlcsssqlweb

The class container-fluid from Bootstrap does not seem to be functioning properly within a Django environment

<div class="container-fluid"> <div class="row"> <img class="graph" src="{% static 'images/graph.png' %}"/> </div> </div> Hey there! I'm trying to make the graph.png static image fill the entire width of ...

pythonhtmlcssdjangobootstrap-4

What are some ways to transfer information seamlessly between two PHP files without the need for a page refresh?

On my webpage, I have implemented two iframes. The first iframe contains a button that, when clicked, should reload the second iframe with specific data, without reloading the first iframe. I am looking for a way to achieve this. Can anyone help? <?p ...

phpjavascripthtmlajaxpost

hide the container while keeping the content visible

Currently, I am working on a map with zoom in and zoom out functionalities. My main concern is how to make the red section invisible while keeping the buttons visible. This will ensure that when users search for locations on the map, their view will not be ...

javascriptcssreactjsmaterial-uistyled-components

Using JQuery to Update Text, Link, and Icon in a Bootstrap Button Group

I have a Bootstrap Button group with a split button dropdown. My goal is to change the text, href, and icon on the button when an option is selected from the dropdown. I am able to change the text successfully, but I'm having trouble updating the HREF ...

javascriptjqueryhtmltwitter-bootstrapfont-awesome

Handling errors in image echo in PHP

My attempts to manage 404 images retrieved from omdbapi.com have failed due to issues in my code. I am currently looping through an array to create a movie list. echo '<a href="'.$oIMDB->getUrl().'" target="_new"><img class="i ...

javascriptphphtml

CSS - creating space for a two-column layout list

Here is a visual representation of the list I am working with: -------------------- | | | | 1 | 2 | | | | | 3 | 4 | | | | | 5 | 6 | | | | -------------------- Th ...

htmlcsshtml-lists

hover over the picture with your cursor

Struggling with jquery and css, could use some assistance :) Check out my html code below: <html> <head> //myscripts <script> $(document).ready(function(){ $(".cover").hover(function(){ //the function i need to write } ...

javascriptjqueryhtmlcss

Is it possible to include an element id in a CSS URL request?

I have an SVG file containing a series of <symbol> elements, each with unique ids. What I am trying to achieve is to use the background-image property in an HTML file to set the element with the id I choose, like this: background-image: url(“sprite ...

htmlcsssvg

Encountering ERR_BLOCKED_BY_XSS_AUDITOR while attempting to download a file through selenium

I am currently attempting to download a file using selenium by replicating a click on a download button, but Chrome is indicating an error with ERR_BLOCKED_BY_XSS_AUDITOR. Even when I try to bypass this by utilizing the "--disable-xss-auditor" argument, th ...

htmlseleniumselenium-webdriverselenium-chromedriverxss

Surge the PrimeNG DialogModule by integrating the CalendarModule to enhance its functionality

Looking for a way to create an Edit popup dialog that includes an input form in Angular2 using the PrimeNG widgets. I have encountered issues with the dynamic content of the dialog box as shown in the screenshot. https://i.sstatic.net/r3INA.png I attempt ...

cssangularprimeng

Show image when hovering over individual words

Is there a way to display different descriptions or images when hovering over each word in a paragraph using HTML? It seems that only the last element is being retrieved and displayed across the entire paragraph. Any suggestions on how to fix this issue wo ...

javascripthtmlcss