Unusual CSS margin dilemma

I am currently working on customizing a form layout provided by a client that has the following structure:

<div class="formRow">
    <div class="fieldName">
        Email
    </div>

    <div class="fieldInput">
        <input .../>
    </div>
</div>

The width of the form is set to 500px, however, the fieldName div and fieldInput div are not displaying side by side as intended but rather stacked on top of each other. This issue seems to be caused by the right margin of the fieldName div being computed at 340px, which occupies the full width of the form in Chrome and Firefox.

Despite my attempts to override this behavior by setting a margin-right of 10px or adjusting the width of the div, I have been unsuccessful. Modifying the width of the div only affects its inner space, leaving the strange right-margin unchanged.

What CSS challenge am I facing here?

For reference, below is the current CSS styling for the elements:

.formRow{
    padding: 3px 0 3px 0;
    position: relative;
    height: auto;
    width: 100%;
}

.fieldName{
    font-size: 12px;
    margin-left: 10px;
    margin-right: 10px;
    width: 100px;

}

.fieldInput{
    width: 200px;
}
htmlcssforms

Answer №1

It's important to consider the use of DIVs in your code. Instead of using multiple DIV tags, you can simplify your code like this:

<div class="formRow">
    <label class="fieldName">Email</label>
    <input class="fieldInput" .../>
</div>

Alternatively, a more efficient approach would be:

<style type="text/css">
    UL, UL LI
    {
        margin: 0px;
        padding: 0px;
     }

    UL LI
    {
        list-style: none;
    }

.fieldName{
        font-size: 12px;
        margin-left: 10px;
        margin-right: 10px;
        width: 100px;

}

.fieldInput{
        width: 200px;
}
</style>

<ul>
    <li><label class="fieldName">Email</label>
        <input class="fieldInput" .../></li>
     ...
</ul>

Using DIV tags for both sections can confuse the semantic meaning of the tag. Instead, focus on styling the elements individually without overusing DIV tags.

Answer №2

experiment with including

.textInput {visibility: hidden}

or

.textOutput {display: none}

or even both of them together

Answer №3

To place elements side by side, you can use the display: inline; property for each element. By default, block elements are rendered on separate lines by browsers.

.fieldName{
    font-size: 12px;
    margin-left: 10px;
    margin-right: 10px;
    width: 100px;
    display: inline;    
}

.fieldInput{
    width: 200px;
    display: inline;
}

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

The database is not receiving the saved data

Hello everyone, I'm currently learning the Yii2 framework and running into some database issues. I'm working on a project where I can't seem to store my data in the database upon submission. The code snippet is provided below. Any suggestion ...

phpmysqlformsyii2-basic-app

Leveraging jQuery for Adding Text to a Span While Hovering and Animating it to Slide from Left to

