Ensuring the legend spans the entire width of the fieldset while preserving content padding

My objective is to style fieldsets with a border, position the legend at the top, and give it a background color that spans the full width of the fieldset.

I began by referencing an article on how to make a legend fill up the full width within the fieldset, which led me to experiment with this jsfiddle: http://jsfiddle.net/pdgreen/wcYXX/0.

While the initial design looked satisfactory, I realized that without padding for the fieldset, the form elements were too close to the borders. Adding padding resulted in this updated version: http://jsfiddle.net/pdgreen/wcYXX/1/.

The content displayed properly, but the legend title no longer stretched across the entire width of the fieldset.

In an attempt to resolve this issue, I enclosed the content within a div to introduce padding: http://jsfiddle.net/pdgreen/wcYXX/2/. However, this approach necessitated the additional presence of a div.

Is there a method to achieve the appearance seen in the third fiddle without requiring the extra div?

htmlcss

Answer №1

Indeed, one way to counteract the padding of the fieldset is by using a negative margin on the legend element. Here's an example: http://jsfiddle.net/wcYXX/3/

To achieve this, simply set the margin of the fieldset to -5px (matching the padding but in negative) and then add 5px of padding to adjust the text positioning.

This approach eliminates the need for border-box, which may not be supported in older browsers.

The updated CSS for the fieldset now looks like this:

fieldset legend {
    background: #369;
    color: #FFF;
    font-weight: 700;
    text-align: left;
    white-space:nowrap;

    margin: -5px;
    padding: 5px;
    display: block;
    width: 100%;

}

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

Transition effects should be applied solely to the foreground text color, not to the background image

Is there a way to specifically apply the css3 transition effect only to the text color? Imagine having a readmore class with a transition effect defined like this: .readmore { colour: red; -webkit-transition: all .3s ease-out; -moz-transition ...

htmlcss

problem with the height of the side navigation bar

Currently, I am in the process of creating a back-end system that includes a side navigation bar positioned on the left-hand side. To accomplish this, I have opted to utilize the Bulma CSS framework and integrate it with Laravel. Although I have implemen ...

htmlcss

What steps can be taken to resolve the issue of the Cannot POST /index.html error?

Here is an example of a calculator app created using HTML and Javascript. Upon running the program with nodemon and accessing localhost:3000, pressing the submit button triggers an error on Google Chrome. [nodemon] starting `node calculator.js` Server sta ...

javascripthtmlnode.js

Unable to separate the site logo (brand) and navigation links in Bootstrap 5 navbar

Trying to design a responsive navbar with Bootstrap 5, but facing an issue. Want the logo on the left and nav-links on the right, yet 'navbar-expand-lg' aligns both on the left side. I tried using the 'ml-auto' class in the ul tag, but ...

htmlcsstwitter-bootstrap

Trouble with Bootstrap 3's nav-justified feature not displaying correctly upon window expansion

Looking at this Bootstrap example page, I noticed a small issue with the nav-justified navigation. When the window is minimized, it transitions correctly to a mobile version. However, when the window is maximized again, the buttons remain in the mobile for ...

javascriptjqueryhtmlcsstwitter-bootstrap

Expanding the `div` element to visually occupy the entire vertical space

I'm facing a design challenge with my webpage layout. I have a fixed header and footer, but I need the content section to dynamically adjust its height between the two. The goal is to fill the remaining vertical space with a background-image in the co ...

htmlcss

Extracting Data From HTML Document Specifically Targeting Table

How can I scrape the data from the table located on the far right of this page , considering that all tables on the page use the same styles and class names? I need to extract information from that specific table and display it. Any suggestions? ...

phphtmldomweb-scraping

How can I update the language of a button text in a React component?

Looking to update the button labels from a different language to English. Here is how it currently appears: https://i.sstatic.net/6JZ6m.png ...

javascripthtmlcssreactjs

Creating a Consistent Look for Italic Font Formatting in Tailwind

In an effort to establish consistent typography on a website being developed by my team, we have devised custom utility classes in Tailwind. One of these classes, small-italicized, also requires the text to be italicized. However, it seems that the fontSiz ...

javascriptcssreactjsnext.jstailwind-css

Angular: What is the best way to pass usersearch-input data to a different component and use it to generate a list of search results?

Seeking assistance as a beginner in Angular, I am currently working on my first project with Angular 8 for the frontend of an application. The challenge I faced was creating an HTML page (...stuff/searches) where users can input search criteria to find sp ...

javascripthtmlnode.jsangulartypescript

Using jquery to dynamically set the value of a drop down menu

I am struggling with a dropdown list that is being generated dynamically using ajax when the page loads. Additionally, I have a PHP variable that holds the default selected value. However, despite my attempts to select this value, it does not work as expec ...

phpjqueryhtmldrop-down-menu

Combine CSS files in a specific sequence

In my project, I have multiple CSS files being generated in the css/ folder using libsass. Additionally, I already have a normalize.css file placed in the same directory to ensure consistent styling across different browsers. As part of my build process, w ...

bashcssnpmconcatenation

Hiding a Blogger section when its widget is not visible

Take a look at this code: <b:section id='page-list'> <b:widget id='PageList1' locked='false' type='PageList' version='2' visible='true'> </b:widget> </b:section> I wa ...

javascripthtmljqueryblogger

"Encountering issues with calling a Node.js function upon clicking the button

I'm facing an issue with the button I created to call a node.js server function route getMentions, as it's not executing properly. Here is the code for my button in index.html: <button action="/getMentions" class="btn" id="btn1">Show Ment ...

javascripthtmlnode.js

Is there a way to have text positioned to the left and the right on a single line simultaneously?

Is there a way to format text so that some aligns left and some aligns right on the same line? <p>This text should be aligned left. This text should be aligned right.</p> I can align all text to the left or right, either inline or through a s ...

htmlcss

What is the process for choosing an element, wrapping it in a <div>, and appending a class to it using only JavaScript?

When constructing a responsive website, all CMS entries are in markdown. It's not feasible to manually code the div into each new entry, so dynamic class addition is necessary. The task at hand involves selecting an <img> within a post and wrap ...

javascripthtmlcss

Two divs positioned to the right on top of each other

I want to align two divs on the right side of their parent div, one above the other. Here's a visual representation: div#top |-------------------------------------||------------| |div#parent ||div#menu | | ...

csshtmlpositioning

Initially, the OWL Carousel image is not displaying correctly due to incorrect sizing

I am currently working with OWL Carousel and have implemented a code that displays one image at a time, with the next image sliding in every 15 seconds. The width is set to occupy 100% of the screen and I have configured the JavaScript accordingly so that ...

javascriptjquerycsscarouselowl-carousel

What are the advantages of importing variables from components?

Let's start with some context. Our primary sass file is named main.scss, which mainly imports other scss files. /* ========================================================================== Base ================ ...

csssass

Tips for adjusting the width of a field within an existing OpenERP7 form view utilizing percentages instead of pixels

In the process of modifying a form view on OpenERP7 through inheritance, I am attempting to adjust the width of a field to 50% (currently at 40%). While I have successfully altered the style and width of the field using pixels, any attempt to input a perce ...

cssxmlviewodooopenerp-7