-1

So I wanted to ask how I get this line/div to the bottom of the header, I am very new to this. I practically only know the basics of HTML and CSS. Answers would be appreciated. (All code can be seen in the screenshot)

this is the HTML.

<div class="header">
    <img src="Resources/Logo_White_00000.png" class="Logo" alt="Logopng">
        <div class="header-right">
            <a href="About.html">ABOUT</a>
        </div>
    
            <div class="header-left">
            <a href="Videos.html">VIDEOS</a>

    </div>
        <div class="WhiteHeaderBar">
    </div>
</div>

Header with white div

Joakim AXIS
  • 1
  • What line do you want at the bottom? Why not just put it at the bottom of your code? It is unclear what you are trying to accomplish. – Libra Sep 23 '20 at 19:40
  • 2
    Hey Joakim, have you learned about [CSS Flexbox](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox)? I think it would help you out! Basically you could make the header the "container", and then make a div take one entire row, and the next row would be split 50/50 with your "left" and "right" divs. – Evan Bechtol Sep 23 '20 at 19:40
  • 1
    Does this answer your question? [How to align content of a div to the bottom](https://stackoverflow.com/questions/585945/how-to-align-content-of-a-div-to-the-bottom) – Mech Sep 23 '20 at 19:42
  • 1
    Hi Joakim AXIS! Could you share all the code (including CSS)? Often we need to run the code, in order to fix it, and it;s not possible to recreate your snippet just from the screenshot and HTML (without me having to type it out manually ). Thanks! – Alicia Sykes Sep 23 '20 at 19:42

3 Answers3

0

HTML displays elements in the order they are written. Furthermore, I would use either CSS Grid or Flexbox to accomplish this layout. Here is an example that utilizes flexbox:

.header{
  background-color: black;
  display: flex;
  border-bottom: white;
}

.header > div{
  flex-grow: 1;
  text-align: center;
  vertical-align: center;
  font-size: 20pt;
  padding: 10px;
  margin-bottom: 20px;
  border-bottom: 2px solid white;
}

.header a{
  line-height: 100px;
  color: white;
  text-decoration: none;
}
<div class="header">

  <div class="header-left">
    <a href="Videos.html">VIDEOS</a>
  </div>

  <div class="Logo">
    <img src="https://via.placeholder.com/80" alt="Logopng">
  </div>

  <div class="header-right">
    <a href="About.html">ABOUT</a>
  </div>

</div>

Notice that I reordered your items, and did away with the bottom element, as it is unnecessary if you use border-bottom.

Libra
  • 2,544
  • 1
  • 8
  • 24
0

For a line this thin a border-bottom property with the proper px height place on the header itself would be ideal but if you need to do it, do it with flexbox like so:

Put another wrapper around the left/right divs + img tag and set the header container as the flexbox object with the flex-direction property set to column. Change your current '.header' class to the new '.header-wrap' in CSS.

Then add the "align-self" property onto the .WhiteHeaderBar div with the value of "flex-end" and I believe that should append it to the bottom of the header if the padding/margin is reset to a value of 0px.

.header {
   display: flex;
   align-items: center;
   justify content: center;
   flex-direction: column;
}

.header-wrap {
/* styles from old .header class */
}

.WhiteHeaderBar {
  align-self: flex-end
}

Let me know if this works, don't get discouraged if you need to tweak values you set before to make this work properly. It's hard to supply a proper answer without the css or other relative files like the image.

will
  • 99
  • 8
-1

Could you just get rid of the WhiteHeaderBar element completely and put a border-bottom: solid 3px #fff; on the whole header component? Empty elements are pretty pointless...

Devin McQueeney
  • 1,277
  • 2
  • 14
  • 31