What is the best way to improve the design of this division that includes buttons?

I'm having trouble with the layout of three divs I have set up. One acts as a container, while the other two are meant to hold buttons. However, something seems off and I can't figure out how to correct it.

.button {
  display: inline-block;
  padding: 20px 30px;
  font-size: 12px;
  cursor: pointed;
  text-align: center;
  text-decoration: none;
  outline: none;
  color: #fff;
  background-color: #AB0002;
  border: none;
  border-radius: 15px;
}

.divButton {
  height: 100%;
  width: 100%;
  background-color: #e4e4e4;
  display: inline-block;
  padding-bottom: 5px;
}
HTML:

<div class="divButton">
  <p style="text-align: center; padding-top: 15px; color: black;">TEXT!</p>
  <!--2 buttons "centered"-->
  <div style="float: left; padding-left: 325px;">
    <p style="padding-left: 72px;">Centered text above button</p>
    <a href="link.html" target="_blank"><button class="button">TEXT</button></a>
    <a href="link.html" target="_blank"><button class="button">TEXT</button></a>
  </div>
  <!--add spacing to move away from 2 buttons-->
  <div style="float: left; padding-left: 125px;">
    <p style="padding-left: 40px;">TEXT</p>
    <a href="link.html"><button class="button" style="float: right;">TEXT</button></a>
  </div>
</div>

jsfiddle: https://jsfiddle.net/3ar1L0zy/1/

Here's a visual representation of what I'm attempting in Paint:

https://i.stack.imgur.com/wma7u.png

htmlcss

Answer №1

It's time to ditch floats in CSS and embrace the more modern approach of using flexbox instead.

Replace your old float styles with flex properties like so:

.button {
  display: inline-block;
  padding: 20px 30px;
  font-size: 12px;
  cursor: pointed;
  text-align: center;
  text-decoration: none;
  outline: none;
  color: #fff;
  background-color: #AB0002;
  border: none;
  border-radius: 15px;
}

.divButton {
  width: 100%;            
  background-color: #e4e4e4;
  padding: 0 20px 5px 20px;
  box-sizing: border-box;  

  display:flex;   
  flex-wrap:wrap; 
  justify-content:space-between;  
}

.divButton > p {
  width:100%;    
}

.divButton > div {
    text-align:center;  
}
<div class="divButton">
  <p style="text-align: center; padding-top: 15px; color: black;">TEXT!</p>
  <!--2 buttons "centered"-->
  <div>
    <p>Centered text above button</p>
    <a href="link.html" target="_blank"><button class="button">TEXT</button></a>
    <a href="link.html" target="_blank"><button class="button">TEXT</button></a>
  </div>
  <!--add spacing to move away from 2 buttons-->
  <div>
    <p>TEXT</p>
    <a href="link.html"><button class="button">TEXT</button></a>
  </div>
</div>

Furthermore, avoid using inline styles as much as possible. They can make your code harder to maintain and debug, leading to larger files. Instead, opt for reusable classes that can be applied multiple times after being programmed just once.

Answer №2

To create a different layout without using float: left on both div elements, consider using float right on the right one and eliminating the padding-left that was originally set:

<div class="divButton">
    <p style="text-align: center; padding-top: 15px; color: black;">TEXT!</p>
    <!--2 buttons "centered"-->
    <div style="float: left;">
        <p style="padding-left: 72px;">TEXT</p>
        <a href="link.html" target="_blank"><button class="button">TEXT</button></a>
        <a href="link.html" target="_blank"><button class="button">TEXT</button></a>
    </div>
    <!--add spacing to move away from 2 buttons-->
    <div style="float: right;">
        <p style="padding-left: 40px;">TEXT</p>
        <a href="link.html"><button class="button" style="float: right;">TEXT</button></a>
    </div>
</div>

https://jsfiddle.net/3ar1L0zy/13/

Another alternative is to achieve this layout using flexbox, which may provide a better solution in your opinion.

Answer №3

Here is an example of HTML code:

<div class="divButton">
    <h3 style="text-align: center; padding-top: 15px; color: black;">TEXT!</h3>
    <!--2 buttons "centered"-->
    <div class="divText">
        <p style="padding-left: 72px;">TEXT</p>
    <p style="padding-left: 40px;">TEXT</p>
    </div>
    <!--add spacing to move away from 2 buttons-->
    <div>
    <div class="divButtons">
    <div>
      <a href="link.html" target="_blank"><button class="button">TEXT</button></a>
          <a href="link.html" target="_blank"><button class="button">TEXT</button></a>
    </div>
        <a href="link.html"><button class="button">TEXT</button></a>
    </div>
    </div>
