Achieve inline or floating displays seamlessly without the need for media queries to prevent breaking

Question

Achieve inline or floating displays seamlessly without the need for media queries to prevent breaking

Whenever I attempt to apply float left or display inline, it causes issues. The form currently has a max-width of 1000px. I was hoping that the first and last names would automatically align side by side if there is enough space. Perhaps setting a min-width for the First and Last name input fields?

It's worth noting that I created this to practice writing CSS DRY code. Changing the font size affects the overall project size, which is crucial to me. Additionally, I prefer not to use media queries.

I understand that I may need to reconsider my approach, and I am open to suggestions. I'm not necessarily seeking a specific code solution.

form {
    text-align: center;
}

form ul, form li, form input, form label {
    box-sizing: border-box;
    margin: 0; padding: 0;
}
form ul {
    font-size: 100%;
    border: 3px solid #000;
    border-radius: .3em;
    max-width: 1000px;
    margin: 50px auto;
    list-style: none;
    overflow: hidden;
}

form li {
    position: relative;
    border-bottom: inherit;
    border-bottom: 3px solid;
}

form label {
    position: absolute;
    border-bottom: 1px dotted;
    border-bottom-color: inherit;
    width: 100%;
    padding: .3em .3em;
    padding-bottom: .1em;;
    top: 0; left: 0;
    font-size: .6em;
    text-transform: uppercase;
}

form input, form input:focus {
    text-transform: capitalize;
    text-align: inherit;
    background: transparent;
    border: none;
    width: 100%;
    font-size: 2em;
    padding: .7em .1em;
    padding-bottom: .2em;;
}

form input:focus {
    background-color: rgba(255, 255, 0, .2);
}

form input[type="submit"] {
    text-transform: uppercase;
    padding-bottom: 1.8em;
    font-size: .6em;
    height: 1.5em;
    background-color: #ddd;
    
}

<form action="">
    <ul>
        <li>
            <input id="first-name" type="text" autofocus>
            <label for="first-name">First Name</label>
        </li>
        <li>
            <input id="last-name" type="text">
            <label for="last-name">Last Name</label>
        </li>
        <li>
            <input id="username" type="text">
            <label for="username">Username</label>
        </li>
        <li>
            <input type="submit" name="submit">
        </li>
    </ul>
    
</form>

html css inline display

Answer 1

Answer №1

Flexbox is a modern solution for addressing this issue. It's important to remember to include the necessary prefixes for certain browsers. In cases where IE9 support is required, refer to the float solution provided below:

HTML

 <form action="">
    <ul>
        <li class="split">
            <input id="first-name" type="text" autofocus>
            <label for="first-name">First Name</label>
        </li>
        <li class="split">
            <input id="last-name" type="text">
            <label for="last-name">Last Name</label>
        </li>
        <li class="fill">
            <input id="username" type="text">
            <label for="username">Username</label>
        </li>
        <input type="submit" name="submit">
    </ul>

</form>

CSS

form {
    text-align: center;
}

form ul, form li, form input, form label {
    box-sizing: border-box;
    margin: 0; padding: 0;
}
...

@media only screen and (min-width: 768px) {
  li {
    clear: both;
  }

  li.split {
    width: 50%;
    float: left;
    clear: none;
  }
}

https://jsfiddle.net/qefo9eLr/

Answer 2

Flexbox is a modern solution for addressing this issue. It's important to remember to include the necessary prefixes for certain browsers. In cases where IE9 support is required, refer to the float solution provided below:

HTML

 <form action="">
    <ul>
        <li class="split">
            <input id="first-name" type="text" autofocus>
            <label for="first-name">First Name</label>
        </li>
        <li class="split">
            <input id="last-name" type="text">
            <label for="last-name">Last Name</label>
        </li>
        <li class="fill">
            <input id="username" type="text">
            <label for="username">Username</label>
        </li>
        <input type="submit" name="submit">
    </ul>

</form>

CSS

form {
    text-align: center;
}

form ul, form li, form input, form label {
    box-sizing: border-box;
    margin: 0; padding: 0;
}
...

@media only screen and (min-width: 768px) {
  li {
    clear: both;
  }

  li.split {
    width: 50%;
    float: left;
    clear: none;
  }
}

https://jsfiddle.net/qefo9eLr/

Answer 3

Answer №2

