CODEWITHSUNDEEP
htmlcss
SkyjumperTalon
SkyjumperTalon

Reputation: 101

Making an <aside> element a specific part of a page?

Basically, I'm trying to make a page that involves 3 parts to a page - An aside element, a div element (to be used for animation but not relevant), and a footer. How I want it layed out is the aside element on the top left of the page, and the black div element below that, while a footer is just generally under the div element. What I have so far has the div element as almost a background for the aside element, and the footer below that.

When I try and do position: absolute; top: xxx left: xxx the div element will be positioned fine, but it will overlap overtop of the footer.

How do I get it to act differently? Thanks!

<!DOCTYPE html>
<html>
    <head>
        <title>A thing</title>
        <link rel="stylesheet" type="text/css" href="finalmobile.css">
        <link rel="stylesheet" media="only screen and ( min-width: 30em )" href="finaltablet.css">
        <link rel="stylesheet" media="only screen and ( min-width: 48em )" href="final.css">
        <script type="text/javascript" src="project.js"></script>
    </head>
    <body>
        <aside class="aside1">
            <h1>TEXT</h1>
        </aside>
        <div class="coupon">
        </div>
        <br><br><br><br><br><br>
        <footer>
            <p style="font-size: small; text-align: center">&#169; Blah Blah Blah, 2017</p>
        </footer>
    </body>
</html>

CSS: 

aside.aside1                {
                                    height: 20%;
                                    width: 40%;
                                    margin: 2%;
                                    padding: 1%;
                                    background-color: teal;
                                    border: 1px solid black;
                                    float: left;
                                    border-radius: 5px;
            }
    div.coupon      {
                                    height: 20%;
                                    width: 50%;
                                    background-color: black;
                                    position: static;
                                    top: 40%;

            }

Upvotes: 0

Views: 146

Answers (1)

Johannes
Johannes

Reputation: 67768

You can remove/avoid the position: absolute from the .coupon DIV (making/leaving it a regular element inside the document flow, thereby pushing subsequent elements like the footer down) and add position: absolute to the aside, thereby placing it above the DIV in the top left corner of the body (it will scroll along with the body if you scroll down).

html,
body {
  margin: 0;
  height: 100%;
}

aside.aside1 {
  height: 20%;
  width: 40%;
  margin: 2%;
  padding: 1%;
  background-color: teal;
  border: 1px solid black;
  position: absolute;
  border-radius: 5px;
}

div.coupon {
  width: 50%;
  background-color: black;
  position: static;
  top: 40%;
  color: white;
  padding: 150px 5px 5px 5px;
}
<aside class="aside1">
  <h1>TEXT</h1>
</aside>
<div class="coupon">
  <p>If you put some content in here, you'll see that this element will grow.</p>
  <p>If you put some content in here, you'll see that this element will grow.</p>
  <p>If you put some content in here, you'll see that this element will grow.</p>
  <p>If you put some content in here, you'll see that this element will grow.</p>
  <p>If you put some content in here, you'll see that this element will grow.</p>
</div>
<footer>
  <p style="font-size: small; text-align: center">&#169; Blah Blah Blah, 2017</p>
</footer>

Upvotes: 1

Related Questions