Calibrating height using CSS

Within my HTML document, I have the following structure:

<div id="content">
    <div id="wrapper">
        <div id="steps">
            <form id="formElem" name="formElem" action="" method="post">
                <fieldset class="step">
                    <legend>General Information </legend>
                </fieldset>
                <fieldset class="step">
                    <legend>Medical History</legend>
                </fieldset>
            </form>
        </div>
        <div id="navigation" style="display:none;">
            <ul>
                <li class="selected">
                    <a href="#">General Information</a>
                </li>
                <li>
                    <a href="#">Medical History</a>
                </li>
        </div>
    </div>

The associated CSS file is as follows:

#content{
    margin:30px auto;
    text-align:center;
    width:900px;
    position: relative;
    height:100%;
}

#left{
    position: absolute;
    z-index: 1;
    margin-top:10px;
    margin-left:30px;
    text-align:center;
    width:170px;
    color:#000000;
    height:500px;
    -moz-box-shadow:0px 0px 13px #aaa;
    -webkit-box-shadow:0px 0px 13px #aaa;
    box-shadow:0px 0px 23px #aaa;
    background-color:rgba(300,250,250,0.5);
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border-radius:5px;
}


#wrapper{
    -moz-box-shadow:0px 0px 13px #aaa;
    -webkit-box-shadow:0px 0px 13px #aaa;
    box-shadow:0px 0px 23px #aaa;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    border-radius:10px;
    border:2px solid #fff;
    //background-color:#f9f9f9;
    background-color:rgba(220,220,220,0.5);
    width:1000px;
    height:100%;
    overflow:hidden;
}

#steps{
    width:1000px;
    height:520px;

     overflow: auto; 

    /* overflow: scroll;
    overflow:  */
}
.step{
    float:left;
    width:1000px;
    /* height:600px;  */
    overflow-y: auto;
    /* overflow:-moz-scrollbars-vertical; */

    /*height:320px;*/
}
#navigation{
    height:40px;
    background-color:#e9e9e9;
    border-top:1px solid #fff;
    -moz-border-radius:0px 0px 10px 10px;
    -webkit-border-bottom-left-radius:10px;
    -webkit-border-bottom-right-radius:10px;
    border-bottom-left-radius:10px;
    border-bottom-right-radius:10px;
}
#navigation ul{
    list-style:none;
    float:left;
    margin-left:10px;
}
#navigation ul li{
    float:left;
    border-right:1px solid #ccc;
    border-left:1px solid #ccc;
    position:relative;
    margin:0px 2px;
}
#navigation ul li a{
    font-size: 10px;
    display:block;
    height:40px;
    background-color:#444;
    color:#777;
    outline:none;
    font-weight:bold;
    text-decoration:none;
    line-height:40px;
    width: auto;
    padding:0px 5px;
    border-right:1px solid #fff;
    border-left:1px solid #fff;
    background:#f0f0f0;
    background:
        -webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0.09, rgb(240,240,240)),
        color-stop(0.55, rgb(227,227,227)),
        color-stop(0.78, rgb(240,240,240))
        );
    background:
        -moz-linear-gradient(
        center bottom,
        rgb(240,240,240) 9%,
        rgb(227,227,227) 55%,
        rgb(240,240,240) 78%
        )
}

I am looking to dynamically adjust the height of each fieldset based on the content present within them. How can this be achieved?

Answer №1

Fieldsets adapt their height to fit the form elements inside of them without needing any extra CSS.

It's important to note that fieldsets should always include form fields, so it's unclear why they were excluded in your code example.

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

Importing JSON Data into an HTML File

I need to load a JSON file containing HTML content into my main HTML file upon clicking a button. ABC.json includes: <li><img src="images/picture6.jpg" /></li> <li><img src="images/picture5.jpg" /></li> <li><i ...

Guide on how to submit an image along with text using AJAX, PHP, and HTML

Hey there! I'm currently working on a project where I need to upload an image with comments added into a database using a combination of PHP, AJAX, and HTML. Let me show you the HTML part first: <form name="form1" enctype="multipart/form-data" ac ...

display and conceal a division by clicking a hyperlink

