Guidelines for Aligning Objects

I'm struggling to align two elements in HTML. Instead of lining up next to each other, they are stacking on top of one another. What I really want is for them to be placed side by side, similar to how website navigation menus work (where you can choose between different options at the top of the page).

#home {
  background: #5F9EA0;
  border-radius: 25px;
  margin: auto;
  width: 100px;
  line-height: 50px;
  text-align: center;
  font-size: 20px;
}

#home:hover {
  background: #6495ED;
  border-radius: 50px;
  margin: auto;
  width: 105px;
  line-height: 55px;
  text-align: center;
  font-size: 22.5px;
  cursor: pointer;
}

#Alt {
  background: #5F9EA0;
  border-radius: 25px;
  margin: auto;
  width: 100px;
  line-height: 50px;
  text-align: center;
  font-size: 20px;
}

#Alt:hover {
  background: #6495ED;
  border-radius: 50px;
  margin: auto;
  width: 105px;
  line-height: 55px;
  text-align: center;
  font-size: 22.5px;
  cursor: pointer;
}
<div id="home">Home</div><div id="Alt">test</div>

htmlcss

Answer №1

To achieve horizontal alignment of block elements, you can utilize the display: inline-block property as suggested by another user.

In addition, I incorporated vertical-align: center to keep the position centered when hovered over and the size changes. If necessary, you can modify the value from center to top or any other appropriate option.

I streamlined your CSS code by eliminating redundant rules, reducing its size by nearly half.

#home, #Alt {
  background: #5F9EA0;
  border-radius: 25px;
  margin: auto;
  width: 100px;
  line-height: 50px;
  text-align: center;
  font-size: 20px;

  display: inline-block;
  vertical-align: center;
}

#home:hover, #Alt:hover {
  background: #6495ED;
  border-radius: 50px;
  width: 105px;
  line-height: 55px;
  font-size: 22.5px;
  cursor: pointer;
}
<div id="home">Home</div><div id="Alt">test</div>

Answer №2

<div> elements naturally stack over one another because they carry a default block display.

To align them side by side, you can set an inline-block display for both the #home and #Alt:

#home, #Alt {
  display: inline-block;
  vertical-align: middle;
}

You may also include a vertical-align: middle to enhance their appearance on hover (as recommended in another response).

#home {
  background: #5F9EA0;
  border-radius: 25px;
  margin: auto;
  width: 100px;
  line-height: 50px;
  text-align: center;
  font-size: 20px;
}

#home:hover {
  background: #6495ED;
  border-radius: 50px;
  margin: auto;
  width: 105px;
  line-height: 55px;
  text-align: center;
  font-size: 22.5px;
  cursor: pointer;
}

#Alt {
  background: #5F9EA0;
  border-radius: 25px;
  margin: auto;
  width: 100px;
  line-height: 50px;
  text-align: center;
  font-size: 20px;
}

#Alt:hover {
  background: #6495ED;
  border-radius: 50px;
  margin: auto;
  width: 105px;
  line-height: 55px;
  text-align: center;
  font-size: 22.5px;
  cursor: pointer;
}

#home, #Alt {
  display: inline-block;
  vertical-align: middle;
}
<div id="home">Home</div>
<div id="Alt">test</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

The <base> tag functions properly when used with the <a href> attribute, but encounters issues when used with JavaScript's document

Encountering an issue with the <base> tag in Internet Explorer (tested on IE11). Despite successfully getting my links to work using the <a href> tag, they fail to work when attempting to use JS document.location. To see this issue in action, ...

javascripthtmlinternet-explorerinternet-explorer-11

Could HTML code be inserted into the <Head> section of a NextJS page?

I need to add meta tags retrieved from the backend for a certain page to the Head section of my page component. In React, I know that I can incorporate HTML using <div dangerouslySetInnerHTML={{__html: response.someHtml}} />. Can this same method b ...

htmlnext.jsmeta-tags

How can you apply margin to an element within a column in Bootstrap 4?

Within a column, I have several span elements: <div class="container-fluid"> <div class="row"> <div class="col"> <span class="myClass">some text</span> <span class="myClass">some text</span> ...

htmlcsstwitter-bootstrapbootstrap-4

Eliminate file extensions from a URL within an IIS server

Seeking advice on how to create a consistent layout for my web pages that doesn't display the .cshtml tag in the URL. I am using JQuery, JavaScript, HTML, CSS, ASP.net (Web Pages Logic). Example URL: http:// www.site.com/page.htm New to ASP and stil ...

