The styling for the <fieldset> element is not functioning correctly

There seems to be an issue with styling <fieldset>. In Google Chrome, the divs are adjusting to the content.

.table {
  border: none;
  border-collapse: collapse;
  display: table;
  margin: 0;
  min-width: auto;
  padding: 0;
  table-layout: fixed;
  width: 100%;
}

.cell {
  background: #ccc;
  border: 1px solid black;
  display: table-cell;
  height: 50px;
}
<fieldset class="table">
  <div class="cell">1</div>
  <div class="cell">2</div>
  <div class="cell">3</div>
</fieldset>

But what I actually want is

.table {
  border: none;
  border-collapse: collapse;
  display: table;
  margin: 0;
  min-width: auto;
  padding: 0;
  table-layout: fixed;
  width: 100%;
}

.cell {
  background: #ccc;
  border: 1px solid black;
  display: table-cell;
  height: 50px;
}
<div class="table">
  <div class="cell">1</div>
  <div class="cell">2</div>
  <div class="cell">3</div>
</div>

Any ideas on how to style <fieldset> to achieve this desired look?

htmlcss

Answer №1

Setting the width of a fieldset to 100% only affects the border of the fieldset itself, not the width of any div elements inside it. To style the div elements within the fieldset, you need to apply specific CSS styles to them.

.table {
  border: none;
  border-collapse: collapse;
  display: table;
  margin: 0;
  min-width: auto;
  padding: 0;
  table-layout: fixed;
  width: 100%;
}

.cell {
  background: #ccc;
  border: 1px solid black;
  display: table-cell;
  height: 50px;
  width: calc(100vw * 1/3);
}
<fieldset class="table">
  <div class="cell">1</div>
  <div class="cell">2</div>
  <div class="cell">3</div>
</fieldset>

Answer №2

After some experimentation, I discovered that nesting the fieldset cell divs inside another div can achieve the desired outcome

 .table {
 border: none;
 border-collapse: collapse;
 display: table;
 margin: 0;
 padding: 0;
 table-layout: fixed;
 }

 .father{
 width: 100%;
 height: 50px;
 }

 .cell {
 background: #ccc;
 border: 1px solid black;
 display: table-cell;
 width: 30%;
 height: 50px;
 float: left;
 }
 <fieldset class="table">
     <div class="father">
        <div class="cell">1</div>
        <div class="cell">2</div>
        <div class="cell">3</div>
     </div>
 </fieldset>

Answer №3

.table {
  border: none;
  border-collapse: collapse;
  display: table;
  margin: 0;
  min-width: auto;
  padding: 0;
  table-layout: fixed;
  width: 100%;
}

.cell {
  background: #ccc;
  border: 1px solid black;
  display: table-cell;
  height: 50px;
  padding-right: 31em;
}
<fieldset class="table">
  <div class="cell">1</div>
   <div class="cell">2</div>  
   <div class="cell">3</div>
</fieldset>

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

Guide on showcasing a list over several pages in Flask

I'm working with Flask and facing a challenge in displaying a dynamic list of items across multiple pages, as the list can potentially contain over 1000 items. Inside app.py, I've set up a route like this: @app.route('/displayitems') ...

pythonhtmlflaskjinja2

How come I can click on both radio buttons simultaneously?

How come I can select both radio buttons simultaneously? <form #form="ngForm"> {{ poll.counter1 }} votes <input type="radio" id="{{ poll.choice1 }}" value="{{ poll.choice1 }}" (click)="onChoice1(form)">{{ poll.choice1 }} <br> ...

htmlangular

Utilizing JavaScript to dynamically set the height and width of a canvas based on the user input

How can I take user input for height and width values and apply them to a newly created canvas? I am able to retrieve the values, but I'm unsure how to set them as the style.height and style.width properties. var createNewCanvas = document.getEleme ...

javascriptcsshtmlcanvas

Which is Better for Mobile Web Apps: Multiple Pages or AJAX?

I am currently planning a new project focused on mobile web apps. The project will involve creating a mobile web app with multiple screens, a search system, and various other features. One decision I need to make is choosing the primary framework for this ...

javascriptjqueryhtmlajax

Guide to creating a see-through right border for vertical tabs using Bootstrap 4

