Arrange the header and input within a div using flexbox to achieve different alignments

Question

Arrange the header and input within a div using flexbox to achieve different alignments

I need help aligning the header section vertically and ensuring responsiveness. Using margin-top isn't fully responsive, so I want to align the header at the beginning of the input field.https://i.sstatic.net/w3xSP.jpg

{
    margin: 0px;
    padding: 0px;
    color: white;
}

#header{
    height: 300px;
    width: 100%;
    background-image: url(healthy.jpg);
}

#headersection{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
#headersection input{
   width: 50%;
   height: 40px;
   border-radius: 20px;
  border: none;
}

#navigation{
    display: flex;
    flex-wrap: wrap;
}
#navigation li{
    font-weight: bold;
    font-size: 1rem;
    padding: 20px;
    list-style: none;
}

<nav id="header">
        <ul  id="navigation">
            <li>Home</li>
            <li>About Us</li>
            <li>Register</li>
            <li>Contact Us</li>
        </ul>
        <div id="headersection">
            <h1>
                Health is Wealth
            </h1>
            <input type="search" name="Search" id="" placeholder="Search">
        </div>
 </nav>

https://i.sstatic.net/w3xSP.jpg I would like to align the input and header sections in the blue area and also move the header part to the beginning of this input section as marked by the yellow lines.

html css

Answer 1

Answer №1

To vertically center #headersection, you can utilize the valign attribute with a value of "middle" instead of relying on margin-top. This will automatically position it in the middle without the need for align-items in #headersection.

Answer 2

To vertically center #headersection, you can utilize the valign attribute with a value of "middle" instead of relying on margin-top. This will automatically position it in the middle without the need for align-items in #headersection.

Answer 3

Answer №2

When the headersection is the same width as the input, you have the option to utilize the following CSS:

#headersection{
align-items: flex-start;

}

Answer 4

When the headersection is the same width as the input, you have the option to utilize the following CSS:

#headersection{
align-items: flex-start;

}

Answer 5

Answer №3

Begin by inserting a

<div class="container">

</div>.

To adjust the start of the navigation text, set the max-width value for this div.

If you want to align the header part with yellow lines at the beginning of the input section, include

#navigation > li:nth-child(1){padding-left: 0;}

in your CSS file.

The provided code snippet should assist you in achieving the desired layout.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0px;
        padding: 0px;
        color: white;
        background-color: lightgreen;
        background-image: url(healthy.jpg);
      }

      #header {
        height: 300px;
        width: 100%;
      }

      #headersection {
        display: flex;
        flex-direction: column;
      }
      #headersection input {
        width: 100%;
        height: 40px;
        border-radius: 20px;
        border: none;
        background: white;
      }

      #navigation {
        display: flex;
        flex-wrap: wrap;
      }
      #navigation li {
        font-weight: bold;
        font-size: 1rem;
        padding: 20px;
        list-style: none;
      }
      #navigation > li:nth-child(1){
          padding-left: 0;
      }
      .container {
          max-width: 768px;
          margin-left: auto;
          margin-right: auto;
      }
    </style>
  </head>
  <body>
      <div class="container">
    <nav id="header">
      <ul id="navigation">
        <li>Home</li>
        <li>About Us</li>
        <li>Register</li>
        <li>Contact Us</li>
      </ul>
      <div id="headersection">
        <h1>Health is Wealth</h1>
        <input type="search" name="Search" id="" placeholder="Search" />
      </div>
    </nav>
</div>
  </body>
</html>

Answer 6

Begin by inserting a

<div class="container">

</div>.

To adjust the start of the navigation text, set the max-width value for this div.

If you want to align the header part with yellow lines at the beginning of the input section, include

#navigation > li:nth-child(1){padding-left: 0;}

in your CSS file.