.first-name {
  justify-content: center;
  align-items: flex-start;
}

Answer 4

.first-name {
  justify-content: center;
  align-items: flex-start;
}

Answer 5

Answer №3

Consider utilizing the bootstrap grid system for organizing your inputs into columns.

By using this method, you can easily create a layout with multiple columns.

Learn more about bootstrap grid system

Check out this example on JSFiddle: Sample of grid system usage

<div class='row'>
<div class="col-xs-2">Hi</div>
<div class="col-xs-2">Hi</div>

In your scenario, setting col-xs-6 will give you two full-width columns side by side.

Answer 6

Consider utilizing the bootstrap grid system for organizing your inputs into columns.

By using this method, you can easily create a layout with multiple columns.

Learn more about bootstrap grid system

Check out this example on JSFiddle: Sample of grid system usage

<div class='row'>
<div class="col-xs-2">Hi</div>
<div class="col-xs-2">Hi</div>

In your scenario, setting col-xs-6 will give you two full-width columns side by side.

Answer 7

Answer №4

Uncertain if this aligns with what you have in mind, but it appears to meet your requirements.

form {
  text-align: center;
}
form ul,
form li,
form input,
form label {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
form ul {
  font-size: 100%;
  border: 3px solid #000;
  border-radius: .3em;
  max-width: 1000px;
  margin: 50px auto;
  list-style: none;
  overflow: hidden;
}
form li {
  position: relative;
  border-bottom: inherit;
  border-bottom: 3px solid;
}
form label {
  position: absolute;
  border-bottom: 1px dotted;
  border-bottom-color: inherit;
  width: 100%;
  padding: .3em .3em;
  padding-bottom: .1em;
  ;
  top: 0;
  left: 0;
  font-size: .6em;
  text-transform: uppercase;
}
form input,
form input:focus {
  text-transform: capitalize;
}
form #fl-name {
  display: inline-block;
}
form .floatMe {
  float: left;
}
form .clearMe {
  clear: right;
}

<form action="">
  <ul>
    <div class="fl-name">
      <li class="floatMe">
        <input id="first-name" type="text" autofocus>
        <label for="first-name">First Name</label>
      </li>
      <li class="floatMe clearMe">
        <input id="last-name" type="text">
        <label for="last-name">Last Name</label>
      </li>
    </div>
    <li>
      <input id="username" type="text">
      <label for="username">Username</label>
    </li>
    <input type="submit" name="submit">
  </ul>

</form>

Answer 8

Uncertain if this aligns with what you have in mind, but it appears to meet your requirements.

form {
  text-align: center;
}
form ul,
form li,
form input,
form label {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
form ul {
  font-size: 100%;
  border: 3px solid #000;
  border-radius: .3em;
  max-width: 1000px;
  margin: 50px auto;
  list-style: none;
  overflow: hidden;
}
form li {
  position: relative;
  border-bottom: inherit;
  border-bottom: 3px solid;
}
form label {
  position: absolute;
  border-bottom: 1px dotted;
  border-bottom-color: inherit;
  width: 100%;
  padding: .3em .3em;
  padding-bottom: .1em;
  ;
  top: 0;
  left: 0;
  font-size: .6em;
  text-transform: uppercase;
}
form input,
form input:focus {
  text-transform: capitalize;
}
form #fl-name {
  display: inline-block;
}
form .floatMe {
  float: left;
}
form .clearMe {
  clear: right;
}

<form action="">
  <ul>
    <div class="fl-name">
      <li class="floatMe">
        <input id="first-name" type="text" autofocus>
        <label for="first-name">First Name</label>
      </li>
      <li class="floatMe clearMe">
        <input id="last-name" type="text">
        <label for="last-name">Last Name</label>
      </li>
    </div>
    <li>
      <input id="username" type="text">
      <label for="username">Username</label>
    </li>
    <input type="submit" name="submit">
  </ul>

</form>

Answer 9

Answer №5

Check out this new approach utilizing the reliable float method: https://jsfiddle.net/mvpu6s5o/4/

The key difference lies in the following code:

form li {
    width: 33.33%;
    float: left;
}

form li:nth-child(3) {
  float: right;
}

form li:last-child {
  width: 100%;
  clear: both;
}

I opted for using a percentage-based width to ensure responsiveness across various screen sizes. The li:nth-child(3) rule floats the final input element to the right, eliminating any small gap caused by the 33.33% width. Finally, form li:last-child was added to clear both floats and apply them to the last input item within the list.

