Html Question posted in
Some basic documentation can be found here.

Html – css child padding is stretching to fit the parent

My problem is that in the submenu, the menubutton1 and 2 padding is stretching to fit the submenu width to the right, and not just 10px around the text like the left and top is, and the other menu buttons at the top of the page. I tried to explain that as best as I could, but how would I get the menubuttons in the submenu to behave like the ones in the parent menubackground div? How would i make the padding not stretch out to the right like that? Also, the menubuttons in the submenu div don’t appear to have any top margin in relation to the submenu. Why is this?

I tried using box-sizing: border-box; as that was a solution to a similar problem I read, but it didn’t do anything. I am new to css and this website is a learning experience, I’ve been able to do everything so far on my own, but I am completely stuck on this.

.container {
  height: 100vh;
  display: flex;
  align-items: center;
}

.subcontainer {
  height: 100vh;
}

.menubackground {
  width: 91%;
  height: auto;
  border-radius: 25px;
  margin: auto;
  background: rgba(255, 255, 255, 0.7);
  max-height: 90%;
  min-height: 90%;
  overflow-y: auto;
}

.submenu {
  width: 80%;
  height: auto;
  border-radius: 25px;
  margin: auto;
  background: white;
  min-height: 10%;
}

.title {
  margin: 20px;
  text-align: center;
}

.bodytextcss {
  margin-left: 20px;
  margin-right: 20px;
  margin-bottom: 20px;
  text-align: left;
}

.menubuttons {
  float: left;
}

#menubutton1 {
  border-radius: 25px;
  margin: 10px;
  padding: 10px;
  background-color: #451255;
  color: #ffffff;
}

#menubutton2 {
  border-radius: 25px;
  margin: 10px;
  padding: 10px;
  background-color: #451255;
  color: #ffffff;
}

body {
  background-image: url("background5.png");
  background-size: cover;
  background-color: #451255;
}

titletext {
  font-size: 22px;
  color: #000000;
  font-weight: bold;
}

bodytext {
  font-size: 20px;
  color: #000000;
}

buttontex {
  font-size: 20px;
}
<body>
  <div class="container">
    <div class="menubackground">
      <a href="home.html">
        <div id="menubutton1" class="menubuttons">
          <buttontext>home</buttontext>
        </div>
      </a>
      <a href="recipies.html">
        <div id="menubutton2" class="menubuttons">
          <buttontext>recipies</buttontext>
        </div>
      </a>
      <br><br><br><br>
      <div class="title">
        <titletext>Welcome to the stories section</titletext>
      </div>
      <div class="bodytextcss">
        <bodytext>This is where I will upload short stories that I write</bodytext>
      </div>
      <div class="submenu">
        <a href="test.html">
          <div id="menubutton1">
            <buttontext>story title 1</buttontext>
          </div>
        </a>
        <a href="test.html">
          <div id="menubutton2">
            <buttontext>story title 2</buttontext>
          </div>
        </a>
      </div>
    </div>
  </div>
</body>
Tags:

2

Answers


  1. 0

    Block elements take up the width of their containers by default. The menu items near the top are using float: left; so they are "floating" in their container and not taking up the whole width.

    I wouldn’t want to overuse float (or use it at all, if I’m being honest), but you can set your elements to display: inline-block; which provides a reasonable mix of inline and block styles. In this case it doesn’t take up the full width of the container.

    For example:

    .container {
  height: 100vh;
  display: flex;
  align-items: center;
}

.subcontainer {
  height: 100vh;
}

.menubackground {
  width: 91%;
  height: auto;
  border-radius: 25px;
  margin: auto;
  background: rgba(255, 255, 255, 0.7);
  max-height: 90%;
  min-height: 90%;
  overflow-y: auto;
}

.submenu {
  width: 80%;
  height: auto;
  border-radius: 25px;
  margin: auto;
  background: white;
  min-height: 10%;
}

.title {
  margin: 20px;
  text-align: center;
}

.bodytextcss {
  margin-left: 20px;
  margin-right: 20px;
  margin-bottom: 20px;
  text-align: left;
}

.menubuttons {
  float: left;
}

