Search code examples
htmlcsswebweb-deployment

Problem with the positioning of an aside in an html page

a week ago I started to learn html and css and to practice I decided to emulate an old web page with what I learned so far. The page is the following: http://in3.org/info/reading.htm I am having difficulty making the blue vertical line appear that is on the right side of the page.

Code:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>ELECTRIC PAGES Reading Notes</title>
    <link rel="stylesheet" href="css/style.css" />
  </head>
  <body>
    <main>
      <header>
        <img src="assets/ga.gif" alt="" />
        <br>
        <img src="assets/eptype2.gif" alt="" />
      </header>
      <aside class="aside1">
        <img src="/assets/epnav5.gif" alt="" />
      </aside>
      <h2>Reading Notes</h3>
      <aside class="aside2"></aside>
    </main>
  </body>
</html>

head,
body {
  background-color: lightcyan;
  margin: auto;
}

header {
  width: 100%;
  padding-left: 4.85%;
  margin: auto;
}

.aside1 {
  position: absolute;
  width: 4.85%;
  left: 0;
  top: 0;
  bottom: 0;
  background-color: rgb(35, 168, 221);
}

.aside2 {
  position: absolute;
  width: 4.85%;
  padding-right: 30%;
  left: 0;
  top: 0;
  bottom: 0;
  background-color: rgb(35, 168, 221);
}

img {
  padding: 10px;
}

h2 {
  color: red;
  padding-left: 5.5%;
}

To make that blue vertical line I thought of using an empty aside tag with a width of 4.85% with a padding-right of 30%, but instead of having a distance of 30% to the right and occupying a 4.85% width, the aside is placed to the left of the page occupying 30% of the page.

enter image description here

Solution

  • I'd just give the wrapper/body-element your desired background-color, make a new container inside of that wrapper-element, give that your other desired background-color, and then center it. This way you don't have to make 2 new elements.

    * {
  margin: 0;
  padding: 0;
}

body {
  background-color: lightcyan;
}

.wrapper {
  background-color: rgb(35, 168, 221);
  height: 100vh;
  max-width: 75%;
}

.container {
  background-color: lightcyan;
  max-width: 80%;
  height: 100%;
  margin-left: auto;
  margin-right: auto;
}
    <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>ELECTRIC PAGES Reading Notes</title>
  <link rel="stylesheet" href="css/style.css" />
</head>

<body>
  <main>
    <div class="wrapper">
      <div class="container">
        <h2>Reading Notes</h3>
      </div>
    </div>
  </main>
</body>

</html>