Answer 10

Check out this new approach utilizing the reliable float method: https://jsfiddle.net/mvpu6s5o/4/

The key difference lies in the following code:

form li {
    width: 33.33%;
    float: left;
}

form li:nth-child(3) {
  float: right;
}

form li:last-child {
  width: 100%;
  clear: both;
}

I opted for using a percentage-based width to ensure responsiveness across various screen sizes. The li:nth-child(3) rule floats the final input element to the right, eliminating any small gap caused by the 33.33% width. Finally, form li:last-child was added to clear both floats and apply them to the last input item within the list.

Answer 11

Answer №6

By modifying the semantics and incorporating flexbox, I was able to achieve the following outcome:

*, *:before, *:after {
  box-sizing: inherit;
  margin: 0;
  padding: 0;
}
body {
  align-items: center;
  /background-color: #EB6361;
  display: flex;
  height: 100vh;
  justify-content: center;
}
form {
  box-shadow: 0 0 0 8px rgba(204,204,204,.85);
  border-radius: 5px;
  width: 500px;
}
form header {
  background-color: #1ABC9C;
}
form header p {
  color: #FFF;
  font-family: 'ubuntu';
  font-size: 15px;
  padding: 15px 10px;
  text-align: center;
}
form .body {
  background-color: #EEE;
  padding: 15px 20px;
}
form .body .block {
  border: 2px solid #333;
  border-radius: 4px;
  overflow: hidden;
}
form .body .block:not(first-of-type) {
  margin-top: 10px;
}
form .body .block:first-of-type > .group {
  width: 98%;
}
form .body .block:first-of-type {
  display: flex;
}
form .body .block .group {
  display: flex;
  flex-flow: column-reverse nowrap;
  overflow: hidden;
}
form .body .block:first-of-type .group:first-of-type {
  border-right: 2px solid #333;
}
form input {
  background-color: transparent;
  border: none;
  color: #555;
  font-size: 22pt;
  padding: 6px 10px;
  text-align: center;
}
form input:focus, form input:focus + label {
  background-color: #F7F8E0;
}
form label {
  border-bottom: 1px dotted #bbb;
  color: #555;
  font-family: 'ubuntu';
  font-size: 11px;
  padding: 2px;
  text-align: center;
  text-transform: uppercase;
}
form footer {
  overflow: hidden;
}
form footer button {
  background-color: #F39C12;
  color: #FFF;
  cursor: pointer;
  width: 100%;
  border: none;
  padding: 4px;
}

<form action="">
  <header>
    <p>Submit Query Form</p>
  </header>
  <section class="body">
    <div class="block">
      <div class="group">
        <input type="text" />
        <label for="">First Name</label>
      </div>
      <div class="group">
        <input type="text" />
        <label for="">Last Name</label>
      </div>
    </div>
    <div class="block">
      <div class="group">
        <input type="text" />
        <label for="">Username</label>
      </div>
    </div>
  </section>
  <footer>
    <button>Submit query</button>
  </footer>
</form>

Answer 12

By modifying the semantics and incorporating flexbox, I was able to achieve the following outcome:

*, *:before, *:after {
  box-sizing: inherit;
  margin: 0;
  padding: 0;
}
body {
  align-items: center;
  /background-color: #EB6361;
  display: flex;
  height: 100vh;
  justify-content: center;
}
form {
  box-shadow: 0 0 0 8px rgba(204,204,204,.85);
  border-radius: 5px;
  width: 500px;
}
form header {
  background-color: #1ABC9C;
}
form header p {
  color: #FFF;
  font-family: 'ubuntu';
  font-size: 15px;
  padding: 15px 10px;
  text-align: center;
}
form .body {
  background-color: #EEE;
  padding: 15px 20px;
}
form .body .block {
  border: 2px solid #333;
  border-radius: 4px;
  overflow: hidden;
}
form .body .block:not(first-of-type) {
  margin-top: 10px;
}
form .body .block:first-of-type > .group {
  width: 98%;
}
form .body .block:first-of-type {
  display: flex;
}
form .body .block .group {
  display: flex;
  flex-flow: column-reverse nowrap;
  overflow: hidden;
}
form .body .block:first-of-type .group:first-of-type {
  border-right: 2px solid #333;
}
form input {
  background-color: transparent;
  border: none;
  color: #555;
  font-size: 22pt;
  padding: 6px 10px;
  text-align: center;
}
form input:focus, form input:focus + label {
  background-color: #F7F8E0;
}
form label {
  border-bottom: 1px dotted #bbb;
  color: #555;
  font-family: 'ubuntu';
  font-size: 11px;
  padding: 2px;
  text-align: center;
  text-transform: uppercase;
}
form footer {
  overflow: hidden;
}
form footer button {
  background-color: #F39C12;
  color: #FFF;
  cursor: pointer;
  width: 100%;
  border: none;
  padding: 4px;
}

