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.

{
    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>

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>

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>

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

React does not support having two :focus selectors on a single JSX element

When I try to host my Jekyll site on GitHub Pages using my custom domain, the CSS doesn't seem to be rendering at all

Activate the clicked tab in the Bootstrap navbar when selected

The size of the panel header does not seem to be adjusting as expected within the React

Ways to create an overlapping effect for 3 elements using CSS

Incorporate JavaScript functionality with HTML dropdown lists

Guide on displaying a real-time "Last Refreshed" message on a webpage that automatically updates to show the time passed since the last API request

Samsung devices exclusively showcase background in responsive design

Splitting an array into multiple arrays with distinct names: A step-by-step guide

Tips for making text flow around an image

When using jQuery to focus on an input element, the cursor fails to show up

Discover the index of the row when the value in the dropdown list is updated

Steps to modify the background color of an IconButton upon clicking in Material UI

The Impact of CSS Border Width on the Size of a PHP Form

Overlap one element entirely with another

Issue with rendering components list in React.js

Personalizing the fileTemplate selection in FineUploader

Implement a CSS style for all upcoming elements

Unable to see background image inside div

Is there a way to prevent HTML code from being executed when sharing it as text? I want to be able to share code without it being activated as HTML on the page