#menubutton1 {
  border-radius: 25px;
  margin: 10px;
  padding: 10px;
  background-color: #451255;
  color: #ffffff;
  display: inline-block;
}

#menubutton2 {
  border-radius: 25px;
  margin: 10px;
  padding: 10px;
  background-color: #451255;
  color: #ffffff;
  display: inline-block;
}

body {
  background-image: url("background5.png");
  background-size: cover;
  background-color: #451255;
}

titletext {
  font-size: 22px;
  color: #000000;
  font-weight: bold;
}

bodytext {
  font-size: 20px;
  color: #000000;
}

buttontex {
  font-size: 20px;
}
    <body>
  <div class="container">
    <div class="menubackground">
      <a href="home.html">
        <div id="menubutton1" class="menubuttons">
          <buttontext>home</buttontext>
        </div>
      </a>
      <a href="recipies.html">
        <div id="menubutton2" class="menubuttons">
          <buttontext>recipies</buttontext>
        </div>
      </a>
      <br><br><br><br>
      <div class="title">
        <titletext>Welcome to the stories section</titletext>
      </div>
      <div class="bodytextcss">
        <bodytext>This is where I will upload short stories that I write</bodytext>
      </div>
      <div class="submenu">
        <a href="test.html">
          <div id="menubutton1">
            <buttontext>story title 1</buttontext>
          </div>
        </a>
        <a href="test.html">
          <div id="menubutton2">
            <buttontext>story title 2</buttontext>
          </div>
        </a>
      </div>
    </div>
  </div>
</body>

    You’ll notice that there’s also an errant underline in between the two. I’d honestly recommend simplifying your structure and styles a lot, much more than is addressed in the scope of this answer. But for this specific case what you have is an <a> around an entire <div>, and the two are not sizing very cleanly.

    A quick fix just for visual styles could be to remove the text decoration for the <a> elements:

    text-decoration: none;

    This would hide the underline as a purely visual "fix".

    Login or Signup to reply.
  2. 0

    In short, it is enough for you to add the parameters display: flex;
    flex-direction: column; for the .submenu class.
    But while analyzing your code, I found extra lines of code and not quite correct spelling. Try to write more correctly.
    A few tips.

    1. if you have a main menu section, wrap it in <nav>
    2. Considering that all the buttons in this example look the same, use one class for all of them. Then, when changing the design, you will not have to spend a lot of time to change and everything will be in one place.
    3. Do not use
      for indentation between blocks. this is done thanks to styles.
    4. If you want to write some text, use the <p> tag for it, and for headings <h1>, <h2>, <h3> …

    For example:

    HTML

      <body>
  <div class="container">
    <div class="menubackground">
      <nav>
        <a href="home.html"></a>
          <button class="btn">home</button>
        </a>
        <a href="recipies.html">
          <button class="btn">recipies</button>
        </a>  
      </nav>
      <div class="title">
        <h1>Welcome to the stories section</h1>
      </div>
      <div class="bodytext">
        <p>This is where I will upload short stories that I write</p>
      </div>
      <div class="submenu">
        <a href="test.html">
          <button class="btn" id="submenubutton">story title 1</button>
        </a>
        <a href="test.html">
            <button class="btn" id="submenubutton">story title 2</button>
        </a>
      </div>
    </div>
  </div>
</body>

    CSS

    body {
  background-color: #451255;
}

.container {
  height: 100vh;
  display: flex;
  align-items: center;
}

.menubackground {
  width: 91%;
  height: auto;
  border-radius: 25px;
  margin: auto;
  background: rgba(255, 255, 255, 0.7);
  max-height: 90%;
  min-height: 90%;
  overflow-y: auto;
}

.btn  {
  border-radius: 25px;
  margin: 10px;
  padding: 10px;
  background-color: #451255;
  color: #ffffff;
}

.title {
  margin: 20px;
  text-align: center;
}

h1 {
  font-size: 22px;
  color: #000000;
  font-weight: bold;
}

.bodytext {
  margin: 20px;
  font-size: 20px;
  color: #000000;
  text-align: center;
}

.submenu {
  width: 80%;
  height: auto;
  border-radius: 25px;
  margin: auto;
  background: white;
  min-height: 10%;
  display: flex;
  flex-direction: column;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search