<form action="">
  <header>
    <p>Submit Query Form</p>
  </header>
  <section class="body">
    <div class="block">
      <div class="group">
        <input type="text" />
        <label for="">First Name</label>
      </div>
      <div class="group">
        <input type="text" />
        <label for="">Last Name</label>
      </div>
    </div>
    <div class="block">
      <div class="group">
        <input type="text" />
        <label for="">Username</label>
      </div>
    </div>
  </section>
  <footer>
    <button>Submit query</button>
  </footer>
</form>

Answer 13

Answer №7

If you're looking for a straightforward way to layout elements, consider using Flexbox. Start by setting the parent container to have a display type of 'flex'. Make sure to include flex-wrap: wrap as well, allowing the children to wrap if necessary. Each child element becomes a flex item, and to ensure they are evenly distributed, set both to flex-grow: 1. Define the width of each child with flex-basis: 300px, acting as a minimum width and triggering wrapping when needed.

body {
    padding: 50px;
}
.container {
    background-color: #e9e9e9;
    display: flex;
    flex-wrap: wrap;
}

.container input {
    background-color: #e9e9e9;
}
.box1 {
    flex-grow: 1;
    flex-basis: 300px
}

.box2 {
    flex-grow: 1;
    flex-basis: 300px;
}

<head>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    
    
    <div class="container">

        <input type="text" class="box1">
        <input type="text" class="box2">

    </div>
    
    
</body>

Answer 14

If you're looking for a straightforward way to layout elements, consider using Flexbox. Start by setting the parent container to have a display type of 'flex'. Make sure to include flex-wrap: wrap as well, allowing the children to wrap if necessary. Each child element becomes a flex item, and to ensure they are evenly distributed, set both to flex-grow: 1. Define the width of each child with flex-basis: 300px, acting as a minimum width and triggering wrapping when needed.

body {
    padding: 50px;
}
.container {
    background-color: #e9e9e9;
    display: flex;
    flex-wrap: wrap;
}

.container input {
    background-color: #e9e9e9;
}
.box1 {
    flex-grow: 1;
    flex-basis: 300px
}

.box2 {
    flex-grow: 1;
    flex-basis: 300px;
}

<head>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    
    
    <div class="container">

        <input type="text" class="box1">
        <input type="text" class="box2">

    </div>
    
    
</body>

Achieve inline or floating displays seamlessly without the need for media queries to prevent breaking

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Answer №7

Similar questions

What could be the reason for the gap that shows up when transitioning from one image to the

Can child elements be centered using their pseudo-elements using CSS alone?

What is the best way to handle an AJAX request within an if-else statement?

Determine the selected option in the dropdown menu upon loading the page and when clicked

Discovering routes in Angular2

Issue with CSS: Hover effect causing unexpected additional white space

What is the best way to have a sound play when the page is loaded?

The JQuery(document).ready function does not seem to be executing on the webpage, but it works as expected when placed in a

I am looking to eliminate the right padding from a group of div elements

Can you navigate to HTML files using Vue router?

I recently encountered an issue where the Google Chrome Element Inspector (Developer Tools) unexpectedly removed an HTML element from

Ways to show dynamic text according to slider adjustments

"Enhancing the speed of the JavaScript translate function when triggered by a scroll

Managing the vertical dimensions of a div

Using Python and Selenium to upload files without utilizing an 'input' HTML element

Responses were buried beneath the inquiries on the frequently asked questions page

Node JS server fails to load CSS even with the use of express.static

Obtaining Text within <span>Tag</span> with Selenium in C#

the best way to transfer a JavaScript value to a PHP page

Scaling of SVG elements with a fixed canvas size across different end-user resolutions