Question 44841 in Html Question posted in
Some basic documentation can be found here.

Header keeps ticking out of a div – Html

I am in the process of creating a website. The website should have a bar at the top that is constantly visible. So far I have placed some buttons, an image and a headline inside the bar at the top. The bar at the top is made as a div and therefore I can’t understand how my headline keeps ticking out below the bar at the top(div).

How do I make sure my headline stays inside my div and gets smaller as the page gets smaller?

enter image description here

Code shown below is for my bar (header-div), button and the header itself.

    `.Header-div {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 7vh;
    background-color: white;
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.25);
    z-index: 9999;
}

.Kalender, .Info {
    font-size: 1em;
    width: 5%;
    height: 75%;
    margin-left: 2%;
    margin-right: 0.1%;
    margin-bottom: 5vh;
    display: inline-block;
    vertical-align: middle;
    cursor: pointer;
    white-space: 
    overflow: hidden; 
    text-overflow:
}
.Header1 {
    position: fixed;
    font-size: 2.5em;
    font-family: sans-serif;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    left: 30%;
    right: 30%;
    
  }`
Tags:

2

Answers


  1. 0

    Firstly: you’re specifying both .Header-div and .Header with position: fixed, so they’re both positioned relative to the page.

    Secondly: you’re specifying a fixed height on the .Header-div which happens to be less than the height required to display its contents. The default rule is overflow: visible, which gives you the behaviour you see here.

    If you remove the position: fixed rule for .Header and the height on .Header-div, then the height of .Header-div depends only on its contents.

    This messes up your alignment on the inner div, but change display: inline-flex to display: flex and you’re all good.

    JSFiddle here

    Login or Signup to reply.
  2. 0

    As the motto’s answer suggest, there are plenty of things to do with the given CSS. But responsive font size can also be achieved quite easilly itself by using vw units instead of em like you do. A vw stands for "viewport width", which is percentage of current browser window size.

    For me it is super-easy and super-scalable, it only has a few limitations related to some browsers.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search