Search code examples
htmlcsswidth

Width will not remove from Div

I'm trying to create buttons and I have a parent div holding all of the other divs together. The thing with the parent div though, it's creating its own width and it just won't create an auto width around the other divs.

I just want to center all the buttons/divs perfectly and the width from the parent div is preventing me.

Any help would be amazing, thank you!!

<style>
h1.helph1 {
    text-align: center;
    font-family: Montserrat, sans-serif;
    font-weight: 100;
    padding-bottom: 40px;
    padding-top: 20px;
    border-bottom: #e3e3e3 solid 1px;
}

.toplinks div, .middlelinks div, .bottomlinks div {
    float: left;
    width: 250px !important;
}

.helpparent .toplinks div, .middlelinks div, .bottomlinks div{
    background: #2fb796;
    padding: 10px;
    margin: 10px;
    color: white;
    font-family: Montserrat;
    text-align: center;
}

.helpparent  {
    width: 66.1%;
    margin: 0 auto;
}
</style>
<html>
<h1 class="helph1">Forum Help Center</h1>

<div class="helpparent">
  
  <div class="toplinks">  
    <a href="https://www.youtube.com/"><div class="announcementhelp">Announcements</div></a>
	<a href="https://www.youtube.com/"><div class="gettingstartedhelp">Getting Started</div></a>
	<a href="https://www.youtube.com/"><div class="gasrhelp">GASR 101</div></a>
  </div>
  
   <div class="seperator" style="clear:both;"></div>  
  
  <div class="middlelinks">   
	<a href="https://www.youtube.com/"><div class="forumshophelp">Forums and Shops</div></a>
	<a href="https://www.youtube.com/"><div class="rulesdmcahelp">Community &amp; DMCA Guidelines</div></a>
	<a href="https://www.youtube.com/"><div class="sandrhelp">Support &amp; Report System</div></a>
  </div>
  
 <div class="seperator" style="clear:both;"></div>  
  
  <div class="bottomlinks">   
	<a href="https://www.youtube.com/"><div class="eventhelp">Forum Events</div></a>
	<a href="https://www.youtube.com/"><div class="storehelp">GASR Store</div></a>
	<a href="https://www.youtube.com/"><div class="profilehelp">Your Profile &amp; Settings</div></a>
  </div>
  
 <div class="seperator" style="clear:both;"></div>    
  
  </div>

</html>

Solution

  • Try getting rid of your div element inside your a. This div is unnecessary and is leaving your a without a clickable area.

    After that you can choose to use flex to align your content

    h1.helph1 {
    text-align: center;
    font-family: Montserrat, sans-serif;
    font-weight: 100;
    padding-bottom: 40px;
    padding-top: 20px;
    border-bottom: #e3e3e3 solid 1px;
}

.toplinks a, .middlelinks a, .bottomlinks a {
    width: 250px !important;
}

.helpparent .toplinks a, .middlelinks a, .bottomlinks a{
    background: #2fb796;
    padding: 10px;
    margin: 10px;
    color: white;
    font-family: Montserrat;
    text-align: center;
}

.toplinks, .middlelinks, .bottomlinks  {
  display: flex;
  flex-direction: column;
  align-items: center;
}
    <h1 class="helph1">Forum Help Center</h1>

<div class="helpparent">
  
  <div class="toplinks">  
    <a href="https://www.youtube.com/">Announcements</a>
	<a href="https://www.youtube.com/">Getting Started</a>
	<a href="https://www.youtube.com/">101</a>
  </div>
  
   <div class="seperator" style="clear:both;"></div>  
  
  <div class="middlelinks">   
	<a href="https://www.youtube.com/">Forums and Shops</a>
	<a href="https://www.youtube.com/">Community &amp; DMCA Guidelines</a>
	<a href="https://www.youtube.com/">Support &amp; Report System</a>
  </div>
  
 <div class="seperator" style="clear:both;"></div>  
  
  <div class="bottomlinks">   
	<a href="https://www.youtube.com/">Forum Events</a>
	<a href="https://www.youtube.com/">GASR Store</a>
	<a href="https://www.youtube.com/">Your Profile &amp; Settings</a>
  </div>
  
 <div class="seperator" style="clear:both;"></div>    
  
  </div>