I have been working on creating vertical tabs in Bootstrap 4 and have almost completed the task. However, I am facing an issue with making the right border of the active tab transparent. Despite several attempts, I have not been successful in achieving thi ...

csstwitter-bootstrapbootstrap-4

Struggles with arranging elements in the right position

Currently, I am in the process of learning CSS and working on developing a game that involves time and score. In short, here is what I aim to achieve: This is what I have so far: You can find my progress on jsFiddle: http://jsfiddle.net/yZKTE/ CSS: #b ...

javascriptjqueryhtmlcss

Leverage the functionality of Typo3 Powermail to automatically input form values from one page to another

I am currently developing a website with a simple form that includes an input field for entering an email address and a submit button in the footer. Clicking the button directs users to a contact page featuring a Powermail form, where the input field value ...

htmlformstypo3powermail

Display HTML content within designated fixed-column sizes

Looking to divide the content of an HTML file into multiple fixed size columns, both in terms of height and width, then display it in a Webview. I attempted employing the CSS properties mentioned below, but couldn't get it to function as desired. -we ...

javascriptandroidhtmlcss

In order to effectively utilize and display images on a webpage, I require a JavaScript array to store image links for use as image sources

I need assistance with changing these images. I am trying to store their links in an array, but when I click the button to change the image, it does not recognize that the array variable points to an image. Can someone offer guidance? Here is my current ...

javascripthtmlarrays

What could be causing the lack of functionality in the responsive feature?

What could be the reason for the disappearing responsive effect of the navbar not working in this link? <nav> <li>Hello</li> </nav> <style>@media screen and (max-width:400px) { .nav { display: none; } </styl ...

htmlcssmedia-queries

Obtaining JSON data in a separate JavaScript file using PHP

I have an HTML file with the following content: // target.html <html xmlns="http://www.w3.org/1999/xhtml"> ... <script src="../../Common/js/jquery-ui-1.10.3.js"></script> <script src="../../Common/js/select.js" type="text/javascript"& ...

javascriptphphtmljson

What is the best way to adjust the size of the browser window when opening my page?

I have created a single page scrolling website specifically designed for children. The optimal viewing experience is at 1200 pixels wide. Is there a method to set the window size to that by default when visitors land on the site? ...

javascripthtmlcss

Notify the user immediately if an HTML template is stolen using Jquery and PHP

After uploading an HTML template to themeforest, I discovered that some websites were giving away the full source code for free. Since HTML is easy to copy, obfuscation doesn't solve the issue. Is there a way to use JQuery to alert me if someone hosts ...

phpjqueryhtml

Having trouble with Javascript? Your page unexpectedly resets

Hey there, I'm facing a confusing issue. I created a registration page for a project, and every time I enter the information, it should be stored in a cookie. After entering the information for the first time, I saw it in the bar, but it wasn't p ...

javascripthtml

When the mouse hovers over the slider, the final image jumps into view

After successfully building an image slider that displays 2 partial images and 1 full image on hover, I encountered a bug when setting the last image to its full width by default. This caused a temporary gap in the slider as the other images were hovered o ...

javascriptjqueryhtmlcss

Extract the URL from an iframe using either coding techniques or through user interaction

I am in the process of creating a website that will serve as a wrapper around a third-party site using an iframe. My goal is to allow users to browse the third-party site within the iframe, then share the URL with the main site for storage. My objective i ...

javascripthtmliframe

Expanding the width of a child element causes it to exceed the boundaries of its parent

When I increase the width of a child element, it sometimes goes outside the boundaries of its parent element. The child element tends to only expand towards the right side, so I tried using the float property on the child element. Is there a CSS trick that ...

jquerycss

What is the best way to utilize the features of component A within component B when they exist as separate entities

Component A has all the necessary functionalities, and I want to use it in Component B. The code for ComponentA.ts is extensive, but it's not written in a service. How can I utilize the logic from Component A without using a service, considering both ...

javascripthtmlangulartypescriptangular11

What causes the small black line to appear on the right side of an image when it is turned into a link?

When I turn an image into a link, why does it always seem to display a tiny black line to the right of the image? ...

htmlcss

increasing the size of an element while keeping its overflow hidden

Is it possible to expand an element with "overflow: hidden" when clicked without affecting other elements? I'm looking for a solution that allows the expanded element to overlap and hide the element below it, rather than pushing it down. I've tr ...

javascripthtmlcssoverflow