How can I make a hidden div become visible when clicking on a specific link without using jQuery? Javascript function show() { var a = document.getElementsByTagName("a"); if (a.id == "link1") { document.getElementByID("content1").style.v ...

Positioning divs around a circle can be quite challenging

Among my collection of divs with various classes and multiple child divs representing guests at a table, each main div symbolizes a specific restaurant table type. I have created a jsfiddle for demonstration. http://jsfiddle.net/rkqBD/ In the provided ex ...

How to turn off validation for md-input-container in Angular 2

While working on a form in Angular 2, I encountered an issue when adding the required attribute to my <input>. The problem resulted in unwanted margins as shown in this image: https://i.sstatic.net/W6JSF.png I am seeking a solution to only apply the ...

Is there a way to maintain image proportions when resizing the window?

I'm in the process of developing a classroom-themed website with interactive overlaying images. The goal is to have various pictures that users can click on to access different resources from different websites. My main challenge right now is getting ...

Including the HTML Doctype to center child elements within the <td> tags specifically for Internet Explorer

This issue seems to be isolated to Internet Explorer. I have conducted tests using IE7, IE8, and IE9. Interestingly, when I remove the html doctype, the td tags are aligned to the left. However, upon adding any standard HTML4 or 5 tags, the text and input ...

React Scroll and Material-UI button active link not functioning correctly

Whenever the link goes to the correct page, I want to add a special background effect or change the font color. Despite trying to use CSS for this purpose, it didn't work as intended. If you want to take a look at my code on codesandbox, follow this ...

Hello there! I'm currently working on implementing a button that will alter the CSS grid layout

I need help designing a button that can alter the layout of my CSS grid. The grid information is contained within a class called 'container'. My goal is to change the grid layout by simply clicking a button, using either HTML and CSS or JavaScri ...

absence of a scrollbar on smaller window display

My website is experiencing an issue: everything displays properly when the window size matches or exceeds the background image, but on a smaller window, there is no scroll bar which causes the footer to disappear. Here is an image showing what happens wit ...

Is there a way to store a jQuery CSS manipulation within a cookie?

On my Wordpress site, I have a code that allows users to change the font size of the body when they click on one of three generated buttons: <button class='body_standard_font_size'>Standard</button> <button class='body_medium ...

Are HTML5 Track Element Cue Events Working Properly?

My goal is to dynamically assign functions to HTML5's cue.onenter events. This feature is relatively new and currently only supported in Chrome with specific flags enabled (Refer to the example on HTML5 Rocks here). However, I seem to be facing some ...

Having trouble with this 'string', need assistance with the syntax error

I have the following code snippet: $fq.=" + (fritidsboende_uth_from:[$fritids_uth_from TO *] AND fritidsboende_uth_to:[* TO $fritids_uth_to]) OR (fritidsboende_uth_from:'1972-01-01T01:01:00Z' AND fritidsboende_uth_to:'2019-01-01T01:01:00 ...

Rotate Text in HTML <thead> Tag

I need assistance with rotating a table header. https://i.stack.imgur.com/hcvxx.png The HTML th elements within the thead section are described as follows: <th> <span class="rotate-all">Period</span> </th> <th> < ...

What could be causing the absolute positioned element to not follow the positioning rules as expected?

Currently, I am following a guide on creating a website using Dreamweaver (). However, I have encountered a step in the tutorial that I am struggling to comprehend. The issue lies with an element named #navlink, which is absolutely positioned in the DOM s ...

problems with an extra administrator account access

Is it possible to have a single login form that can cater to both users and admins? I currently have a user login system in place but would like to add an admin login as well. How can I implement this without creating separate logins? if(isset($_POST[&ap ...

Which is Better for Creating DropDown Menus: CSS or JavaScript?

Starting a new project that involves dropdown menus with categories and subcategories within them. I'm curious about the advantages of using CSS3 only menus compared to traditional JavaScript ones. There are several jQuery menu options available as we ...

Arrangement of elements in Bootstrap

Is there a way to prevent my frame from overflowing compared to its parent class when using bootstrap's row class? How can I address this issue? https://i.sstatic.net/gR7Ep.png Here is my code: html: <div class="container"> <div cla ...

Head styles for tinyMCE

When viewing the tinyMCE example on the official website using Firefox, you may notice the editor blinking. This issue seems to only occur in Firefox, possibly due to external CSS files for the editor. I am considering adding all CSS rules directly into th ...

Deactivating Node.js files in vsCode for client-side JavaScript files

I'm facing a major challenge when it comes to coding with JavaScript. I have a JavaScript file that is using Node.js, which means I am unable to manipulate the DOM elements. Take this code snippet for example: var form = document.getElementsByClassNa ...