Place the two buttons in position

I have a section where I need to include two buttons. One button on the left labeled "Sunday" and one on the right labeled "misc". I want the two buttons to be evenly placed within the area, so I assigned them the same class since they are the same size. Here is the code:

<div id="switcher">
 <div class="button" id="Sunday">Sunday</div>
 <div class="button" id="mic">mic</div>

Initially, I assumed that "Sunday" would naturally appear on the left side. I just needed to add some formatting rules to separate the two buttons such as adding padding on the left... However, the outcome was unexpected - "Sunday" ended up on the right side. Why did this happen? Please refer to my CSS on jsfiddle.

Thank you.

htmlcss

Answer №1

To improve the layout of the buttons, consider removing the position: absolute from the .button class and ids (#Sunday and #mic).

Instead of using margins and paddings on the buttons, try using display:inline-block for a cleaner look. You can also set specific widths for the buttons to ensure they line up properly next to each other.

If you need a fixed width for the switcher at 456px, set the buttons' width to half of that (228px) and ensure there is no space between the button divs in the HTML markup.

For a more practical demonstration, check out this version: http://jsfiddle.net/ftQD5/19/

To vertically align the text with the buttons, adjust the positioning to relative, add a vertical offset, and use line-height equal to the div height. This will centralize the text within the buttons. See the updated example here: http://jsfiddle.net/ftQD5/26/

Answer №2

Concerning your styling with CSS, removing the position:absolute from both the .button and .mic classes will greatly improve the layout. By doing so, you should see the desired result of Sunday aligned on the left and Mic on the right with noticeable left padding.

Answer №3

The reason for this issue is that the button class has a margin-left of 120, but the mic id has its margin-left attribute reset to 0.

UPDATE Here is an improved solution in this fiddle: http://jsfiddle.net/ftQD5/13/

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

Is there a different way to invoke PHP within JavaScript?

Is it possible to include PHP code in JavaScript? I have come across information stating that this practice is not recommended: document.getElementById('id1').innerHTML="<?php include my.php?>"; If including PHP directly in JavaScript is ...

javascriptphphtmlweb

Generating numerous variables simultaneously is a feature of SASS

Is it possible to utilize a SASS map in order to generate individual variables for each key-value pair? For instance, I aim to achieve the following: $heading: ( 1: 5rem, 2: 4.5rem, 3: 4rem, 4: 3.5rem, 5: 3rem, 6: ...

htmlcssreactjssassless

How do I eliminate excess space following the resizing of the Material UI Drawer component?

I adjusted the size of my MUI drawer to a specific width and now I am facing an issue where there is extra space left after resizing. This results in a margin-like space between the drawer and the Lorem Ipsum text content. My goal is to eliminate this rema ...

cssreactjsmaterial-uinavigation-drawerwhitespace

Separating a picture into distinct sections

Is there a way to divide an image into different parts to create hover effects? For example, hovering over the top part of the image triggers one change, and hovering over the bottom part triggers another change. This example demonstrates this concept usin ...

htmlcss

Assigning the CSS class "active" to the navigation menu in ASP Classic

Seeking assistance with setting a CSS class for the current page in an include file that contains the primary navigation menu. Here is my current progress: public function GetFileName() Dim files, url, segments, current 'obtain c ...

cssasp-classicmenuswitch-statement

Is there a way to connect two tables using CSS pseudo-selectors?

Is there a way to make two separate tables interact with each other using CSS pseudo-selectors? I have a data table and an auto-numbered table, and I want the rows to highlight in both tables when hovering over a cell in one of them. I've tried using ...

javascripthtmlcssreactjscss-selectors

Error: Attempting to assign a value to 'onclick' property of null object [Chrome Extension]

window.onload = function() { document.getElementById('item_save').onclick = function() { var item_name = document.getElementById('item_name').value; var item_size = document.getElementById('item_size').value; v ...

javascripthtmlgoogle-chrome-extension

Troubleshooting: Bootstrap 5 Submenu Dropdown Fails to Expand

I am struggling with implementing a dropdown menu in Bootstrap 5. Although the dropdown menu is visible, I am facing an issue where the submenu items do not expand upon clicking. Below is the code snippet that I am using: <body> <nav class=&qu ...

javascripthtmldropdownbootstrap-5

Customizing the size of dateBox icons in JQuery Mobile

Is there a way to increase the button size within the input box of a dateBox? Currently, it appears small and difficult to click accurately. Additionally, it would be beneficial if clicking anywhere in the input field could open the calendar, instead of ju ...

jqueryhtmljquery-mobile

Having trouble getting event modifiers to work in Vue when added programmatically

Trying to dynamically add events using v-on through passing an object with event names as keys and handlers as values. It appears that this method does not support or recognize event modifiers such as: v-on=“{‘keydown.enter.prevent’: handler}” T ...

javascripthtmlvue.jseventsevent-handling

Is the jQuery popup malfunctioning? It appears to be stuck within a div

Currently, I am in the process of developing a website at and I am facing an issue with the hover type menu. Whenever I click on the arrows next to the logo, instead of fully opening up, the menu seems to be getting stuck and is not expanding entirely. I ...

jquerycss

iOS hover menu behavior: Close dropdown when the same element is tapped again on iPads

The navigation bar features categories such as: politics, economy, education Upon clicking on these categories, a dropdown menu appears with locations like: asia, europe, North America What I am looking for is this: If the user clicks (tabs) or hovers (o ...

javascripthtmljquerycss

Build desktop-style applications using a unique user interface library and integrated development environment designed specifically for HTML, JavaScript

I am looking to create a desktop application using HTML, JavaScript, and AJAX for the purpose of making it available on multiple platforms. I was wondering if there is a UI library and web IDE similar to WebOS Enyo that I can use to build my HTML/AJAX app? ...

javascriptajaxhtmljquery

Having difficulty automating the selection of dropdown menu using Selenium in Python

I'm struggling to automate the selection of a specific element on this webpage using Selenium in Python. The elements I'm targeting from the webpage are as follows: https://i.sstatic.net/d4xcH.png Upon inspecting the page element, I found this ...

pythonhtmlseleniumselenium-webdriverweb-scraping

Using AngularJS to load a custom JavaScript file within an ng-view

In my sample project, I have utilized Angular Js for the front-end. I have developed a template and implemented dynamic loading of views based on requirements. For this application, I am utilizing angular, jquery, and cusotm js. The structure of my templat ...

javascriptjqueryhtmlangularjsdynamic-loading

Iterate through all elements in Javascript/jQuery while excluding any nested children elements

Looking to retrieve all elements in the document: $("*").each(function(){ var el = $(this); }); I want to target only parent elements, excluding their children. For example: <div> <!--TARGET--> <div></div> <!--IGNORE--&g ...

javascriptjqueryhtmleachelement

Like the Word outline view, the list view can be easily collapsed and expanded with a simple click

I've seen a few examples, but I haven't been able to achieve what I'm looking for. I need to extract text from a field and convert it into an outline view similar to the one in Word. Is this possible? Any help would be greatly appreciated. I ...

javascripthtmlcssjsonjelly

Personalized Bootstrap 4 grid system

Could someone guide me on how to create this grid layout with Bootstrap 4? I am trying to achieve a design where one column stretches from the edge of the window to the inside, while the other column is half the width of a standard .container element. ht ...

cssbootstrap-4grid

Is there a way to determine the names of the functions that are being called?

I'm working on mastering Google Development Tools. Is there a way to determine which specific functions, especially those in Javascript, are needed before a page can load successfully? ...

javascripthtmlconsoleload

What crucial element is absent from my array.map function?

I have successfully implemented a table with v-for in my code (snippet provided). However, I am now trying to use Array.map to map one array to another. My goal is to display colors instead of numbers in the first column labeled as networkTeam.source. I at ...

javascripthtmlvue.jsvuejs2