</div>

And here is some CSS code for styling:

.button {
        display: inline-block;
        padding: 20px 30px;
        font-size: 12px;
        cursor: pointed;
        text-align: center;
        text-decoration: none;
        outline: none;
        color: #fff;
        background-color: #AB0002;
        border: none;
        border-radius: 15px;
    }

    .button:hover {
        background-color: #880002;
    }

    .divButton {
        height: 100%;
        width: 100%;
        background-color: #e4e4e4;
        display: inline-block;
        padding-bottom: 5px;
    }
  .divText {
    display: flex;
    justify-content: space-around;
  }
  .divButtons {
    display: flex;
    justify-content: space-around;
  }

Answer №4

<div class="divButton" style="text-align: center;">
    <p style="text-align: center; padding-top: 15px; color: black;">TEXT!</p>
    <div style="display: inline-block;">
      <!--add extra spacing to separate from 2 buttons-->
      <div style="float: right; display: inline-block; padding-left: 125px;">
        <p style="text-align: center;">TEXT</p>
        <a href="link.html"><button class="button" style="float: right;">TEXT</button></a>
      </div>
      <!--centering 2 buttons-->
      <div style="display: inline-block;">
        <p style="text-align: center;">TEXT</p>
        <a href="link.html" target="_blank"><button class="button">TEXT</button></a>
        <a href="link.html" target="_blank"><button class="button">TEXT</button></a>
      </div>
    </div>
</div>

https://jsfiddle.net/3ar1L0zy/85/

Answer №5

I would suggest using the flexbox CSS property for layout flexibility.

.parent{
  background: tomato;
  width: 400px;  
  padding: 30px;
  display: flex;
  flex-direction: column;
}
.header{
  background: yellow;
  text-align: center
}
.body{
  background: green;
  width: 100%;
  display: flex;
}
.body-item{
  background: pink;
  width: 50%;
  text-align: center;
  padding: 10px;
}
.blue{
  background: blue; /* to make it easier to see */
}
.buttons{  
  display: flex;
  flex-wrap: wrap; /* wrap items onto multiple lines if needed, from top to bottom*/
  justify-content: space-evenly; /* items are distributed so that the spacing between any two items (and the space to the edges) is equal */
}
<div class="parent">
  <h3 class="header">HEADER TEXT</h3>
  <section class="body">
      <div class="body-item">
        <div class="text">Text</div>
        <div class="buttons">
           <button>Button</button>
           <button>Button</button>
        </div>
      </div>
      <div class="body-item blue">
         <div class="text">Text</div>
        <div class="buttons">
           <button>Button</button>
        </div>
      </div>
  </section>
</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

A guide on displaying an Angular Component within a Thymeleaf page

Currently, I am faced with the task of integrating Angular and Thymeleaf. This is necessary because I have developed a dynamic graph using Angular and now need to incorporate it into an existing project that utilizes Thymeleaf. Are there any simplified m ...

htmlangularthymeleaf

Tips on utilizing jQuery to trim and manipulate the current URL

Suppose the current URL I am working with is: https://example.com/test?id=W2FiY11beHl6XVsxMjNd . The data following ?id is [abc][xyz][123] and it is base64 encoded. My objective is to manipulate the current URL in such a way that the content displayed on ...

htmljquery

"Why does adding a new span create space between it and the previous ones, and what can be done to prevent this from

Essentially, it creates the equation "a + b = c". However, I need to create "a + b = c" instead. HTML: <div class="container"> <span id="b__value">+b</span> <span id="c__value">=c</span> &l ...

javascripthtmlcss

Guide to positioning the layout inflater on the right side

I am facing an issue with the layout inflater where the inflated layout appears in the center of the page instead of the intended right corner placement. I have attempted to modify the gravity to right, but it did not resolve the problem. Below is a snipp ...

androidhtmlcssandroid-layout

Issues with the loading of CSS in Wordpress

I transferred the project from the server to my personal computer (localhost). However, whenever I make changes to the css file, these modifications do not appear on the website when viewed locally. After attempting to switch browsers and clear the browse ...

