Having trouble making div's side by side, and adding a title below the div-CodePudding

Whenever I try to make a few divs to make a navigation panel at the top of my page it ends up looking like this

Change this:

#topDivs {
  width: 100%;
  height: 50px;
  display: table;
  clear: both;
}

To this:

#topDivs {
  width: 100%;
  height: 50px;
  display: table;
  clear: both;
  display: flex;
}

Just add display: flex;.

CodePudding user response：

Display flex works really well with this and it automatically lines up the child elements side by side.

I've also removed your p tags and strong tags and used CSS to style the text instead. All changes annoted in your code below. Hope this helps.

#topDivs {
  width: 100%;
  height: 50px;
  /* changed display:table to display:flex */
  display: flex;
}

.myDiv {
  border: 2px outset black;
  text-align: center;
  height: 50px;
  margin: auto;
  width: 25%;
  box-sizing: border-box;
  color: white;
  /* not needed as it's a block level element anyway 
  display: block; */
}

.fill-div {
  height: 100%;
  width: 100%;
  text-decoration: none;
  background-color: transparent;
  /* added these so you don't need the <strong> or <p> tags and places the text correctly and will work at various div heights*/
  font-weight:bold;
  display:grid;
  place-items:center;
}

#sec1 {
  background-color: darkred;
}

#sec2 {
  background-color: rgb(112, 172, 76);
}

#sec3 {
  background-color: rgb(252, 209, 42);
}

#sec4 {
  background-color: skyblue;
}

#mainText {
  border: 2px outset black;
  text-align: center;
  height: 50px;
  margin: auto;
  color: white;
}

a:link,
a:visited {
  /* changed this from white to 'inherit' so if you change the container div text colour, the link colour follows it */
  color: inherit;
}

<script src="script.js"></script>
<div id="maindiv">

  <!--
    BOXES AT THE TOP
  -->
  <div id="topDivs">
    <div  id="sec1">
      <a href="index.html" >Index</a>
    </div>
    <div  id="sec2">
      <a href="interests.html" >Interests</a>
    </div>
    <div  id="sec3">
      <a href="education.html" >Education</a>
    </div>
    <div  id="sec4">
      <a href="contactme.html" >Contact me</a>
    </div>
  </div>

  <script src="https://replit.com/public/js/replit-badge.js" theme="blue" defer></script>