Enter your text and click submit all in one shot

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

Is there a way to achieve this effect (compatible across different browsers) without using the float: left property?

I'm trying to center this form, so using the float attribute isn't working for me. Can anyone offer a solution?

Here is the code I have written:


footer input[type=text] {
  border-top: 1px solid #efefef;
  border-left: 1px solid #efefef;
  border-bottom: 1px solid #efefef;
  border-right: 0;
  width: 230px;
  padding: 0 10px;
  font-size: 16px;
  line-height: 18px;
  height: 35px;
  display: inline-block;
  float: left;
  margin: 0 auto;
}
footer input[type=submit] {
  border: 1px solid #df242b;
  background: #df242b url('../../../gfx/submit.jpg') no-repeat center center;
  color: #fff;
  width: 38px;
  height: 37px;
  font-size: 18px;
  line-height: 18px;
  cursor: pointer;
  display: inline-block;
  float: left;
  margin: 0 auto;
}
htmlcssinput

Answer №1

If you're aiming for cross-browser compatibility and prefer not to use float:left, one alternative is to utilize inline-block along with vertical-align:top

To center the content, you can add margin:0 auto to the footer element while specifying a certain width

I've made some adjustments to your code.

*,
*::before,
*::after {
  box-sizing: border-box
}
body {
  margin: 0;
  /* demo */
  background: lightgreen
}
footer {
  /*fix inlin block gap */
  font-size: 0;
  margin: 0 auto;
  width: 265px; /* 230px + 35px */
}
footer input {
  line-height: 18px;
  height: 35px;
  display: inline-block;
  vertical-align: top;
}
footer input[type=text] {
  border: solid #efefef;
  border-width: 1px 0 1px 1px;
  width: 230px;
  padding: 0 10px;
  font-size: 16px;
}
footer input[type=submit] {
  border: 1px solid #df242b;
  background: #df242b url('//dummyimage.com/35x35') no-repeat center center;
  color: #fff;
  width: 35px;
  font-size: 18px;
  cursor: pointer
}
<footer>
  <input type="text">
  <input type="submit">
</footer>

Answer №2

The absence of float:left in your code seems to be working well. The issue of line breaks may only occur on small screens. If so, you can easily resolve it by adding some CSS styling to your footer as shown in this example.

footer {
   white-space: nowrap;
   text-align: center;
}

footer input[type=text] {
      border: 1px solid #efefef;
      border-right: 0;
      width: 230px;
      padding: 0 10px;
      font-size: 16px;
      line-height: 18px;
      height: 35px;
      display: inline-block;
      margin: 0 auto;
    }
    footer input[type=submit] {
      border: 1px solid #df242b;
      background: #df242b url('../../../gfx/submit.jpg') no-repeat center center;
      color: #fff;
      width: 38px;
      height: 37px;
      font-size: 18px;
      line-height: 18px;
      cursor: pointer;
      display: inline-block;
      margin: 0 auto;
    }
<footer>
  <input type="text" />
  <input type="submit" />
</footer>

Answer №3

Here is how you can use this code snippet:

<style>
body{margin:0;}
footer{
width:100%;
background:#ccc;
height:250px;
}
.form{
width:292px;
margin:0 auto;
}
footer input[type=text] {
  border-top: 1px solid #efefef;
  border-left: 1px solid #efefef;
  border-bottom: 1px solid #efefef;
  border-right: 0;
  width: 230px;
  padding: 0 10px;
  font-size: 16px;
  line-height: 18px;
  height: 37px;
  display: inline-block;
  float: left;
  margin: 0 auto;
}
footer input[type=submit] {
  border: 1px solid #df242b;
  background: #df242b;
  color: #fff;
  width: 38px;
  height: 37px;
  font-size: 18px;
  line-height: 18px;
  cursor: pointer;
  display: inline-block;
  float: left;
  margin: 0 auto;
}
</style>

<footer>
  <div class="form">
  <input type="text">
  <input type="submit" value=">">
  </div>
</footer>

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

apply white-space:nowrap to a single column in a datatable

I am facing a challenge with my bootstrap datatable where one row (Product) contains a large amount of data and currently expands downwards, taking up a lot of space. https://i.sstatic.net/BryzM.png My goal is to make the Product column expand to the rig ...

javascripthtmlcssbootstrap-4datatable

Issue with Vue v-for not updating data model variable

I am attempting to render a page with dynamic properties using the following code: <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="root"> <div v-for="current in 2&quo ...

javascripthtmlvue.js

Is there any way to modify the design and placement of the JavaScript Alert Message window?

I am looking to customize the design and position of the default JavaScript Alert Message window. If you know of any methods to achieve this, I would greatly appreciate your assistance. ...

javascripthtmlcss

What could be the reason my div is not displaying correctly?