htmlcsswordpress

Showing a notification that is persistent and not dismissible

Hello everyone! I've been struggling with a problem on the RPS project for quite some time now. The issue arises when I try to display a message for a tie in the game, but I can't seem to find a solution to make it disappear when the round is not ...

javascripthtmlcss

Interactive Geography Selector

When updating your personal details on , you are required to choose your country first. Once the country is selected, the system automatically adjusts the city and/or state options based on that specific country's requirements. Can someone provide exa ...

javascriptjqueryhtmlajaxdhtml

Presentation: Troubleshooting Ineffective CSS3 Transitions

I have created a basic slideshow that can accommodate multiple images. Clicking on an image should move to the next slide, and once the last image is clicked, it should loop back to the first slide. The functionality of transitioning between slides seems ...

javascripthtmlcss

The backgroundImage function is having trouble locating the specified URL path

I'm struggling to set a backgroundImage because it's not recognizing the local path URL. Here is my code snippet: import { makeStyles } from '@material-ui/core/styles'; const loginWrapperStyles = makeStyles(theme => ({ image: { ...

cssreactjsmaterial-ui

There seems to be a problem with the responsive navigation menu when activated in responsive mode and then resizing the screen

Trying to create a responsive navigation but encountering issues when following these steps: 1. Resize the navigation to less than 940px 2. Activate the menu 3. Resize the browser again to more than 940px 4. The menu is no longer inline and appears messy ...

jqueryhtmlcssnavigationresponsive

``Need help hosting static HTML files on Google App Engine? Here's a step-by-step

Can I use App Engine to host a static HTML website? How can I set up my domain name to work with it? ...

htmlgoogle-app-engineweb-applicationshosting

Step-by-step tutorial for making a mesmerizing fade out grunge background

How can I achieve a fading grid background effect? I have experimented with using a conic-gradient for the background, but I am unsure how to make it fade out. background: conic-gradient(from 90deg at 1px 1px,#0000 90deg,grey 0) 0 0/50px 50px; ...

htmlcsstwitter-bootstrap

Problem with the hover functionality of the <li> tag

I'm having an issue with applying the hover property to the li element in the sidebar. The hover effect works, but the icon tag is not showing the hover effect. I want the icon to also show the hover effect along with the li's hover effect. Here ...

htmlcssbootstrap-4

Creating a full-width input field with text aligned to the right:

.wrap { white-space: nowrap; } input { width: 100%; } body { /* just so you can see it overflowing */ border: 1px solid black; margin: 40px; padding: 10px; } <span class="wrap"><input type="text">.pdf</span> Observing the cod ...

htmlcss

A guide on creating a downward animation of an object using CSS3

I am currently working on practicing CSS 3 animation. I am facing a challenge in figuring out how to make the item fall down the page at full speed without needing the user to track it downward with the mouse, all without using javascript. Ideally, I want ...

css

Using @media queries for mobile and desktop: preventing desktop from displaying mobile styles

I have been working on redesigning a website for mobile using only CSS. I set up media queries to deliver the appropriate CSS for desktop and mobile devices. However, I noticed that when resizing the browser to under 855 pixels, some of the mobile CSS is ...

htmlcssmobilemedia

What is the best way to style an image with CSS when it is not contained within a disabled parent element?

Struggling to find a way to add a hover effect to an image that is not inside a disabled element? Although it seems like the css selector below should do the trick, it doesn't quite work as expected. In this scenario, I only want the hover effect on e ...

htmlcsshover

CSS: adjusting styles for different screen sizes on both desktop computers and smartphones

While diving into Emacs, I am in the process of creating a website called Prince. The layout of columns is controlled by the directives below: body { font-family: var(--s-font-family); font-size: var(--normal-font-size); column-count: 3; c ...

htmlcssmedia-queries

The recommended style guide for HTML documentation advises using spaces within the <code> tags

While reviewing the style guide for maintaining extensive documentation of an existing system using HTML for a client, I came across a particular rule that text within a code tag should be surrounded by spaces, like so: ..., the element<code> STATE ...

html

Incorporating a header include on every page throughout my website

Is there a way to include headers and footers in your HTML web pages without having to duplicate code on every page? I understand that this can be done using PHP, but what if you are creating a website solely with HTML? If there is no solution to avoid r ...

htmlinclude