<p class="site-description">Eating cookies is <span class="description-addition"></span>a delight</p> <script> var phrases = new Array('a sweet experience', 'so delicious', 'the best treat', ...

javascriptjqueryhtml

`Acquiring the values of multiple radio buttons on a page in an effective manner`

In my math quiz application, I need to retrieve the values of multiple radio buttons from the page in order to calculate scores and other data. Currently, I have ten separate variables for each radio button, but it feels like a brute force approach to cod ...

phphtmlsqlbrute-force

What is the correct way to load a column of images without affecting the readability of the text alongside them? (see image below)

https://i.stack.imgur.com/rBL50.png Whenever my page loads, there is a card with a vertical list of images. Due to the loading time of the images, the text appears first and gets squished as shown in the provided screenshot. Is there a way for the text to ...

phphtmlcss

Guide on how to include an .env file within an HTML script tag?

I am trying to protect my API Key when sending a request to the server by storing it in an .env variable. However, I am unsure how to access this variable within a script tag in HTML. Can anyone provide guidance on how to achieve this? ...

htmlnode.js

form submission issue with return false not working

Despite my efforts, the form still redirects to the page. I've been awake since 1AM trying to troubleshoot this issue! Please assist! function del_entry() { $('.delete_deal').submit(function() { var $g = $(this); ...

javascriptjqueryajaxformssubmit

Issue with live Chrome page: SVG not displaying

Despite trying different solutions, my SVG is still not appearing correctly on my live website. It displays perfectly on my local server and computer, but once the site is live, the SVG disappears. The HTML code for my SVG uses an img tag wrapped in an a t ...

htmlsvg

Tips for designing a mobile-friendly table on a small device

I am working on a basic app featuring a simple table with four columns. My goal is to make the table responsive, with each column stacking vertically below the other. I am searching for a solution that does not involve the use of Javascript. Currently, my ...

htmlcss

Having trouble accurately referencing the domain across various servers

I have set up two servers for production - one for php files and the other for static (css, js) files. Within my config.php file: $path ="https://mystaticdomain.com/"; To simplify access to paths, I created a variable to store the path for css and js fi ...

phpcss

Customize the appearance of tables in your WordPress theme

I'm currently working on a website using the Wordpress Twenty Ten theme and I've run into an issue with inserting html tables. The theme seems to be overriding my styling, resulting in very unattractive tables. I've attempted to fix this pro ...

htmlcsswordpresswordpress-theming

Ways to incorporate additional fields into your html/php form

Is there a way to increase the number of fields in my basic form? I want to include fields like username, email, subject, and more. Just looking to add additional fields to the form. <!DOCTYPE html> <html> <head> <title>Storing Fo ...

phphtmlforms

The CSS code for ::before is not functioning properly

Trying to enhance the style in Ionic2, I have a message box: https://i.sstatic.net/PCRtA.png I am attempting to integrate this image into it: https://i.sstatic.net/PSQID.png To create a seamless look with the message box. Facing an issue where the ima ...

cssionic2

Encountering a vast expanse of empty white void

Attempting to create a scrollbar within my content div instead of the entire window seems to be causing a large white space in the content box, and I'm struggling to understand why. Can someone take a look and help me identify the issue? You can view ...

jqueryhtmlcssscrollbar

What is the best way to customize the appearance of an XML snippet using Greasemonkey?

I am attempting to customize an XML fragment retrieved from a server response using a Greasemonkey script. Take a look at this sample XML fragment from w3schools.com: <note> <to> Tove</to> <from>Jani</from> <heading ...

javascriptcssxmlxsltgreasemonkey

Centralize and confine the menu division

I have been working on creating a hover menu using CSS and Bootstrap, specifically for flex grid layouts. However, I have run into an issue where my menu is only as wide as its parent div. Furthermore, I am struggling to center the hover menu relative to ...

htmlcss

HTML5 Audio Recording Tools (including a built-in Audio Player)

While exploring Universal HTML5 players such as , I have noticed that none of them seem to include a record button. Is there any player out there that has one, similar to the image below? https://i.sstatic.net/Lpg2s.png ...

htmlavaudioplayerrecorder

Perfectly aligning when the width is undetermined

When centering elements with dynamic widths, I typically use the code below: .horz-vert-center { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } However, a common issue I face is that the element resizes prematur ...

htmlcsscentering

Determine the div's width inside the viewport

I am trying to determine the width of a div within the viewport. When using .css(width) on my div, it calculates the overall width instead. Here is the code I am currently using: var $Windowwidth = $(window).width(); var $lefty = $("#gallerytop"); var $G ...

jqueryhtmlwidth

Dynamic VueJS HTML element selection depending on a condition

While working with Vue JS, I have the capability to do <h1 v-if="someCondition">MY TITLE</h1> Is it possible to determine the element type based on a certain condition? For instance, depending on someCondition, I would like my title to be ei ...

javascripthtmlvue.jsvuejs2

Applying the 'overflow: scroll' property creates a scroll bar that remains fixed and cannot be scrolled

Looking to showcase the seating arrangement in a cinema hall. If the seats occupy more than 50% of the page, I want a scroll bar to appear. Attempted using "overflow-scroll" without success. View result image <div class="w-50"> <div ...

htmlcssvue.jsscrollfrontend