CODEWITHSUNDEEP
htmlcssmarginpaddingmargins
Osama Kawish
Osama Kawish

Reputation: 390

Padding not working

So I was recommended not to use tables for my layout and I tried that and it's giving me this annoying problem of not working the way I want it to.

Here's my final result that I currently have: Final result of code.

However, I want to move that hello in the bottom right box to the same left margin/padding as the text in Home right above it.

Here's my code.

@import url('https://fonts.googleapis.com/css?family=Lobster+Two');
#Cogna {
  float: left;
  font-family: 'Lobster Two', cursive;
  font-size: 60px;
  font-weight: bold;
  border: 2px solid black;
  padding: 40px 20px 10px 20px;
  margin-right: 0.5em;
  width: 20%;
  height: 20%;
}

h1 {
  font-family: 'Lobster Two';
  vertical-align: text-bottom;
  font-size: 20px;
  border: 2px solid black;
  height: 20%;
  padding: 4em 1em 1em 1em;
}

.maintext {
  padding: 1.58em;
  height: 46em;
  display: block;
  border: 2px solid black;
  min-width: 80%;
}

nav {
  float: left;
  font-family: 'Lobster Two', cursive;
  font-size: 1em;
  padding: 40px 20px 10px 20px;
  overflow-y: scroll;
  width: 20%;
  height: 46em;
  border: 2px solid black;
}

nav ul {
  list-style: none;
}
<div>
  <div id="Cogna">Cogna</div>
  <h1>Home</h1>
</div>

<div>
  <nav>
    <ul>Home</ul>
    <ul>a</ul>
    <ul>a</ul>
    <ul>a</ul>
    <ul>a</ul>
    <ul>a</ul>
    <ul>a</ul>
    <ul>a</ul>
    <span style="display: block; height: 100%;"></span>
  </nav>
  <div class="maintext">
    <p style="margin-left: 16pt;">
      Hello.
    </p>
  </div>
</div>

However, I can't seem to properly accomplish that task. I've change the margin and padding of both the nav and the maintext id in my CSS to and it still won't seem to budge. I then tried a variety of display style changes (though not all, as I'm new to CSS and idk which one would do the job). Most of them didn't seem to work.

Also, if anyone could reduce that gap between the top two boxes and the bottom two, that would also be great, but not entirely necessary.

The div element maintext should capture all the paragraphs in the bottom-left box, so I want all of the text in that element to have that padding.

Any help would be great. Thanks.

Upvotes: 1

Views: 4145

Answers (1)

Michael Coker
Michael Coker

Reputation: 53674

I would add box-sizing: border-box to nav and .maintext, then add width: 80%; overflow: auto; to .maintext to get it to sit beside nav, then just use the same padding .maintext as you applied to the h1 if you want it to match that padding.

@import url('https://fonts.googleapis.com/css?family=Lobster+Two');
#Cogna {
  float: left;
  font-family: 'Lobster Two', cursive;
  font-size: 60px;
  font-weight: bold;
  border: 2px solid black;
  padding: 40px 20px 10px 20px;
  margin-right: 0.5em;
  width: 20%;
  height: 20%;
}

h1 {
  font-family: 'Lobster Two';
  vertical-align: text-bottom;
  font-size: 20px;
  border: 2px solid black;
  height: 20%;
  padding: 4em 1em 1em 1em;
}

.maintext {
  padding: 1.58em;
  height: 46em;
  display: block;
  border: 2px solid black;
  width: 80%;
  overflow: auto;
  padding-left: 1em;
}

nav {
  float: left;
  font-family: 'Lobster Two', cursive;
  font-size: 1em;
  padding: 40px 20px 10px 20px;
  overflow-y: scroll;
  width: 20%;
  height: 46em;
  border: 2px solid black;
}

nav ul {
  list-style: none;
}

nav, .maintext {
  box-sizing: border-box;
}
<!DOCTYPE html>
<html>
<head>
    <title>Cogna</title>
    <link rel="stylesheet" type="text/css" href="Home.css">
</head>
<body>

<div>
    <div id="Cogna">Cogna</div>
    <h1>Home</h1>
</div>

<div>
    <nav>
        <ul>Home</ul>
        <ul>a</ul>
        <ul>a</ul>
        <ul>a</ul>
        <ul>a</ul>
        <ul>a</ul>
        <ul>a</ul>
        <ul>a</ul>
        <span style="display: block; height: 100%;"></span>
    </nav>
    <div class="maintext">
        <p style="margin-left: 16pt;">
            Hello.
        </p>
    </div>
</div>

</body>
</html>

Upvotes: 1

Related Questions