How to move a p tag up within a div tag?

Question

I am currently working on a navigation bar for my website, and am super new to CSS and HTML.

I have a header split up into two divs, one for the top half displaying the logo, title, and login page, and another for the navigation buttons. I am running into issues, where my p tag leaves the div that it is inside of, and gets in the way of my navigation buttons. Here is an image of the issue: [1]: https://i.stack.imgur.com/MoSsk.png

What you are looking at is the inspect element view of a p tag next to an image tag, both within a div.

Here is some html:

header{
        background-color: #B71C1C;
        color: #FFFFFF;
        position:fixed;
        top:0;
        left:0;
        width:100%;
        height:150px;
        margin-left: 0px;
        margin-right: 0px;
}

#bar_logo{
        max-height:90px;
        max-width:90px;
        height:auto;
        width:auto;
        margin:0;
        padding:0;
}

.upper_banner{
        width:100%;
        height:60%;
        margin: 0;
        padding: 0;
}

#title_banner{
        margin:0;
        padding:0;
        display: inline;
        height:60%;
        font-size: 45px;
        font-family: Helvetica;
        text-align:center;
        top: -20;
}

#login{
        float: right;
        margin:10px;
}


.lower_banner{
        width: 100%;
        height: 40%;
        margin:0;
        padding:0;
}

<header>
                <div class="upper_banner">
                        <img id="bar_logo" src="https://picsum.photos/100/100" alt="Title">
                        <p id="title_banner">
                                Title of Website
                        </p>

                        <a id="login" href="login.html">login</a>
                </div>


</header> <!-- added by Rickard -->

I am having some troubles working out this issue, as when I do highlighting over the div "upper_banner" it doesn't highlight past my image on the far right. As you can see, I was attempting to use

top: -20;

in an attempt to move it up 20 px, but no difference. I have a feeling that this issue is because my p tag is starting at a certain point, and because my height is set to a fixed pixel count, it is going down that number of pixels, which leads to it overflowing into the div below.

Apologies for the wicked beginner question, super new to all of this.

Hi, your header is not closed and also seems as it is missing a div (as you wrote you have two). Please add that html as it is relevant to the question. Just a tip, please don't style with #. — Dejan.S, Oct 13 '20 at 06:11
@Dejan.S Why wouldn't I use #? distinguishes between class and id. — backward forward, Oct 29 '20 at 21:06
Well, first your styles can't be reused, let's say a you might have 30 buttons on a page, you would have to style #button1 to #button30 with the same style. It becomes very specific with id so makes it harder to override. There are plenty articles about the topic, here is one from [Harry Roberts](https://cssguidelin.es/#ids-in-css) — Dejan.S, Oct 29 '20 at 21:57
So you're saying if I have multiple, it should be class? There is only one, of each id mentioned in the code above. It is a navigation bar, and the respective styles should only be applied to that element, so why would I use class? @Dejan.S — backward forward, Nov 05 '20 at 09:13
@backwardforward You can read the article I pasted. You get more specific when styling with id so harder to override. There are a few more reasons connected to scale and refactoring, code does change no matter what you think. It is a common thing not to style with id within the industry. — Dejan.S, Nov 11 '20 at 07:15

score 2 · Answer 1 · edited Oct 17 '20 at 16:03

2

Try adding the following in .upper_banner class element's CSS.

display:flex;
justify-content: center;

For more clarity, do search around and study flex boxes and flex alignments. It could help you a lot!

edited Oct 17 '20 at 16:03

Dharman

21,838
18
57
107

answered Oct 13 '20 at 06:06

Sudev Suresh Sreedevi

86
1
5

2

Here is a good resource for learning flex-box: https://css-tricks.com/snippets/css/a-guide-to-flexbox/ – Rickard Elimää Oct 13 '20 at 06:48

score 1 · Accepted Answer · answered Oct 13 '20 at 07:16

All elements have position: static as default. If you want to move elements around with top or left, you need to change the positioning to relative, absolute or fixed.

Elements align normally at the bottom. If you want a different alignment, you can use vertical-align. It's today better to use display: flex and then control where the elements are with align-items: center or justify-content: center.

You should rarely use float or position: absolute because that makes the elements loose their height, and can mess up the rest of the design.

Inline-elements adjust their width and height to the content, so it doesn't make any sense to give them a height (like your #title_banner).

Here is the code I added, where I target all (*) elements that are children (>) to .upper_banner.

.upper_banner > *  {
  vertical-align: middle;
}

header{
        background-color: #B71C1C;
        color: #FFFFFF;
        position:fixed;
        top:0;
        left:0;
        right:0;
        height:150px;
        margin-left: 0px;
        margin-right: 0px;
}

#bar_logo{
        max-height:90px;
        max-width:90px;
        height:auto;
        width:auto;
        margin:0;
        padding:0;
}

.upper_banner{
        width:100%;
        margin: 0;
        padding: 0;
}

/* ADDED */
.upper_banner > *  {
  vertical-align: middle;
}

#title_banner{
        margin:0;
        padding:0;
        display: inline;
        font-size: 45px;
        font-family: Helvetica;
}

#login{
        float: right;
        margin:10px;
}


.lower_banner{
        width: 100%;
        height: 40%;
        margin:0;
        padding:0;
}

<header>
                <div class="upper_banner">
                        <img id="bar_logo" src="https://picsum.photos/100/100" alt="Title">
                        <p id="title_banner">
                                Title of Website
                        </p>

                        <a id="login" href="login.html">login</a>
                </div>


</header>

Here is an example, where I used flex. Comments are within the code:

header{
        background-color: #B71C1C;
        color: #FFFFFF;
        position:fixed;
        top:0;
        left:0;
        height:150px;
        margin-left: 0px;
        margin-right: 0px;

        /* ADDED */
        right: 0;
 }

#bar_logo{
        max-height:90px;
        max-width:90px;
        height:auto;
        width:auto;
        margin:0;
        padding:0;
}

.upper_banner{
        /*width:100%;*/
        margin: 0;
        padding: 0;
        
        /* ADDED */
        display: flex;
        align-items: center;
}


#title_banner{
        margin:0;
        padding:0;
        /*display: inline;*/
        font-size: 45px;
        font-family: Helvetica;
        
        /* ADDED */
        flex: 1 1 auto /* fill up all excessive space, pushing #login to the right */
}

#login{
        /*float: right;*/
        /*margin:10px;*/
        
        /* ADDED */
        padding: 10px; /* margin messes up spacing for flex layout */
        align-self: flex-start;
}


/*.lower_banner{
        width: 100%;
        height: 40%;
        margin:0;
        padding:0;
}*/

<header>
                <div class="upper_banner">
                        <img id="bar_logo" src="https://picsum.photos/100/100" alt="Title">
                        <p id="title_banner">
                                Title of Website
                        </p>

                        <a id="login" href="login.html">login</a>
                </div>


</header>

How to move a p tag up within a div tag?

2 Answers2