I am currently developing a game using HTML, CSS, and jQuery. The game will involve falling blocks that the player needs to avoid. However, I am facing an issue with my jQuery implementation. When selecting a theme (only the dark theme is currently functi ...

javascriptjqueryhtmlcss

Eliminate any horizontal gaps in <ul> by setting list-style-type to none

Check out this informative resource on the various list-style-type values at http://www.w3schools.com/cssref/playit.asp?filename=playcss_ol_list-style-type&preval=none. While the value none still leaves some horizontal space for an empty list symbol, ...

htmlcss

How come user CSS in Stylish takes precedence over the author's CSS?

Here's a sample page: <!DOCTYPE html> <html> <head> <style type="text/css"> body { background: black; } </style> </head> <body> </bod ...

css

What steps can I take to improve the smoothness of my Slick slider and ensure it functions correctly across all screen widths

I have been experimenting with a carousel slider using Slick Carousel (). My goal is to make it loop infinitely and function smoothly at different browser widths without the cards stacking, but it's not quite working as intended yet. Currently, there ...

javascriptjquerycsssliderslick.js

Is there a way to eliminate the horizontal line in my Table design?

Is there a way to eliminate the horizontal line from the table? css, html <table border="1" style="width:100%; border-collapse: collapse"> <tr> <th>Prepared By:</th> <th>Released ...

htmlcss

Php Error 404 occurs upon attempting to redirect from the main landing page

I have been encountering an issue while trying to add links to different pages of my website. Whenever I click on the link, it displays a "404 Page Not Found" error message. Objective: My main goal is to create links from my home page, index.php, to other ...

phpindexinghyperlinkhtml

Improper Placement of CSS in Google Chrome

I'm facing an issue with my login form that displays perfectly fine in all browsers except Google Chrome. In Chrome, it tends to get distorted more often than not. CSS * { margin: 0; padding: 0; width: auto; } body { background: #E8 ...

cssgoogle-chrome

The HTTP.GET method seems to be malfunctioning

I'm having some trouble loading an image from a HTTP.GET request into my application. The picture just won't seem to display correctly. Any suggestions on what might be causing this issue? Below is the code I am using: HTML: <ion-view view- ...

javascripthtmljsonangularjsionic-framework

The code functions perfectly in the Adobe Dreamweaver Preview, but unfortunately, it is not compatible with Chrome

In the process of creating a website using Adobe Dreamweaver over the past few days, I encountered an issue with JavaScript that should activate upon scrolling. Interestingly, the script works perfectly fine when accessed through this link (), but fails t ...

javascripthtmladobedreamweaver

Steps to create two jQuery dropdown filters for multiple identifiers:

Is it possible to create two dropdown menus that can be used to filter a gallery of images? I am currently facing an issue where the filtering functionality is not working after adding a name attribute to the image IDs. When I select an option from the s ...

javascripthtmljquery

What is the method to align my text to the top of the page?

I'm working on a 4-column page and trying to insert content. Everything is functioning properly except for getting my first div to align to the top in inline-blocks. As a newbie, I feel like I must be overlooking something simple. (I've tried usi ...

css

A division element continually broadens to its maximum width, regardless of whether there is enough space to accommodate additional elements on the same

Whenever the browser window is resized while displaying the code provided below, I am facing an issue where the div expands to the max-width even when I do not want it to do so. When everything fits on a single line, the layout appears fine. However, upon ...

htmlcss

IE11 experiencing issues with font loading

I need help troubleshooting why the fonts are not loading properly in the body section of my articles, specifically when viewed in Internet Explorer. Take a look at an example article here: I am fetching from this CSS file: , and I have included the nece ...

htmlcssfontscross-browserinternet-explorer-11

css: text not enclosed by a span tag

I created an HTML-CSS demo with two simple span tags. I added some content to each span, and applied the same CSS code to both. Surprisingly, the content of the right span goes beyond the border, while the content of the left span stays within the border. ...

htmlcss

Creating a layout with a CSS div that has a height of 100

I've been utilizing this code to design the layout of my website. However, I've encountered an issue where the "left" and "right" divs are not displaying on the screen (they only show up when I set their height in pixels, not in percentages). Any ...

htmlcsslayout

Grid item overlay

Currently, I am facing an issue with React where I am attempting to place an overlay on top of each grid item in a grid. Despite trying multiple approaches, the overlay appears beneath each grid item instead of over it. Even setting the position: absolute ...

cssreactjscss-grid

Creating an overlay with CSS hover on a separate element and the ::before pseudo class

Issue: I am struggling to display the overlay when hovering over the circle element, rather than just the image itself. I have attempted to achieve this using CSS, but can't seem to make it work as intended. Any guidance and examples using JavaScript ...

javascriptjqueryhtmlcss