Difficulty with positioning two divs side by side in HTML/CSS?

Hey there, I'm facing some strange CSS issues while trying to achieve a specific layout. I want to have a warning icon on the right side of each input field, which are horizontally centered:

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

Currently, I have managed to center the input fields but no matter what I try with float, transform, or translate on the .warning div, I can't seem to make it work.

.warning {
  display: none;
  margin-top: 10px;
}

.warning p {
  color: #e85748;
  display: none;
  transform: translateX(105%) translateY(232%);
}

.ico-circle {
  width: 40px;
  position: absolute;
  height: 40px;
  border-radius: 50%;
  transform: translateX(720%) translateY(22%);
  background: #e85748;
}

textarea {
  border: 2px solid #a0b3b0;
  resize: vertical;
}

.field-wrap {
  position: relative;
  width: 50%;
  float: center;
  margin: auto;
  margin-bottom: 9px;
}

input,
textarea {
  padding: 15px 15px;
  display: block;
  margin: auto;
  width: 200px;
  /* height: 100%; */
  color: #333333;
  border-color: #333333;
  border-radius: 15px;
  -webkit-transition: border-color .25s ease, box-shadow .25s ease;
  transition: border-color .25s ease, box-shadow .25s ease;
  border-radius: 30px;
  font-size: 16px;
  font-weight: 500;
  border: 4px solid #333333;
  line-height: 1.3;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  text-indent: 13px;
  flex: 0 0 160px;
  width: 200px;
  background-color: transparent;
}

input:focus {
  outline: none !important;
  border: 4px solid #e85748;
  width: 250px;
  -webkit-transition: width .25s ease;
  transition: width .25s ease;
}
<div class="field-wrap">
  <input id="username" type="text" placeholder="Username" required autocomplete="off">
  <div class="warning" />
  <p>Hello world</p>
  <div class="ico-circle">
  </div>
</div>
</div>

<div class="field-wrap">
  <input type="password" placeholder="Password" required autocomplete="off">
  <div class="warning">
    <p>Hello world</p>
    <div class="ico-circle">
    </div>
    </input>
  </div>

  <a href="#" class='button -dark' id="register-btn">Register</a>
  <a href="#" class='bot-link' value=1><i class="icon-chevron-left"></i>Wait, take me back</a>

Can anyone point out what I might be doing wrong here?

htmlcss

Answer №1

If you're looking to style your inputs using flexbox, there are ways to do it while considering wider inputs or adding warning messages alongside them. The following snippet could provide some guidance in the right direction:

.warning {
  display: none;
}

.warning p {
  color: #e85748;
}

.ico-circle {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #e85748;
  order: -1;
}

textarea {
  border: 2px solid #a0b3b0;
  resize: vertical;
}

.field-wrap {
  display: flex;
  position: relative;
  margin-bottom: 9px;
}
// More CSS styles here


<div class="field-wrap">
  <input id="username" type="text" placeholder="Username" required autocomplete="off" />
  <div class="warning">
    <p>Hello world</p>
    <div class="ico-circle">
    </div>
  </div>
</div>

<div class="field-wrap">
  <input type="password" placeholder="Password" required autocomplete="off" />
  <div class="warning">
    <p>Hello world</p>
    <div class="ico-circle">
    </div>
  </div>
</div>

<a href="#" class='button -dark' id="register-btn">Register</a>
<a href="#" class='bot-link' value=1><i class="icon-chevron-left"></i>Wait, take me back</a>

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

ng-bind-html not refreshed following ng-click triggering

Recently, I started learning about the MEAN stack. I have implemented an ng-repeat in my HTML code that displays a list of titles. Each title has an ng-click function attached to it, which is supposed to show more details in an overlay popup. blogApp.co ...

javascripthtmlangularjs

easy method for creating a hyperlink that triggers a "download" pop-up box

Is there a simple and efficient way to have some of my links trigger the 'save file as' prompt (similar to right-clicking) immediately after they are clicked for the first time? ...

phpjavascripthtmlcss

Tips for preventing overlap between two divs when utilizing position: absolute in CSS