javascripthtmlasp.netrazorfriendly-url

Is there a way to retrieve the sub-child menu data from a JSON file?

I am currently working on creating a horizontal menu from a json file. However, I am facing issues in retrieving the subchild elements properly. Below is an example of my json file: var data = [{ "menu":[ { "MenuId":1, ...

javascriptjquerycssjsonmenu

What is the best way to blend colors in CSS?

Could someone please advise on how to create a box that transitions from silver at the top to white gradually, similar to Apple's homepage background? Appreciate your help as always. ...

htmlcss

Deactivate Date Field for Editing Orders in WooCommerce

Is there a way to deactivate the Date Created textbox on the Edit Orders page of Woocommerce? I attempted to use pointer-events: none; but unfortunately, it did not have any effect. I am seeking a method to disable the Date Created field. https://i.sstat ...

javascriptcsswordpresswoocommerce

What is the best way to create an Angular image slider that smoothly transitions between slides without any intermediate steps?

In my Angular application, I've successfully implemented an image slider. However, I am looking to tweak its behavior specifically when navigating between non-adjacent slides using the circular navigation buttons located below the slider. Currently, ...

htmlcssangularcarouselimage-slider

How to disable CSS transition on Angular 4 component initialization

I am facing a major issue with css transitions and Angular 4. The problem arises when using an external library that includes an input counter feature. Despite knowing that no additional styling is being applied to the wrapped input, the application has a ...

cssangularcss-transitions

Altering hues upon clicking the link

I'm looking for a way to set up my menu in the header using "include/header.php" and have it so that when I click on a link, it takes me to that page while also changing colors to indicate it's active. Would jQuery or PHP be more suitable for thi ...

phpjqueryhtmlcss

Tips for updating the corresponding nav link in CSS when transitioning between pages

In order to highlight the current page in the navigation menu, one method is to use an active attribute on the nav-link of the respective page: <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link navLink ...

javascripthtmlcssdombootstrap-4

What is the best way to keep the footer at the bottom and make it fixed in Material UI?

import * as React from "react"; import Container from "@mui/material/Container"; import Image from "next/image"; import Link from "@/src/Link"; import Box from "@mui/material/Box"; import Typography from &q ...

cssreactjsmaterial-ui

Retrieve information from a JSON script using C#

I need to extract data from a homepage, but the information I'm looking for is embedded in a JSON script. How can I retrieve this value? For example: <div id="contentWrap"> <div id="contentTextWrap"> <div id="contentText ...

c#htmljson

Introducing the brand new feature: Video Mute Button!

Currently, I am working on implementing a mute button for a video on my webpage. The background of my page consists of a looping video with no other content, but the sound becomes quite bothersome after a while. While I have managed to find a button to pau ...

javascripthtmlaudiovideo

Using setInterval together with jQuery to animate CSS based on changes in window size

I've been troubleshooting this issue and trying various methods, but despite it seeming logical, nothing is working. Any assistance would be greatly appreciated since I'm not very skilled in coding. My current challenge involves animating an obj ...

jquerycssanimationsetintervalwindow-resize

Sticky footer in Bootstrap causing content to overlap

I'm a beginner when it comes to Bootstrap, and I'm attempting to integrate it with Symfony2. I currently have a sticky top bar in place for navigation purposes. However, I'm facing an issue when I try to add a similar sticky footer at the bo ...

htmlcsstwitter-bootstrap

Tips for aligning a title to the bottom when its length varies

I am facing a design challenge where I need to align a header with content in a different column. The header's length can vary, so I need to figure out how to align the border-bottom consistently. (The code snippet below is just for illustration pur ...

htmlcss

Display only the div on an iPad screen

Is there a way to show this DIV only on an iPad screen? I've looked around on Google for solutions, but none of them seem to work. It always ends up displaying on my computer as well. Is it possible to make it show only on an iPad screen? @media only ...

cssipad

Display issue with alert box

I run a website where users can submit posts and receive alert messages (success or warning) when they do so. The alert messages are displayed at the top of the page using position: absolute to prevent them from affecting the layout when they appear. Every ...

htmlcss

Using jQuery to change the background color of a box both before and after elements

This is an example that I created: http://jsfiddle.net/YXqu2/ I am seeking assistance. I have added a box in my HTML with before and after elements. Using jQuery, I randomly give the box elements some backgrounds. I also want to change the border color o ...

jquerycss