What is the best way to incorporate three divs into a single line while maintaining a responsive design

Struggling with adding a logo above a login form? As a PHP developer without design expertise, achieving a responsive layout like the image below may seem daunting.

To create this layout, consider using the following code:

<style>
  .container {
    display: flex;
    text-align: center;
  }
  
  .container>.logo {
    flex: 1;
  }
</style>

<body class="login-page">
  <div class="progress-wrap progress">
    <div class="progress-bar progress"></div>
  </div>

  <div class="header-container-wrapper">
    <div class="page-center">
      <a href="//www.c2perform.com">
        <img src="images/C2_Perform_Logo_Colour.svg" id="header-logo" alt="C2Perform" title="C2Perform">
      </a>
    </div>
  </div>

  <div class="body-container-wrapper">
    <div class="page-center">
      <div class="container">
        <div class="logo">
          <img src="images/ef_logo.png" width="200px" height="auto">
        </div>
        <div class="logo">
          <h4>is now</h4>
        </div>
        <div class="logo">
          <img src="images/C2_Perform_Logo_Colour.jpg" width="200px" height="auto">
        </div>
      </div>
    
      <div class="login-box-wrapper">
        <div class="login-box">
          <h3>Log In</h3>
          
          <form role="form" method="post" id="loginForm" class="form lostpass">
            <div class="form-group">
              <label for="inputEmail3">User Name</label>
              <div>
                <div>
                  <input type="text" class="form-control validate[required]" placeholder="Username" name="username" value="" size="30" maxlength="225" id="formfocus">
                </div>
              </div>
            </div>
            
            <div class="form-group">
              <label for="inputPassword3">Password</label>
              <div>
                <div class="input-group">
                  <input type="password" name="password" size="30" maxlength="25" class="form-control validate[required]" id="inputPassword3" placeholder="Password" autocomplete="off" />
                </div>
              </div>
            </div>
            
            <div class="form-group">
              <input type="hidden" name="ef_nonce" value="<?php ef_create_nonce('login_nonce'); ?>" />
              
              <div>
                <input type="submit" name="login" value="Login" class="button" />
              </div>
            </div>
            
            <div class="form-group">
              <div><a href="./lostpassword.php">Lost Password?</a></div>
            </div>
          </form>
        </div>
      </div>
      
    </div>
  </div>

For reference, you can view the desired layout here.

htmlcssflexbox

Answer №1

If you want to center items vertically, use align-items, and for horizontal alignment, use 

justify-content.</p>

<p><strong>DEMO</strong>
<div>
<div>
<pre class="snippet-code-css lang-css"><code>.container {
  display: flex;
  align-items: center;
  justify-content: center;
}

.container>.logo {
  flex-grow: 1;
  text-align: center;
}
<!-- Progress Bar -->
<div class="progress-wrap progress">
  <div class="progress-bar progress"></div>
</div>

<!-- Header -->
<div class="header-container-wrapper">
  <div class="page-center">
    <a href="//www.c2perform.com">
      <img src="images/C2_Perform_Logo_Colour.svg" id="header-logo" alt="C2Perform" title="C2Perform">
    </a>
  </div>
</div>

<!-- Body -->
<div class="body-container-wrapper">
  <div class="page-center">
    <div class="container">
      <div class="logo">
        <img src="images/ef_logo.png" width="200px" height="auto">
      </div>
      <div class="logo">
        <h4>is now</h4>
      </div>
      <div class="logo">
        <img src="images/C2_Perform_Logo_Colour.jpg" width="200px" height="auto">
      </div>
    </div>
    <!-- Login -->
    <div class="login-box-wrapper">
      <div class="login-box">
        <h3>Log In</h3>
        <?php ef_print_notices();  ?>
        <!-- Login Form -->
        <form role="form" method="post" id="loginForm" class="form lostpass">
          <div class="form-group">
            <label for="inputEmail3">User Name</label>
            <div>
              <div>
                <input type="text" class="form-control validate[required]" placeholder="Username" name="username" value="" size="30" maxlength="225" id="formfocus">
              </div>
            </div>
          </div>
          <div class="form-group">
            <label for="inputPassword3">Password</label>
            <div>
              <div class="input-group">
                <input type="password" name="password" size="30" maxlength="25" class="form-control validate[required]" id="inputPassword3" placeholder="Password" autocomplete="off" />
              </div>
            </div>
          </div>
          <div class="form-group">
            <input type="hidden" name="ef_nonce" value="<?php ef_create_nonce('login_nonce'); ?>" />
            <div>
              <input type="submit" name="login" value="Login" class="button" />
            </div>
          </div>
          <div class="form-group">
            <div><a href="./lostpassword.php">Lost Password?</a></div>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

