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
Current
But I would like those div’s side by side, along with that I am unable to put text
I got it side by side at one part but the text would be on the same line as the div and it would push the div’s to the left and using
wouldn’t work
Heres the HTML:
#topDivs {
width: 100%;
height: 50px;
display: table;
clear: both;
}
.myDiv {
border: 2px outset black;
text-align: center;
height: 50px;
margin: auto;
width: 25%;
box-sizing: border-box;
color: white;
display: block;
}
.fill-div {
height: 100%;
width: 100%;
text-decoration: none;
background-color: transparent;
}
#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 {
color: white;
}<script src="script.js"></script>
<div id="maindiv">
<!--
BOXES AT THE TOP
-->
<div id="topDivs">
<div class="myDiv" id="sec1">
<a href="index.html" class="fill-div">
<p>
<strong>Index</strong>
</p>
</a>
</div>
<div class="myDiv" id="sec2">
<a href="interests.html" class="fill-div">
<p>
<strong>Interests</strong>
</p>
</a>
</div>
<div class="myDiv" id="sec3">
<a href="education.html" class="fill-div">
<p>
<strong>Education</strong>
</p>
</a>
</div>
<div class="myDiv" id="sec4">
<a href="contactme.html" class="fill-div" <style "text-decoration:none;" "color: white;">
<p>
<strong>Contact me</strong>
</p>
</a>
</div>
</div>
<script src="https://replit.com/public/js/replit-badge.js" theme="blue" defer></script>All help would be greatly appreciated
>Solution :
But i would like those div’s side by side
Is this what you mean?
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;.