The provided code snippet should assist you in achieving the desired layout.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0px;
        padding: 0px;
        color: white;
        background-color: lightgreen;
        background-image: url(healthy.jpg);
      }

      #header {
        height: 300px;
        width: 100%;
      }

      #headersection {
        display: flex;
        flex-direction: column;
      }
      #headersection input {
        width: 100%;
        height: 40px;
        border-radius: 20px;
        border: none;
        background: white;
      }

      #navigation {
        display: flex;
        flex-wrap: wrap;
      }
      #navigation li {
        font-weight: bold;
        font-size: 1rem;
        padding: 20px;
        list-style: none;
      }
      #navigation > li:nth-child(1){
          padding-left: 0;
      }
      .container {
          max-width: 768px;
          margin-left: auto;
          margin-right: auto;
      }
    </style>
  </head>
  <body>
      <div class="container">
    <nav id="header">
      <ul id="navigation">
        <li>Home</li>
        <li>About Us</li>
        <li>Register</li>
        <li>Contact Us</li>
      </ul>
      <div id="headersection">
        <h1>Health is Wealth</h1>
        <input type="search" name="Search" id="" placeholder="Search" />
      </div>
    </nav>
</div>
  </body>
</html>

Answer 7

Answer №4

Check out this code snippet:

*{
    margin: 0px;
    padding: 0px;
    color: white;
}

#header{
    height: 300px;
    width: 100%;
    background-color: red; /*instead your image. only for seen*/
}

#headersection{
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%; /*added*/
    width: 50%; /*added*/
}

#headersection input{
   width: 100%; /*edited*/
   height: 40px;
   border-radius: 20px;
  border: none;
}

#navigation{
    display: flex;
    flex-wrap: wrap;
}

#navigation li{
    font-weight: bold;
    font-size: 1rem;
    padding: 20px;
    list-style: none;
}
#container{ /*added*/
    display: flex;
    justify-content: center;
    width: 100%;
    height: 60%;
}

<nav id="header">
        <ul  id="navigation>
            <li>Home</li>
            <li>About Us</li>
            <li>Register</li>
            <li>Contact Us</li>
        </ul>
        <div id="container">
        <div id="headersection">
            <h1>
                Health is Wealth
            </h1>
            <input type="search" name="Search" id="" placeholder="Search">
        </div>
        </div>
    </nav>

https://i.sstatic.net/SiyWF.png

I made some edits to the code. Let me know if it meets your requirements.

Answer 8

Check out this code snippet:

*{
    margin: 0px;
    padding: 0px;
    color: white;
}

#header{
    height: 300px;
    width: 100%;
    background-color: red; /*instead your image. only for seen*/
}

#headersection{
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%; /*added*/
    width: 50%; /*added*/
}

#headersection input{
   width: 100%; /*edited*/
   height: 40px;
   border-radius: 20px;
  border: none;
}

#navigation{
    display: flex;
    flex-wrap: wrap;
}

#navigation li{
    font-weight: bold;
    font-size: 1rem;
    padding: 20px;
    list-style: none;
}
#container{ /*added*/
    display: flex;
    justify-content: center;
    width: 100%;
    height: 60%;
}

<nav id="header">
        <ul  id="navigation>
            <li>Home</li>
            <li>About Us</li>
            <li>Register</li>
            <li>Contact Us</li>
        </ul>
        <div id="container">
        <div id="headersection">
            <h1>
                Health is Wealth
            </h1>
            <input type="search" name="Search" id="" placeholder="Search">
        </div>
        </div>
    </nav>

https://i.sstatic.net/SiyWF.png

I made some edits to the code. Let me know if it meets your requirements.

Arrange the header and input within a div using flexbox to achieve different alignments

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

What is the process for triggering a function event on click (or any other function) within a browser's activation?

aligning a form vertically in a container

What is the best way to prevent a jQuery hover event from adding a text-shadow to the CSS?

Tips for aligning an image on top of another image

What is the best way to target specific text within the DOM without including text within attributes?

Obtaining Google AAID Using a Mobile Browser (JavaScript)

Tables that are not only responsive but also friendly to mobile

Make sure to pause and wait for a click before diverting your

Enable sidebar navigation exclusively for mobile and iPad devices

Thymeleaf allows for the splitting of tables across different pages when generating a PDF document

Locking Bootstrap 4.3 Navbar at the Page's Summit with a See-Through Effect

Display only distinct dates in the ng-repeat list

How to specify columns when storing data in a CSV file using Scrapy

Bootstrap is causing issues with unidentified div elements

Angular 2 Component attribute masking

Looking to align a radio button in the middle of an inline-block?

CSS: A guide to creating layouts

Sending a collection of text inputs from a web form and saving them in MongoDB

Alert: Unresolved Promise Rejection Notification in the world of Express.js and Node.js!

PHP - Dynamically populating form questions based on user input