The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> 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
pandy
post May 2 2020, 10:02 AM
Post #2


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



Well, things can stick out from a DIV, but they shouldn't with what you have.

I've tried, but can't find what causes this. I don't see how this DIV and .btn are significantly different from the others you have that don't show this problem.

I played around with it to try to figure out what's happening. If you add a DIV with text in it directly after the link, the button will overlap that text. If you instead move the link into the P, like this...

CODE
<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<br>
                    <a href="#" class="btn">Learn More</a></p>


... it will overlap the text above it. In both cases everything will be contained in the DIV though. It's like the button is glued to that spot, as if it was positioned on top of the other stuff. Only it isn't.

There must be something. But what? blink.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post May 2 2020, 02:51 PM
Post #3


.
********

Group: WDG Moderators
Posts: 9,630
Joined: 10-August 06
Member No.: 7



It seems to be the link padding:

CODE
.btn {
    padding: 0.6rem 1.3rem;
    border: solid;
}

div {border: solid red;}

<div>
    <a href="#" class="btn">Learn More</a>
</div>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post May 2 2020, 04:57 PM
Post #4


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



Of course! And here I looked for something more complicated. I think I assumed the button was made block, but it isn't. laugh.gif

I don't find the page I looked for, but this will do.
https://maxdesign.com.au/articles/inline/

Good you saw it before I had time to complicate things even more. cool.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
mp3909
post May 3 2020, 06:47 AM
Post #5


Novice
**

Group: Members
Posts: 20
Joined: 4-April 20
Member No.: 27,264



Thanks Christian J and Thanks Pandy for your helpful insights into this, much appreciated smile.gif

Pandy, I looked at this link you sent https://maxdesign.com.au/articles/inline/

In that article,it says for inline elements, only left and right padding will have an effect on surrounding content. So I still do not understand why my box is hanging out from its div because for that to happen, there must be padding applied at the bottom but the articles says on left and right will have an effect.

Thank You
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post May 3 2020, 07:25 AM
Post #6


.
********

Group: WDG Moderators
Posts: 9,630
Joined: 10-August 06
Member No.: 7



Actually they write:

"the padding on the top and bottom of the <li> elements seems to have been ignored causing the elements to overlap each other."

But when they write:

"While padding can be applied to all sides of an inline element, only left and right padding will have an effect on surrounding content."

...the "effect" they are talking about is pushing surrounding content away. The top- and bottom padding doesn't do that, it just make the elements overlap (as seen by the red border).

Here I've added a second DIV to my previous example, showing this:

CODE
<div>
    <a href="#" class="btn">Learn More</a>
</div>
<div>lorem ipsum dolor set amet</div>

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
mp3909
post May 3 2020, 07:44 AM
Post #7


Novice
**

Group: Members
Posts: 20
Joined: 4-April 20
Member No.: 27,264



ok cool.
thank you smile.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
mp3909
post May 3 2020, 08:34 AM
Post #8


Novice
**

Group: Members
Posts: 20
Joined: 4-April 20
Member No.: 27,264



sorry, I just realised when I make my screen smaller, I see all the elements inside my wrapper div box hanging out on the right hand side as per the attached images.

is there a way to make sure that everything inside the div wrapper box stays inside?



This post has been edited by mp3909: May 3 2020, 08:37 AM


Attached thumbnail(s)
Attached Image
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post May 4 2020, 06:15 PM
Post #9


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



Not in all browsers. I haven't looked into grid layouts very much, so I'm not sure how that is supposed to work.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

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

 



- Lo-Fi Version Time is now: 28th March 2024 - 05:45 PM