Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community!

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Kenny Parewijck
Kenny Parewijck
4,602 Points
Posted by Kenny Parewijck
Kenny Parewijck
4,602 Points

Is it possible to automatic adjust the width of a div to it's content? (button)

Hi!

Could you let a div adjust it's width to it's content? So that you would get a responsive button wich automatically adjusts its width to its content? Maybe with a nice padding to the sides.

Thanks for the insights! 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="css/testcss.css" media="screen" title="no title" charset="utf-8">
  </head>
  <body>
    <div class="ctas">
      <a class="cta-start" href="#">Starten</a>
      <a class="cta-meer" href="#">Meer weten?</a>
    </div>
  </body>
</html>

* {
  font-family: sans-serif;
}

a:link, a:visited, a:hover {
  color: white;
  text-decoration: none;
  font-weight: bold;
  text-transform: uppercase;
}

/***** cta container *****/
.ctas{ /* div */
  background-color: red;
  margin-top: 30px;
  width: 100%;
  margin: 0 auto;
  text-align: center;
  color: white;
  font-size: 1em;
}

.ctas a{
  display: block;
  margin-top: 5px;
  padding: 10px;
  border-radius: 4px;
  /* width: ? */
}

.cta-start{ /* link */
background-color: green;
}

.cta-meer{ /* link */
background-color: green;
}
Ben Morse
Ben Morse
6,068 Points
Ben Morse
Ben Morse
6,068 Points

I think i know what you are talking about and this is what i did. I don't know if you are looking for something like this.

.ctas a{
  display: inline-block;
  margin-top: 5px;
  padding: 10px;
  border-radius: 4px;
  /* width: ? */
}

i changed it to inline-block which surrounded the properties of the green background to the content. Hope this is what you are talking about, let me know.

4 Answers

Lucas Santos
Lucas Santos
19,315 Points
Lucas Santos
Lucas Santos
19,315 Points 
.cta-start, .cta-meer {
   display: table;
   width: auto;
   margin: 0px; /* adjust as needed */
   padding: 0px; /* adjust as needed */
}
Kenny Parewijck
Kenny Parewijck
4,602 Points
Kenny Parewijck
Kenny Parewijck
4,602 Points

Hi Lucas,

Your solution will make the button react to it's parent, the ctas. i would like my buttons to react on their child elements. The longer the text inside the buttons, the wider the buttons get.

Lucas Santos
Lucas Santos
19,315 Points
Lucas Santos
Lucas Santos
19,315 Points

I just updated my answer to have the answer I had in this comment.

Kenny Parewijck
Kenny Parewijck
4,602 Points
Kenny Parewijck
Kenny Parewijck
4,602 Points 
.ctas a{
  display: table;
  width: auto; /*matching the parents div width*/
  margin: 1.3em auto 0;
  padding: 15px 1.7em;
  border-radius: 10px;
  font-weight: 700;
  text-transform: uppercase;
  max-width: 250px;
  min-width: 200px;
}
Ben Morse
Ben Morse
6,068 Points
Ben Morse
Ben Morse
6,068 Points

awesome man, glad you got it working :)

Kenny Parewijck
Kenny Parewijck
4,602 Points
Kenny Parewijck
Kenny Parewijck
4,602 Points

Ben Morse That would be a solution, but I want my buttons to be on top of each other and not next to each other.. So that if I widen my browser the buttons keep being on top of each other.

With your solution these buttons could be on top of each other on a mobile but not on a pc..

Ben Morse
Ben Morse
6,068 Points
Ben Morse
Ben Morse
6,068 Points

i see, so if I understand this correctly. You want the buttons to stack on one another with the div properties wrapped around the content. Right?

Ben Morse
Ben Morse
6,068 Points
Ben Morse
Ben Morse
6,068 Points

Is this what you are looking for?

.ctas a{
  display: block;
  margin-top: 5px;
  padding: 10px;
  border-radius: 4px;
  margin-right:40% ;
  margin-left:40%;
  /* width: ? */
}

i would use the short cut for "margin" if this is what you are looking for.

Kenny Parewijck
Kenny Parewijck
4,602 Points
Kenny Parewijck
Kenny Parewijck
4,602 Points

Hi everybody

I tried all your suggestions and the one from Lucas, "display table and auto width" suit me best. Thanks for your insights!