CODEWITHSUNDEEP
htmlcsscss-position
GitGudAllu
GitGudAllu

Reputation: 15

Why do my 2 divs inside a footer go in different corners?

while making a footer for a school task I encountered this problem: both texts should be on the same line, but one goes higher and one goes lower

Divs in different corners

I tried to put a link in the left side of the footer and some text in the right side. For some reason when I split the divs into their positions they end up like this. Link goes in left top corner and text goes in bottom right corner. I'm trying to get them both VERTICALLY centered but nothing I do gets them both there. I've managed to get both in the center by themselves but never both at the same time. What is going on here?

Here's my html:

<footer>
    <div class="link_class">
        <a href="./" class="link_class">asd</a>
    </div>
    <div class="copy_class">
        <p>&copy; dsa</p>
    </div>
</footer>

and here's the css:

footer{
    width: 20%;
    height: 5%;
    background-color: gray;
    display: flex;
    justify-content: space-between;
}

Upvotes: 0

Views: 63

Answers (3)

corn on the cob
corn on the cob

Reputation: 2282

Just add this, which aligns them next to each other using the magical powers of flexbox.

align-items: center;


footer{
    width: 20%;
    height: 5%;
    background-color: gray;
    display: flex;
    align-items: center;
}
<footer>
    <div class="link_class">
        <a href="./" class="link_class">asd</a>
    </div>
    <div class="copy_class">
        <p>&copy; dsa</p>
    </div>
</footer>

Upvotes: 0

Casana
Casana

Reputation: 116

In your example, the cause is not flex behaviour.

Native browsers styles apply margin to 'p' tags (margin-block-start: 1em;margin-block-end: 1em;) but not to 'a' tags. To solve it, you have some simple options:

  • Apply margin: 0 to your 'p'
  • Change the p tag with another that doesn´t have default margins.

Here is the reference of the default browsers styles: https://www.w3schools.com/cssref/css_default_values.asp

Upvotes: 1

Anzor Asadov
Anzor Asadov

Reputation: 402

if you want them to be on separate lines then

  align-items: center;
  flex-direction: column;

and leave out justify-content

Upvotes: 1

Related Questions