In this CodePen link [https://codepen.io/anon/pen/qvQpaY], there is an issue with overlay between the two divs that have a class name of box-container. The black rectangle is being counted as the overall height by box-container because the red rectangle is ...

htmlcss

Enlarging the current division while reducing the size of the others when hovering

Currently, I am working on a school project that involves creating a slideshow on a webpage. However, I have reached a point where I am unsure of how to proceed. Here is the progress I have made so far: body { background-color: #252525; } #wrapper { ...

javascripthtmlcss

Display a custom error message containing a string in an Angular error alert

How can I extract a specific string from an error message? I'm trying to retrieve the phrase "Bad Request" from this particular error message "400 - Bad Request URL: put: Message: Http failure response for : 400 Bad Request Details: "Bad Request ...

javascripthtmlangulartypescript

Using Express, Node, and JQuery to handle form submissions

I am struggling with form submissions while working on a web app using HTML, Express, and Node.js. Despite being new to these technologies, I have created a script that generates a dynamic form based on certain factors: $FormContainer.html(''); ...

jqueryhtmlnode.jsformsexpress

Shifting the pagination outside of the slider in ReactJS and SwiperJS seems to be tricky. Despite trying to adjust the margins and padding, the pagination

I've been struggling with this issue for a while now. I need to move the pagination outside of the slider, but using padding or margin doesn't seem to work. It always remains inside the slider, and if I try to position it outside, it gets hidden. ...

javascriptcssreactjsswiper.js

Utilize a personalized container for the slider's thumb within a React application

Is it possible to replace the slider thumb with a custom container/div in React instead of just styling the thumb or using a background image? I have found a codepen example that demonstrates what I am trying to achieve, but unfortunately I am having trou ...

htmlcssreactjsslider

Obtaining data from a hyperlink's attribute within HTML

I have a question that builds upon my previous inquiry: Finding the text of an href tag from an HTML file My current query involves extracting the number within seekVideo(number). For instance: <a href="#" class="transcriptLink" onclick="seekVideo(200 ...

iphonehtmlxml

Does anyone else have trouble with the Smtp settings and connection on Servage.net? It's driving me crazy, I can't figure it out!

Whenever I attempt to connect to send a servage SMTP, it gives me this error message: SMTP connect() failed. I have tried using the following settings: include('res/mailer/class.phpmailer.php'); $mail->SMTPDebug = 2; include('res/mai ...

javascriptphpcssemailsmtp

Adjust the image's placement and reduce its size as the screen size decreases, without using any media queries

Essentially, I encountered an issue where I had a table row with 2 cells - the left cell containing text and the right one containing an image. As the screen size decreased, I needed the image to move below the text. After some investigation, I delved into ...

htmlcssflexboxdisplay

Issue with PHP retrieving initial value of post data

Hi there, I am facing an issue with my PHP code where the first value of the input field is not being displayed. However, when I check the console.log, it shows correctly. Here is my console.log output: https://i.sstatic.net/eZvg6.png PHP Output: https ...

javascriptphphtmlajax

The issue of TypeScript failing to return HTML Template Element from Constructor typing is causing complications

There is a restriction on using new to create an instance of Template, which extends an HTMLTemplateElement. To work around this limitation, I fetch and return an HTMLTemplateElement by using document.getElementById(id) within the constructor of the Templ ...

htmltypescriptdom

Unable to reinitialize the DataTable using Angular Datatable

I've been working on an Angular application that has a simple CRUD functionality. Initially, I tested my data with a static HTML table and everything was functioning as expected. However, I decided to implement a data table framework called Angular da ...

jqueryhtmlangulartypescriptdatatable

Adjusting SVG size based on the position of the cursor for transforming origin

My goal is to scale an SVG circle using the trackpad (by moving two fingers up and down), with the origin of the transform being the cursor position. Initially, the scaling works as intended, but on subsequent attempts, the circle changes position, which s ...

javascripthtmlcsssvgcss-transforms

Is it possible to align divs so that they touch when they wrap to a new line, creating a grid-like appearance?

My React board component consists of an array of divs that I want to arrange in a grid-like map. The issue is, when the div wraps to a new line, there is significant space between each row. I aim to have the divs close together with no gaps. GameMap state ...

javascriptcssreactjsflexbox

How can I make an HTML button the default option within a form?

Currently, I am working on an asp.net page which contains a mix of asp.net buttons and HTML input[type=button] elements. These HTML buttons are specifically used to initiate AJAX calls. My dilemma arises when the user hits ENTER - instead of defaulting to ...

c#javascriptasp.net.nethtml

Organizing playing cards in a React JS application

As a beginner just starting out with React JS, I'm working on arranging cards in a medium size for my application. I came across a card design that I like and I'm seeking help to achieve something similar. Any assistance would be greatly apprecia ...

cssreactjscard

Determining WebElement Clickability in Java and Selenium: Beyond the Basics of isDisplayed, isEnabled, and findElement

There is a common method to test if a WebElement is clickable: It typically involves something like this: public static boolean isElementClickable(WebDriver driver, String accessor){ return driver.findElements(By.xpath(accessor)).size() > 0 & ...

javahtmlcssseleniumexception

HTML 5 functions properly when loaded directly as a .html file, but encounters issues when hosted on either a Django or Node

I'm having trouble getting a video to play on a webpage. Initially, I followed a standard example I found online by using the following code: <video src='video.mp4' controls></video> When I open the .html file in Safari and dou ...

djangonode.jshtmlvideo