Answer №2

If you want to switch the display layout to grid, you can do so by specifying the width at which the images should be displayed downwards.

.container {
  display: grid;
  align-items: center;
  justify-content: center;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
}

.container>.logo {
  flex-grow: 1;
  text-align: center;
}
<!-- Progress Bar -->
<div class="progress-wrap progress">
  <div class="progress-bar progress"></div>
</div>

<!-- Header -->
<div class="header-container-wrapper">
  <div class="page-center">
    <a href="//www.c2perform.com">
      <img src="images/C2_Perform_Logo_Colour.svg" id="header-logo" alt="C2Perform" title="C2Perform">
    </a>
  </div>
</div>

<!-- Body -->
<div class="body-container-wrapper">
  <div class="page-center">
    <div class="container">
      <div class="logo">
        <img src="images/ef_logo.png" width="200px" height="auto">
      </div>
      <div class="logo">
        <h4>is now</h4>
      </div>
      <div class="logo">
        <img src="images/C2_Perform_Logo_Colour.jpg" width="200px" height="auto">
      </div>
    </div>
    <!-- Login -->
    <div class="login-box-wrapper">
      <div class="login-box">
        <h3>Log In</h3>
        <?php ef_print_notices();  ?>
        <!-- Login Form -->
        <form role="form" method="post" id="loginForm" class="form lostpass">
          <div class="form-group">
            <label for="inputEmail3">User Name</label>
            <div>
              <div>
                <input type="text" class="form-control validate[required]" placeholder="Username" name="username" value="" size="30" maxlength="225" id="formfocus">
              </div>
            </div>
          </div>
          <div class="form-group">
            <label for="inputPassword3">Password</label>
            <div>
              <div class="input-group">
                <input type="password" name="password" size="30" maxlength="25" class="form-control validate[required]" id="inputPassword3" placeholder="Password" autocomplete="off" />
              </div>
            </div>
          </div>
          <div class="form-group">
            <input type="hidden" name="ef_nonce" value="<?php ef_create_nonce('login_nonce'); ?>" />
            <div>
              <input type="submit" name="login" value="Login" class="button" />
            </div>
          </div>
          <div class="form-group">
            <div><a href="./lostpassword.php">Lost Password?</a></div>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

In this scenario, if an item has a minimum width of 100px, it will remain in line, but those items that cannot meet this requirement will be displayed below.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

navigating up and down html elements using css selectors

Within my code, I have this odd repetitive HTML structure (with no classes) and I'm looking to extract all links along with the accompanying text below each link. While it's simple enough to grab all the links using a basic CSS query selector li ...

jquerycsscss-selectorsdom-traversal

Bootstrap dropdown menu fails to adapt to updated navbar height

