The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

> why does my anchor tag stick out from it's div box
mp3909
post May 2 2020, 06:20 AM
Post #1


Novice
**

Group: Members
Posts: 20
Joined: 4-April 20
Member No.: 27,264
So I have an issue at the div class = info in the html code below.
The anchor tag sticks out from its container which is the div class = info.
I have put a border around the div class = info in the css code so it is clearly obvious to see.
Why is this anchor tag sticking out?
I thought the div is a container so it should contain all its elements inside it and nothing should be sticking out of it?
I also thought the div container will automatically increase its height as soon as you add more elements inside it.

CODE
<!DOCTYPE html>

<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>GridBiz</title>
        <script src="https://kit.fontawesome.com/ebd07eb632.js" crossorigin="anonymous"></script>
        <link rel="stylesheet" type="text/css" href="website2.css">
    </head>
    <body>
        <div class="wrapper">

            <nav class="main-nav">
                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Services</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>
            </nav>

            <section class="top-container">
                <header class="showcase">
                    <h1>Your web presence</h1>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore</p>
                    <a href="#" class="btn">Read More</a>
                </header>
                <div class="top-box" "top-box-a">
                    <h4>Membership</h4>
                    <p class="price">$199/mo</p>
                    <a href="#" class="btn">Buy Now</a>
                </div>
                <div class="top-box" "top-box-b">
                    <h4>Pro Membership</h4>
                    <p class="price">$299/mo</p>
                    <a href="#" class="btn">Buy Now</a>
                </div>
            </section>

            <section class="boxes">
                <div class="box">
                    <i class="fas fa-chart-pie fa-4x"></i>
                    <h3>Analytics</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do</p>
                </div>
                <div class="box">
                    <i class="fas fa-globe fa-4x"></i>
                    <h3>Marketing</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do</p>
                </div>
                <div class="box">
                    <i class="fas fa-cog fa-4x"></i>
                    <h3>Development</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do</p>
                </div>
                <div class="box">
                    <i class="fas fa-users fa-4x"></i>
                    <h3>Support</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do</p>
                </div>
            </section>

            <div class="info">
                <img src="images\black-and-white-blackboard-business-chalkboard-356043.jpg" alt="">
                <div>
                    <h2>Your Business On The Web</h2>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi</p>
                    <a href="#" class="btn">Learn More</a>
                </div>
            </div>

            <section class="portfolio">
                <img src="https://source.unsplash.com/random/200x200" alt="">
                <img src="https://source.unsplash.com/random/201x200" alt="">
                <img src="https://source.unsplash.com/random/202x200" alt="">
                <img src="https://source.unsplash.com/random/203x200" alt="">
                <img src="https://source.unsplash.com/random/204x200" alt="">
                <img src="https://source.unsplash.com/random/205x200" alt="">
                <img src="https://source.unsplash.com/random/206x200" alt="">
                <img src="https://source.unsplash.com/random/207x200" alt="">
                <img src="https://source.unsplash.com/random/208x200" alt="">
            </section>

            <footer>
                <p>GridBiz © 2020</p>
            </footer>

        </div>
    </body>
</html>



CODE
/*CSS Variables*/
:root {
     --primary: #ddd;
     --dark: #333;
     --light: #fff;
     --shadow: 0 1px 5px rgba(104,104,104,0.8);
}

html {
    box-sizing: border-box;
    font-family: Arial, Helvetica, sans-serif;
    background-color: var(--dark);
}

body {
    background-color: #ccc;
    margin: 30px 50px;
    line-height: 1.4;
}

.btn {
    background-color: var(--dark);
    color: var(--light);
    padding: 0.6rem 1.3rem;
    text-decoration: none;
    border: 0;
}

img {
    max-width: 100%;
}

.wrapper {
    display: grid;
    grid-gap: 20px;
}


.main-nav ul {
    padding: 0;
    list-style: none;
    display: grid;
    grid-column-gap: 10px;
    grid-template-columns: repeat(4, 1fr);
}

.main-nav a {
    background-color: var(--primary);
    display: block;
    text-decoration: none;
    padding: 0.8rem;
    text-align: center;
    font-size: 1.2rem;
    color: var(--dark);
    text-transform: uppercase;
    box-shadow: var(--shadow);
}

.main-nav a:hover {
    background-color: var(--dark);
    color: var(--light);
}

.top-container {
    display: grid;
    grid-gap: 20px;
    grid-template-areas:
    "showcase showcase top-box-a"
    "showcase showcase top-box-b";
}

.showcase {
    grid-area: showcase;
    min-height: 400px;
    background-image: url(images/iphone-dark-notebook-pen-34140.jpg);
    background-size: cover;
    background-position: center;
    padding: 3rem;
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: center;
    box-shadow: var(--shadow);
}

.showcase h1 {
    font-size: 4rem;
    margin-bottom: 0;
    color: var(--light);
}

.showcase p {
    font-size: 1.3rem;
    color: var(--light);
    margin-top: 0;
}

.top-box {
    background: var(--primary);
    text-align: center;
    box-shadow: var(--shadow);
    padding: 1.5rem;
}

.top-box p {
    margin: 1.25rem;
}

.top-box .price {
    font-size: 2.5rem;
}

.top-box-a {
    grid-area: top-box-a;
}

.top-box-b {
    grid-area: top-box-b;
}

.boxes {
    display: grid;
    grid-gap: 20px;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.box {
    background-color: var(--primary);
    text-align: center;
    padding: 1.5rem 2rem;
    box-shadow: var(--shadow);
}

.info {
    background: var(--primary);
    box-shadow: var(--shadow);
    display: grid;
    border: 2px solid crimson;
}
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Posts in this topic
mp3909   why does my anchor tag stick out from it's div box   May 2 2020, 06:20 AM
pandy   Well, things can stick out from a DIV, but they sh...   May 2 2020, 10:02 AM
Christian J   It seems to be the link padding: .btn { padding...   May 2 2020, 02:51 PM
pandy   Of course! And here I looked for something mor...   May 2 2020, 04:57 PM
mp3909   Thanks Christian J and Thanks Pandy for your helpf...   May 3 2020, 06:47 AM
Christian J   Actually they write: "the padding on the to...   May 3 2020, 07:25 AM
mp3909   ok cool. thank you :)   May 3 2020, 07:44 AM
mp3909   sorry, I just realised when I make my screen small...   May 3 2020, 08:34 AM
pandy   Not in all browsers. I haven't looked into gri...   May 4 2020, 06:15 PM

« Next Oldest · Cascading Style Sheets · Next Newest »
 

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 

Display Mode: Switch to: Standard · Switch to: Linear+ · Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

- Lo-Fi Version Time is now: 24th April 2024 - 03:40 AM
Invision Power Board © 2024  IPS, Inc.
Licensed to: HTMLHelp.com, LLC