Arranging three buttons in a row with a larger button positioned on top

I'm struggling to implement my image button webpage. I can't seem to properly align three buttons at the bottom of the page.

       .fullwidth {

         width: 100%;

         height: 80%;

         margin-left: 0;

         margin-right: 0;

         padding-left: 0;

         padding-right: 0;

         display: block;

         text-align: center;

       }

       .tierwidth {

         width: 33.333333333333%;

         height: 20%;

         margin-left: 0;

         margin-right: 0;

         padding-left: 0;

         padding-right: 0;

         display: block;

         text-align: center;

       }

       html,

       body {

         height: 100%;

       }

       #footer {

         position: fixed;

         bottom: 0;

         width: 100%;

         height: 20%;

       }

       .btnContainer {

         float: left;

       }
<!DOCTYPE HTML>
<HTML>

<head>
  <link href="css/style.css" rel="stylesheet" type="text/css">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, maximum-scale=1">
  <title>Excl Home</title>
  <link rel="icon" href="favicon.png" type="image/png">
  <link rel="shortcut icon" href="favicon.ico" type="img/x-icon">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
  <!-- FONTS BELOW -->


  <!-- FONTS STOP -->

</head>

<body>
  <a href="#" class="fullwidth"></a>
  <div class="footer">
    <div class="btnContainer">
      <a href="#" class="tierwidth"></a>
    </div>
    <div class="btnContainer">
      <a href="#" class="tierwidth"></a>
    </div>
    <div class="btnContainer">
      <a href="#" class="tierwidth"></a>
    </div>
  </div>

  <br class="clearFloat">


  </head>

</html>

htmlcss

Answer №1

When creating a simple page with four buttons, bootstrap may not be necessary. By consolidating the CSS properties shared between .fullwidth and .tierwidth into a single rule, it reduces redundancy. The distinct differences in properties are separated into their own rules such as width and height. Setting them to float left allows them to fill as much space as possible before wrapping to the next line. Adding contrasting colors can help distinguish each button.

If you prefer the .tierwidth buttons to be within a fixed container, the HTML structure will need to be adjusted accordingly.

.fullwidth,
.tierwidth {
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;
  padding-right: 0;
  display: block;
  text-align: center;
  
  float:left;
}
.fullwidth {
  width: 100%;
  height: 80%;
  
  background-color: red;
}
.tierwidth {
  width: 33.333333333333%;
  height: 20%;

  background-color: blue;
}
html,
body {
  height: 100%;
  margin: 0;
}
<a href="#" class="fullwidth"></a>
<a href="#" class="tierwidth"></a>
<a href="#" class="tierwidth"></a>
<a href="#" class="tierwidth"></a>

If this design is part of a larger website and you are already utilizing bootstrap elsewhere, consider exploring the grid system for consistency. Minimizing custom CSS for layout can simplify styling and modifications in the future.

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

Expand the column to occupy the remaining height of the row

I've been on the hunt for a solution to this issue, but I haven't had any luck finding one. Various flexbox properties like flex-grow: 1; and align-self: stretch; have been attempted, but none seem to achieve the desired outcome. The goal is to ...

htmlcssbootstrap-4flexbox

CSS navigation drop down menu styling

I am struggling to align the navigation menu on the right side in the center of the header area, similar to what is done on cyberchimps. https://i.sstatic.net/2OeJe.png Additionally, I want the hover state to remain active on the BGA sub-menu when hoveri ...

htmlcssdrop-down-menuheadernavbar

Expand Menu Options (jQuery)

Currently facing a jQuery problem that I can't seem to figure out. I've set up a menu with submenu elements and want to toggle the content height by clicking on menu items. The issue arises when clicking on another item causes the content to coll ...

javascriptjqueryhtmlshopify

In a responsive layout, a floating div refuses to adhere to the left alignment

I am working on a dynamic list using ASP:REPEATER with floating divs aligned to the left. The current layout is as follows: +---------------------+ +---------------------+ +---------------------+ | | | | | ...

htmlcssresponsive-designcss-float

Switching classes in real time with JavaScript

I'm struggling to understand how to toggle a class based on the anchor text that is clicked. <div> <a id="Menu1" href="#">Menu</a> <div id="subMenu1" class="subLevel"> <p>stuff</p> </div> <div> <a i ...

javascriptjqueryhtmlcss

Show MaterialUI Dialog in fullscreen mode

I'm just starting out with React and Material-UI, and I'm trying to figure out how to print my current dialog. The issue I'm running into is that I can't seem to find a way to set the Dialog to full screen for printing while keeping it ...

