html – How to create a two buttons menu to be displayed side by side?-ThrowExceptions

Exception or error:

Need some guidance with this buttons menu I am trying to create. First of all I require spacing after each button so that there’s a gap of seperation between the buttons.

Second I want the green list of buttons to be next to the red buttons list, not below and again a gap between these two buttons menu. How do I do this?

enter image description here

.btn-group1 a {
  background-color: red; 
  border: 1px solid white; 
  color: white; 
  cursor: pointer; 
  padding: 1em, 2em;
  width: 20%; 
  display: block; 
  font: medium bold;
  font-family: arial, sans-serif;
}

.btn-group2 a {
  background-color: green; 
  border: 1px solid white; 
  color: white; 
  cursor: pointer; 
  padding: 1em, 2em;
  width: 20%; 
  display: block; 
  font: medium bold;
  font-family: arial, sans-serif;
}

.btn-group a:not(:last-child) {
  border-bottom: none; 
}

.btn-group a:hover {
  background-color: #3e8e41;
}


<div class="btn-container">      
         <div class="btn-group1">
        <a href="#">Introduction</a>
        <a href="#">Career Development - IT Support</a>
        <a href="#">Career Development - Testing</a>
      </div> 


      <div class="btn-group2">
          <a href="#">Lesson 1 - Methodologies and Development Lifecycle</a>
          <a href="#">Lesson Breakdown</a>
          <a href="#">Methodologies</a>
          <a href="#">Waterfall SDLC</a>
          <a href="#">Agile SDLC</a>
          <a href="#">Scrum vs Kanban</a>
          <a href="#">Ceremonies</a>
      </div>
    </div>
How to solve:

Try a flex to put them side by side:

.btn-container {
   display: flex;
   flex-direction: row;
}

as for the spacing add a margin bottom to the existing css for your classes:

.btn-group1 a {
  ...
  margin-bottom: 1em;
  ...
}

.btn-group2 a {
  ...
  margin-bottom: 1em;
  ...
}

Consider restructuring your css to remove dupe:

.btn-group a {
  border: 1px solid white; 
  color: white; 
  cursor: pointer; 
  padding: 1em, 2em;
  width: 20%; 
  display: block; 
  font: medium bold;
  font-family: arial, sans-serif;
  margin-bottom: 1em;
}
.btn-group1 a {
  background-color: red; 
}

.btn-group2 a {
  background-color: green; 
}

.btn-group a:not(:last-child) {
  border-bottom: none; 
}

.btn-group a:hover {
  background-color: #3e8e41;
}


<div class="btn-container">      
         <div class="btn-group btn-group1">
        <a href="#">Introduction</a>
        <a href="#">Career Development - IT Support</a>
        <a href="#">Career Development - Testing</a>
      </div> 


      <div class="btn-group btn-group2">
          <a href="#">Lesson 1 - Methodologies and Development Lifecycle</a>
          <a href="#">Lesson Breakdown</a>
          <a href="#">Methodologies</a>
          <a href="#">Waterfall SDLC</a>
          <a href="#">Agile SDLC</a>
          <a href="#">Scrum vs Kanban</a>
          <a href="#">Ceremonies</a>
      </div>
    </div>

Leave a Reply

Your email address will not be published. Required fields are marked *