Home>

When I typeset a site without aligning the labels in the menu block in the header, everything is displayed the way I need it. The menu itself has a gray header. Here is the site code and its appearance.

.container .head .logo {
  position: relative;
  height: 120px;
  width: 120px;
  float: left;
  display: inline-block;
}
.container .head .menu {
  position: relative;
  height: 120px;
  width: 60%;
  background: gray;
  display: inline-block;
  padding-left: 10px;
  margin-left: 10%;
} 
<! DOCTYPE html>
<html>
<head>
  <meta charset= "utf-8" />
  <title>Page 2 </title>
  <link rel= "stylesheet" type= "text /css" href= "page3.css">
  <link rel= "shortcut icon" type= "image /png" href= "favicon.png" />
</head>
<body>
  <div class= "container">
    <div class= "head">
      <div class= "logo">
        <img src= "logo.png" width= "100%" height= "100%">
      </div>
      <div class= "menu">
        <h3>Projects </h3>
        <h3>Slides </h3>
        <h3>Contacts </h3>
      </div>
    </div>
  </div>
</body>
</html>

However, when I decide to apply the horizontal alignment of the entries, the menu block slides down somewhere. Here is the code

.container .head .logo {
    position: relative;
    /* float: left; * /
    height: 120px;
    width: 120px;
    display: inline-block;
}
.container .head .menu {
    position: relative;
    height: 120px;
    width: 60%;
    background: gray;
    display: inline-block;
    padding-left: 10px;
    margin-left: 10%;
}
.container .head .menu h3 {
    display: inline;
} 
<! DOCTYPE html>
<html>
    <head>
        <meta charset= "utf-8" />
        <title>Page 2 </title>
        <link rel= "stylesheet" type= "text /css" href= "page3.css">
        <link rel= "shortcut icon" type= "image /png" href= "favicon.png" />
    </head>
    <body>
        <div class= "container">
            <div class= "head">
                <div class= "logo">
                    <img src= "logo.png" width= "100%" height= "100%">
                </div>
                <div class= "menu">
                    <h3>Projects </h3>
                    <h3>Slides </h3>
                    <h3>Contacts </h3>
                </div>
            </div>
        </div>
    </body>
</html>

What is it? How to solve this problem? I would be grateful for any constructive hints.

  • Answer # 1
    .container {
          display: flex;
          max-width: 100%;
        }
        .container .logo {
            height: 120px;
            width: 120px;
            border: 1px solid red;
            margin-right: 100px;
        }
        .container .logo img {
            max-width: 100%;
        }
        .container .menu {
            background: gray;
            padding: 10px;
            display: flex;
        }
        .container .menu h3 {
          margin: 0;
        }
        .container .menu h3: not (: last-child) {
          padding-right: 20px;
        }
    <div class= "container">
      <div class= "logo">
        <img src= "logo.png">
      </div>
      <div class= "menu">
        <h3>Projects </h3>
        <h3>Slides </h3>
        <h3>Contacts </h3>
      </div>
    </div>
    

    Use flex in your layout. developer.mozilla.org/ru/docs/Web/CSS/flex

    Дмитрий Ломоновский2021-02-23 18:30:44

    And try to avoid fixed heights. Otherwise, when adding content, the layout will break.

    Дмитрий Ломоновский2021-02-23 18:30:44

    Thank you very much for such valuable advice! Now I'll check your option)

    Рэм Кудусов2021-02-23 18:30:44
  • Answer # 2

    If you uncomment a line in this code, then everything will work as it should)

    .container .head .logo {
        position: relative;
        /* float: left; * /
        height: 120px;
        width: 120px;
        display: inline-block;
    } 

    Thank you, I didn’t look, you’re right!

    Рэм Кудусов2021-02-23 18:30:44