CODEWITHSUNDEEP
htmlcsswidth
Kelsey Maria
Kelsey Maria

Reputation: 53

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>

Upvotes: 1

Views: 34

Answers (2)

Dennis Spierenburg
Dennis Spierenburg

Reputation: 643

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>

Upvotes: 0

StefanBob
StefanBob

Reputation: 5128

You can get rid of the width on the .help-parent class and add display: flex; flex-direction: column; align-items: center; to center the divs. However, you must remove the float on the .toplinks div, .middlelinks div, .bottomlinks div for this to work. Also as a result of removing the float, the text-decoration on the links seems to come back, so I added text-decoration: none; to your <a> tags.

<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 {
  width: 250px !important;
}

a {
  text-decoration: none;
}

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

.helpparent {
  display: flex;
  flex-direction: column;
  align-items: center;
}

</style>
<html>
<h1 class="helph1">GASR 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>

Upvotes: 1

Related Questions