I recently made a modification to the navbar size on my website, increasing it from 50px to 63px by tweaking a line in the bootstrap.css file. The exact code snippet I utilized for this adjustment is as follows: .navbar { position: relative; min ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

A bottom border that spans the entire width, complete with padding

I am attempting to create a uniform border for each item on my list. However, due to the nested structure of the list, I have used padding to achieve this. As a result, the appearance is as expected and behaves normally. Check out the JSFiddle Example C ...

htmlcsslayoutborder

Incorporate a button within the input field

Looking to customize my search form with the search button on the right side, similar to this: Below is the code for my current form setup: <form action="search.php" method="post" class="index-search-form"> <input name="search" t ...

htmlforms

The ion-item is refusing to be centered on the page

I'm having trouble centering an ion-item and it seems slightly off-center. The standard methods like text-align: center and adjusting padding in ion-content don't seem to be working for me. Can someone please assist? https://i.stack.imgur.com/QZ ...

htmlcssionic-frameworkionic4

Align the UL in HTML to be on the same line as other spans

When examining this jsFiddle demonstration at the following link: http://jsfiddle.net/jrXwf/1/ The UL tag showcases a star rating, with accompanying text displayed on the line below it. Is there a method to have everything appear on a single line? Appre ...

htmlcss

Encountering a syntax error while trying to upload a file due to an unexpected end of file

When attempting to upload files from a form page, only one file shows up on the database online and in the folder. Here is the code from the form page: <form method="post" action="post_data.php" enctype="multipart/form-data"> <table align=" ...

phphtmlmysqlimage-uploading

Seeking out all (including potentially relative) URLs on a webpage: Possible strategies to consider

For a coding challenge, I am working on a small python tool to download an entire website locally. In order to view the website offline, I need to convert all URLs to relative URLs. This is necessary to ensure that resource files (such as .js and .css) are ...

htmlregexurlweb-scrapingw3c

Visual Delights on the Menu

I am having trouble adding a "Home" picture to my menu. It keeps showing up as a blank square, even though I have tried using both .png and .jpg formats. Here is the code that I am currently using: <div id='cssmenu'> <link rel= ...

htmlcssmenu

Issue with flexbox max-width property not being applied when resizing the page width

I'm struggling to make a flex box with max and min width properties work properly. When I reduce the page size, it ends up showing blank space instead of resizing. How can I troubleshoot this issue? .parent{ border: 1px solid red; width: 50%; ...

htmlcssflexbox

I'm running into some issues when it comes to uploading and launching my website through cPanel on Namecheap

After adjusting the permissions of all HTML and CSS files to 0755 and image files to 0644 in the public_html folder, I am encountering difficulties publishing the site. It seems like I have hit a roadblock and unsure about what steps to take next... ...

htmlcpanelwebsite-hosting

Is there a way to customize the default settings for a blueprint’s menu item?

In my react project, I implemented the Menu using MenuItem from '@blueprintjs/core'. The issue I encountered is that when hovering over a Menu item with children, they open from the right side. Is there a way to modify this behavior and have the ...

htmlcssreactjsstyled-componentsblueprint

Expanding the row beyond the container to match the width of the viewport

Can Bootstrap 5 be used to extend a row outside a container without causing a horizontal scrollbar? After researching the questions related to this topic, it seems that pseudo-elements are commonly used. However, when attempting to use a pseudo-element, a ...

csstwitter-bootstrapbootstrap-5

What are some techniques for concealing a rendered element retrieved using the fetch API?

Currently, I am grappling with a coding challenge that requires me to extract data from https://jsonplaceholder.typicode.com/users using the fetch API function along with bootstrap and jquery. To display the data in a div element, I utilized the array.map( ...

javascripthtmljquerycssangularjs

Editable content <div>: Cursor position begins prior to the placeholder

Having an issue with a contenteditable div where the placeholder text starts behind the cursor instead of at the cursor position. Any suggestions on how to correct this? <div id="input_box" contenteditable="true" autofocus="autofocus" autocomplete="o ...

javascripthtmlcss

Error encountered: iPad3 running on iOS7 has exceeded the localStorage quota, leading to a

Experiencing a puzzling issue that even Google can't seem to solve. I keep getting the QuotaExceededError: DOM Exception 22 on my iPad3 running iOS7.0.4 with Safari 9537.53 (version 7, WebKit 537.51.1). Despite turning off private browsing and trying ...

javascriptioshtmlipadios7

Tips for implementing a CSS class on a select dropdown in multiple web pages

Having multiple dropdowns (select boxes) on my website has led me to desire different alignments for them. For instance, I would like one dropdown to be centered on a specific page while another should appear on the right side of a separate page. Since my ...

css

Is there a way to modify the drop-down button so that it can display the links from the side while keeping the button fixed in place?

https://i.stack.imgur.com/ftj6w.pnghttps://i.stack.imgur.com/VuCDo.png [I am new to creating websites and any assistance is welcomed.] This code snippet is used to display dropdown button links in a list format. My goal is to make the links appear on the ...

htmlcss

Interconnected HTML div values impacting one another

Forgive me for the not-so-great title, as I am unsure of what this particular HTML coding method is called. That's why I am asking this question in the first place. I've written some code and I need to know what type of coding practice this is. ...

htmlcss

Guide to making a toggle button with a Light/Dark mode functionality

I have implemented a light/dark toggle button and now I want to integrate the functionality for switching between light and dark themes on my webpage. The switch should toggle the theme between dark and light modes when clicked. Some basic styling has been ...

javascripthtmlcsstogglebutton