Looking for assistance with CSS styling

Question

Looking for assistance with CSS styling

I've been attempting to align two custom fields on a checkout form next to each other, but I'm running into an issue where the fields below are overlapping. I've experimented with using clear: both/left/right; to address this problem, but it hasn't provided the desired solution. Additionally, I've tried incorporating

display: block/inline/inline-block;

to prompt the element beneath them to move to a new line.

Do you have any recommendations for resolving this issue?

.pract_county, .pract_postcode {
float: left;
margin-right: 47px;
}

https://i.stack.imgur.com/5Kfwe.png

css

Answer 1

Answer №1

To create a line break after the second input field for Postal Code, one option is to simply insert a line break tag. You can find more information at this link: https://www.w3schools.com/tags/tag_br.asp

Alternatively, if you prefer using CSS only, you can adjust the form headers to 100% width so they automatically move to the next line.

Answer 2

To create a line break after the second input field for Postal Code, one option is to simply insert a line break tag. You can find more information at this link: https://www.w3schools.com/tags/tag_br.asp

Alternatively, if you prefer using CSS only, you can adjust the form headers to 100% width so they automatically move to the next line.

Answer 3

Answer №2

input{
    height:20px;
    float:right;
    display:block;
    padding:2px;
    width:90%;
}


<p>Name: <input type="text" placeholder="Enter your name">  </p>
<p>Topic:<input type="text" placeholder="Enter the subject">  </p>
<p>Email Address:<input type="email" placeholder="Enter your email address">  </p>

Answer 4

input{
    height:20px;
    float:right;
    display:block;
    padding:2px;
    width:90%;
}


<p>Name: <input type="text" placeholder="Enter your name">  </p>
<p>Topic:<input type="text" placeholder="Enter the subject">  </p>
<p>Email Address:<input type="email" placeholder="Enter your email address">  </p>

Looking for assistance with CSS styling

Answer №1

Answer №2

Similar questions

Utilizing Selenium to extract data from a table and displaying the results

Tips on applying the "activate" class to a Bootstrap navbar in Angular 2 when implementing page anchor navigation

Adding a CSS class to an HTML element using JQuery

Is there a glitch in the Selenium Java CSS Selector functionality?

The background color and border are not showing up in the <div> element

Apply a Fade In transition to the ul li elements following a JavaScript toggle

Alignment of UI Divs with CSS Bootstrap and HTML

How does JQuery handle color parsing in text?

Tips for detecting the height of a row with 2 columns in CSS

Hide/Show overflow causing a disruption in my perspective

Tips for adjusting the vertical position of an image within a bootstrap column by a small amount

Tips for achieving a precise amount of boxes in each row

Tips for creating horizontal scrolling in the div element

Issue with ASP.NET ConfirmButtonExtender Missing Background in Internet Explorer

Changing the Style of a CSS Module Using JavaScript

What could be causing the .hover function to malfunction and how can I make it so that the .hover function only applies within the corner radius area?

Ways to display one element while concealing it when another is clicked

Alignment troubles persist with text formatting

Is there a way to position an X item on the first row and another X item on the following row using flexbox?

Rearrange the position of one div to be placed next to another div and assign the float property