Justin Mitchell Justin Mitchell - 6 months ago 23
HTML Question

div buttons are overlapping HTML

I am trying to make an online portfolio for myself and I have a bottom container for the bottom half of the screen and I would like to place 3 buttons at the top of the container. I have got it to work except when you resize the page. When you shrink the page's width the buttons will overlap. How can I stop them from overlapping? I want them to go close together side by side but not overlap.



h1 {
margin-left: 33%;
margin-right: 33%;
text-align: center;
}

img {
width: 15%;
height: auto;
display: block;
margin-left: auto;
margin-right: auto;
}

#top,
#bottom {
position: fixed;
left: 0;
right: 0;
height: 50%;
}

#bottom {
border-top: 2px solid black;
margin-left: auto;
margin-right: auto;
display: block;
float: center;
position: fixed;
border: 2px solid black;
padding: 15px;
padding-bottom: 17px;
}

#navbuttons {
border-top: 2px solid black;
margin-left: auto;
margin-right: auto;
display: block;
float: center;
position: relative;
border: 2px solid black;
padding: 15px;
padding-bottom: 10px;
}

#resumebutton {
display: inline-block;
position: absolute;
top: 0%;
left: 33%;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border: 2px solid black;
border-radius: 20px;
padding: 5px;
background-color: #7dd7f5;
text-align: center;
}

#coverletterbutton {
display: inline-block;
position: absolute;
top: 0%;
left: 46.5%;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border: 2px solid black;
border-radius: 20px;
padding: 5px;
background-color: #7dd7f5;
text-align: center;
}

#portfoliobutton {
display: inline-block;
position: absolute;
top: 0%;
left: 62.5%;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border: 2px solid black;
border-radius: 20px;
padding: 5px;
background-color: #7dd7f5;
text-align: center;
}

<!DOCTYPE html>

<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<title>--Name Here-- Resume and Portfolio</title>
</head>

<body>
<div style="height: 100%"></div>
<div id="top"></div>


<h1>--Name Here--</h1>

<img src="http://science-all.com/images/wallpapers/cat-pictures/cat-pictures-20.jpg"/>

<h1>Resume and Portfolio</h1>

<div id="bottom">
<div id="navbuttons">
<div id="resumebutton">Resume</div>
<div id="coverletterbutton">Cover Letter</div>
<div id="portfoliobutton">Portfolio</div>
</div>
</div>

</body>

</html>





I would provide an example if I knew how.

Thank you

Answer

you don't need to absolute position the buttons if you have the container fixed. you can use inline-block and just text-align: center on your container. Also there are errors in your css, like there is no float: center;, you can also skip the # and use class as they share css properties. But I agree that Bootstrap is the way to go for responsive, and especially if you are new.

#bottom {
  border-top: 2px solid black;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  display: block;
  position: fixed;
  border: 2px solid black;
  padding: 15px;
  padding-bottom: 17px;
}

.nav-button {
  display: inline-block;
  -moz-border-radius: 20px;
  -webkit-border-radius: 20px;
  border: 2px solid black;
  border-radius: 20px;
  padding: 5px;
  background-color: #7dd7f5;
  text-align: center;
}

<div id="bottom">
   <div class="nav-button">Resume</div>
   <div class="nav-button">Cover Letter</div>
   <div class="nav-button">Portfolio</div>
</div>