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

Looking to style a <p> element with CSS?

In the div class index, there are two additional divs without any class or id names, along with two <p> tags. My goal is to style these two <p> tags. <div class="doubt"> <div> <p>Hello world</p> <div> ...

htmlcssstyles

What is the reason behind a flex-item collapsing when it has a display property set to flex, unless it is assigned an explicit width of 100%

.container { display: flex; } .component { display: flex; //width: 100%; height: 10px; ...

htmlcss

Looking for a solution to a problem with your vertical CSS/jQuery dropdown menu

My web app features a vertical CSS menu that is working correctly except for one minor issue. When I mouse out on all elements with the class a.menutoggle, the last dropdown menu remains open. I am struggling to find a solution to hide it. Can someone plea ...

javascriptjquerycssdrop-down-menu

Mastering the use of SVG icons in Angular 4+: A comprehensive guide

I have an icon.svg file with a collection of icons that I would like to use in my app, similar to how we display material icons. Does anyone have any ideas on how to include the file in the app and use these icons? I've tried looking for solutions a ...

cssangularsvg

Attempting to modify the background hue of a grid component when a click event is triggered

I am struggling with the syntax to change the color of an element in my grid when clicked. I have attempted different variations without success. Being new to JavaScript, I would appreciate some gentle guidance if the solution is obvious. JS const gri ...

javascripthtmlcss

Is there a way to use AJAX for transferring a value?

I am looking to transmit a value to a php-script (servo.php) that will then write the received data in a file (/dev/servoblaster). The script section of my HTML file (index.html): <script> function tiltt() { var tilt = document.getElementById("tilt ...

javascriptphpjqueryhtmlajax

The navigation bar vanishes as soon as I click the Modal button

I am experiencing an issue where the Navbar disappears when I open a modal while using Bootstrap. Navbar before opening Modal https://i.stack.imgur.com/Oo9qb.png Navbar after opening Modal https://i.stack.imgur.com/dlK1V.png <script src="https:// ...

htmlcssnavbarbootstrap-5bootstrap5-modal

Pictures may become distorted when their width is smaller than the container

In my current project, I am facing an issue with maintaining the aspect ratios of images of different sizes. Most of them are looking good except for those whose width is smaller than the container's width of 285px. Even though some blurriness is acce ...

htmlcss

Content in Slider Exceeding Container Bounds

After successfully creating a slider using jQuery with the help of some Stack Overflow users, everything was working perfectly. However, when attempting to change the layout of the slider, it somehow broke and now all slides are being pushed out of the con ...

jqueryhtmlcss

Switch up the styling of a component by updating its properties with a switch statement

Although there is a similar question, my query has a unique requirement. I have defined the common styles for my button and implemented a function using a switch statement with different properties for various buttons across different pages. However, for ...

cssreactjstypescriptnext.jsstyled-components

Displaying or concealing HTML elements using AngularJS while a modal is open

Looking for a way to display a loading spinner icon on my page when a user triggers a button that opens a modal, and then have the spinner disappear once the modal is open and its content has loaded. Currently, I've managed to make the spinner show up ...

javascripthtmlangularjs

How can we prevent an ajax call from being made when the user input is empty?

Currently, I am utilizing the keyup event for an Ajax call on an input field along with the f:validaterequired tag. Each time the Ajax event (keyup) triggers, f:validaterequired is being validated. However, I do not want to validate when the value is null. ...

htmlajaxjsfjsf-2.2requiredfieldvalidator

Tips for maintaining the alignment of four buttons in a single row as the size of the screen changes

I'm creating a simple browser game as part of my web development learning process. I have a set of divs that represent a warrior, and at the head of the "div table" I have a group of 4 buttons arranged horizontally. However, when the screen size is re ...

htmlcss

Mobile Safari on iOS devices is known for its capability to overlay HTML5 <video> on top of everything

Although a similar question was asked 6 years ago without any answers, I am currently facing the same issue. Problem: The <video> tag in my Angular/Ionic application overlaps my image and two buttons in iOS Mobile Safari - no matter what I try! It ...

htmlcssiosangularmobile-safari

Learn how to utilize AngularJS to create dropdown menus within data cells of an HTML table

I am working on populating rows in an HTML table based on the response I get from AngularJS. My goal is to have one of the table data cells formatted as a dropdown menu. Specific Requirements: The dropdown menu should include three values (A, B, and C). ...

htmlangularjs

Issues with table nesting functionality

I'm attempting to organize tables in a nested manner, instead of placing a table within each cell. My engineers have advised against simply styling the table to appear nested, and suggested that it would be more effective to wrap each header around th ...

htmlcsshtml-tablenested

I am looking to create a feature for my table that adjusts its color scheme based on whether the number is odd or even

My current code is designed to change the background color of td elements for odd and even rows. However, when a new high score is entered, a new td is added but it does not get colored automatically as intended. I am facing an issue where the code is not ...

htmlcss

Having trouble getting your jQuery/JavaScript function to detect the property "-webkit-clip-path"?

Exploring the clip-path feature of CSS has been a fun experiment for me. I have successfully implemented it in my project and am now trying to incorporate JavaScript to dynamically change the start/stop positions of the clip-path. Below is a snippet of my ...

javascriptjqueryhtmlcss

How can I ensure that buttons in a row utilize the full 100% of available space?

I have a row of buttons in my HTML code like this: HTML : <div class="buttons"> <div><input type="button"/></div> <div><input type="button"/></div> <div><input type="button"/></div& ...

htmlcss

Transfer information from session to vue-component

Within my routes file, I obtain the current user from the session and then render the profile HTML: app.get('/profile', isLoggedIn, function(req, res) { res.render('profile.html', { user : req.user // extract user ...

htmlnode.jsexpressvue.js