Create a layout with two rows of two buttons in HTML aligned to the right side while maintaining the left side's

I am currently working on designing a menu for my webpage that includes four buttons. My goal is to have two buttons displayed at the top of the page and two buttons displayed at the bottom. To achieve this, I have written the following CSS code:

.navButton {
padding: 3%;
float:right;
background:#C0C0C0;
margin-left:1%;
margin-right:1%;
}

I attempted to use
tags to position the second pair of buttons below the first pair, but this caused some layout issues on the left side of the page. Can someone help me figure out how to evenly distribute four equally sized buttons in the top right corner of the page? Currently, due to variations in text sizes, the buttons are slightly different in size and I would like them to be exactly equal.

Any suggestions would be greatly appreciated! Thank you!

javascripthtmlcss

Answer №1

Check out this link.

Designed and created by me.

You can easily replicate it by viewing the source code and copying the HTML+CSS.

Answer №2

For a different approach, try inserting this code between two opening and closing <a> tags:

<div style="float:right"></div>

Make sure to eliminate any unnecessary <br> tags.

Answer №3

Following the two anchor tags, add the following line:

<div style="clear:both"></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 causes the console.log function to behave in this manner?

When using the node.js interpreter, if you run the code: console.log("A newline character is written like \"\\ n \"."); //output will be:- // A newline character is written like "\ n ". However, if you just enter the following in ...

javascriptnode.jsconsole.log

Automated scrolling effect within a container element

I am working on a div container named wrapper2 that houses a chat interface. Inside the container, there are five messages in a div called chatleft, each containing images. The height of the wrapper2 div is smaller than the combined height of all the messa ...

htmlcss

Having trouble with the auto-complete feature in the search box when using Jquery

I'm currently working on implementing TypeAhead functionality for a search textbox. Within the form, I have 2 radio buttons and if one of them is selected, I need the type-ahead feature to populate the list of masters in the search box. //html < ...

javascriptjqueryajaxjquery-uijquery-autocomplete

Place a gap at a specific spot within the boundary line

Here is a CSS code snippet that displays a horizontal line: .horizontalLineBottom { border-bottom:solid #6E6A6B; border-width:1px; } Is it possible to add space at a specific position on this line? For example, _________________________________ ...

javascriptjquerycss

Unexpected loading glitches occurring in vue-material components

I recently delved into the world of Vue.js and VueMaterial, which has been a refreshing and new experience for me since I've mostly focused on Native Android development in the past. Currently, I'm facing an unusual issue that seems to stem from ...

javascriptvue.jsvuejs2vue-material

Arrange the Proxy Array of Objects, the localeCompare function is not available

Encountering an error while attempting to implement ES6 arrayObj.sort(a,b) => a.property.localeCompare(b.property) syntax: Getting TypeError: a.property.localeCompare is not a function. Suspecting that localeCompare might not be in scope, but unsure ...

javascriptvue.jssortingvuejs3arrayobject

Struggling with Implementing Modals in Bootstrap 3.3.7

I've been encountering an issue with modal functionality. In order to troubleshoot my own modals, I decided to replicate the modal example code from Bootstrap's website into a new HTML file. Despite linking to the CDN, the modal does not functio ...

htmlcsstwitter-bootstrap

Modify the name format using an AngularJS directive

I've been struggling to understand how to effectively write AngularJS directives, even after reading various blogs. The issue I am facing is with an array of names in the format "lastname, firstname". My goal is to create a directive that will display ...

javascriptangularjsangularjs-directive

Sending image id as a parameter to a MySQL query in PHP using jQuery

Having trouble passing image ids to mysql queries. I've tried the following code but keep getting an Undefined index x error. I've checked multiple Stack Overflow answers without success. echo "<img src=http://localhost/ss/img/".$p['pat ...

javascriptphpjquerymysqlajax

"Transforming JSON data into structured key-value pairs using JavaScript

Develop a function named "json_filter" that accepts a JSON-formatted string as input. The accepted format is an array of objects, where each object contains keys for "mass," "density," "temperature," and "velocity," each mapped to a floating-point number. ...

javascriptjson

Showing the name of a class

Hello everyone, I have a piece of JavaScript code that generates HTML buttons when the page loads. The button attributes are fetched from a database through an ASP page. Everything is working fine except for displaying the class attribute - it shows as u ...

javascripthtml

A straightforward Node.js function utilizing the `this` keyword

When running the code below in a Chrome window function test(){ console.log("function is " + this.test); } test(); The function test is added to the window object and displays as function is function test(){ console.log("function is " + this.tes ...

javascriptnode.jsv8

How can I use JavaScript to find a keyword on a webpage that is not located within an <a> tag or its href attribute?

I'm on a mission to locate a specific keyword within a webpage. Sounds simple, right? Well, here's the tricky part - I need to disregard any instances of this keyword that are nested within an <a> tag. For example: <p>Here is some s ...

javascripthtmlregex

Issue with bookmarklet compatibility on mobile browsers like iOS and Android

Here is the bookmarklet code I have: javascript:(function(e,a,g,h,f,c,b,d){if(!(f=e.jQuery)||g>f.fn.jquery||h(f)){c=a.createElement("script");c.type="text/javascript";c.src="cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js";c.onload=c.onreadystate ...

javascriptjqueryajax

Utilizing Angular.js to nest directives seamlessly without cluttering the markup

Expressing my query might pose some difficulty, but I appreciate your patience. I comprehend that in the realm of Angular.js, directives play a crucial role in driving dynamic markup. What was once achieved through jQuery can now be accomplished using dir ...

javascriptangularjs

Adjust the parent div's background color when a radio button is selected

Is it possible to dynamically change the background color of a div that contains a radio button when the button is checked? Here is an example of the HTML code: <div class="custom-container"> <input id=“example” type="radio" name="opt ...

javascriptjqueryhtml

Issue with SetTimeout not functioning properly on initial use within socket.io

Currently, I am trying to come up with a method to retrieve an IP address from a node server that is hosted on a dynamic IP. The issue I am facing is that the setTimeout function does not seem to work properly on the server side during the initial launch. ...

javascriptnode.jssocket.io

What is the best way to transfer variables between HTML and PHP?

Greetings! I have a quick query: What is the best practice for transferring variables while developing on your website? - get method, post method, session, cookies, hidden fields, etc. ...

phphtmlvariableswebparameter-passing

Tips for positioning your side navigation menu parallel to the page edge

Im looking to have the side navigation floated to the left as I scroll down the page. I tried using the sticky property, but it didn't work out. Here's a snippet of the code: .sticky-class { position: sticky; top: 30px; } This is how my HTML ...

cssangular

Unique 15-character code following email address

I've noticed a strange 15-character code that keeps attaching itself to the end of my outgoing emails. https://i.sstatic.net/tZdQo.png This mysterious code seems to change with each batch of emails I send out. Even though multiple emails sent in a l ...

phphtmlemail