cssreactjsmaterial-uireact-tsx

Enroll a nearby variable "Data" to an Observable belonging to a different Component within an Angular application

Looking to update the HTML view using *ngIf, depending on a local variable that should change based on an observable variable from a shared service. HTML <div class="login-container" *ngIf="!isAuthenticated"> TypeScript code for the same componen ...

htmlangulartypescriptobservable

The content inside the bootstrap modal is not visible

My goal is to trigger a modal window when a specific div is clicked using bootstrap modal. However, upon clicking the div, the screen darkens but the modal body fails to appear. Code: <html> <head> <title></title> ...

javascriptjqueryhtmlcsstwitter-bootstrap

Windows and MacOS each use unique methods for displaying linear gradients

Check out this code snippet featuring a background gradient background: rgba(0,0,0,0) linear-gradient(rgb(245, 245, 245),rgba(0,0,0,0)) repeat scroll 0 0; This code renders correctly on Windows (chrome, ie, firefox) https://i.stack.imgur.com/XU2gW ...

htmlcsswindowsmacos

Menu drop down offset in Internet Explorer 7

Having some difficulty with a dropdown menu specifically in IE7. The menu functions correctly in all other browsers, but in IE7 it seems to be misaligned for some reason. Any suggestions or insights would be greatly appreciated. Please refer to the menu co ...

htmlcssdrop-down-menuinternet-explorer-7

Having difficulty retrieving the Area and Range information in ChartJS

I am new to working with HTML5 and ChartJS. I have noticed two different types of declarations when attaching JS Chart Versions 1.0.1 and 2.1.1. Can you please provide some insight into this? Additionally, I am facing an issue where the stripes behind the ...

javascripthtml

Tips for modifying a biography with PHP

I'm working on a feature that allows users to edit their biography. I want the text stored in the database to show up in the text box, rather than just as a placeholder. How can I achieve this? Currently, the text is set as a placeholder, but my goal ...

phphtml

The issue regarding the fixed table layout bug in Firefox

Upon testing Firefox 5, it has come to my notice that an additional pixel of space is being added between the right column and the table border due to this particular piece of code: <style type="text/css"> table { border: 1px s ...

htmlcssfirefoxhtml-table

Having trouble with .animate() function?

Struggling to animate the position of my background image $(function() { $('#nav1').bind('click',function(event){ $('ul.nav').stop().animate({backgroundPosition: 'right top'}, 1000); }); $(function() { ...

javascriptjqueryhtmljquery-animate

HTML and Python synchronize perfectly when handling date formatting

Here is a code snippet I am working with: {% for x in fixtures %} <TR style="display:block" onclick="team_visibility('match{{ forloop.counter }}');"> <TD> {{ x.fixturedate }}</TD> ...

pythonhtmldjango

"Trouble with making jQuery AJAX calls on Internet Explorer versions 8 and 9

I've been searching for the answer to this problem without any luck. I have a page with jquery ajax calls to an API service. It works well in Chrome, Safari, Firefox, and IE 10, but fails in IE 9 and 8. Here is the code: $.ajax({ ...

javascriptjqueryhtmlajaxinternet-explorer

The HTML/CSS authentication system is experiencing technical difficulties and is not functioning as intended

I came across this code on codepen.io and tried to implement it using the provided HTML and CSS. However, I encountered some errors during implementation. While the code works perfectly in the CodePen compiler, it doesn't seem to be error-free. One i ...

htmlcss

Firebase web authentication is most effective upon the second attempt

I am currently working on a website that interacts with Google's firebase to read and write data. The website has both anonymous and email authentication enabled. Users can view the data anonymously, but in order to edit or write new data, they must s ...

javascripthtmlfirebase

Enhancing the layout of an ASP.NET master page with an HTML table that extends beyond the

My ASP.NET (VB) master page contains a table with 9 columns, each intended to hold textboxes. However, even without textboxes, the cells are extending beyond the content margins. How can I adjust them to fit within the master page margins? If they still ...

asp.nethtmlcssvb.netmaster-pages

Is there a streamlined approach to reducing the code for an Angular Bootstrap card with a fixed length and height?

Is there a more efficient way to distribute a fixed number of cards with fixed dimensions in three rows? Currently, I am manually coding all 33 cards spread across 3 rows - 11 cards per row. Please excuse any mistakes in my code as I am still a beginner a ...

cssangularjshtmlangularjs-ng-repeat