Having trouble with the auto width CSS for the center section of my webpage

Question

Having trouble with the auto width CSS for the center section of my webpage

I am facing an issue with assigning widths to my divisions using the CSS calc property. Despite setting the width for the first and last divisions, I am unable to allocate any width to the middle division.

HTML:

 <div style="width:400px;">
<div class="first">First Division Content Goes Here.</div>
<div class="divider"></div>
<div class="last">Second Division Content Goes Here.</div>
</div>

CSS:

 .first
{
height:50px;
background-color:#ff00ff;
float:left;
width: calc(50% - 10px);
}
.divider
{
width:auto;
height:50px;
background-color:#fff000;    
float:left;
}
.last
{
height:50px;
background-color:#00ffff;
float:left;
width: calc(50% - 10px);
}

How can I resolve this problem? Is there a way to assign the width of the middle part based on the result of the calc property?

JSFIDDLE

EDIT:

I have made updates to my JSFIDDLE by adding content to the middle division in response to suggestions that "Width auto won't assign a width automatically if there isn't any content inside the div". Now, with content added, how do I adjust the width automatically?

Updated JSFIDDLE

html css

Answer 1

Answer №1

To incorporate the use of calc, you have the option to implement a (fairly intricate) calc expression for determining its width:

.divider
{
    width: calc(100% - 2 * (50% - 50px)); 
    height:50px;
    background-color:#fff000;    
    float:left;
}

When utilizing width: auto, it presents no impact as your div is devoid of content; this situation also explains why the width isn't "snapping" because of the floated div.

Edit: It seems that opting for a simple 20px might be the most suitable solution. :)

Edit 2: A revised Fiddle incorporating the aforementioned expression within the stylesheet can be found here.

Answer 2

To incorporate the use of calc, you have the option to implement a (fairly intricate) calc expression for determining its width:

.divider
{
    width: calc(100% - 2 * (50% - 50px)); 
    height:50px;
    background-color:#fff000;    
    float:left;
}

When utilizing width: auto, it presents no impact as your div is devoid of content; this situation also explains why the width isn't "snapping" because of the floated div.

Edit: It seems that opting for a simple 20px might be the most suitable solution. :)

Edit 2: A revised Fiddle incorporating the aforementioned expression within the stylesheet can be found here.

Answer 3

Answer №2

When using width auto, the div will not automatically assign a width if there is no content inside it because it adjusts its width based on the length of the content.

To set a width manually, you can try the following CSS:

.first
{
    height:50px;
    background-color:#ff00ff;
    float:left;
    width: calc(50% - 10px);
}
.divider
{
    width:20px;
    height:50px;
    background-color:#fff000;    
    float:left;
}
.last
{
    height:50px;
    background-color:#00ffff;
    float:left;
    width: calc(50% - 10px);
}

UPDATE: If you're looking for a 3-column grid design, this might be more suitable. Instead of using calc, you can assign a percentage of width to each div for a simpler solution.

.first
{
    height:50px;
    background-color:#ff00ff;
    float:left;
    width: 40%;
}
.divider
{
    display: inline-block;
    width: 20%;
    height:50px;
    background-color:#fff000;    
    float:left;
}
.last
{
    height:50px;
    background-color:#00ffff;
    float:left;
    width: 40%;
}

You can view the fiddle here -> http://jsfiddle.net/A94xT/5/

Answer 4

When using width auto, the div will not automatically assign a width if there is no content inside it because it adjusts its width based on the length of the content.

To set a width manually, you can try the following CSS:

.first
{
    height:50px;
    background-color:#ff00ff;
    float:left;
    width: calc(50% - 10px);
}
.divider
{
    width:20px;
    height:50px;
    background-color:#fff000;    
    float:left;
}
.last
{
    height:50px;
    background-color:#00ffff;
    float:left;
    width: calc(50% - 10px);
}

UPDATE: If you're looking for a 3-column grid design, this might be more suitable. Instead of using calc, you can assign a percentage of width to each div for a simpler solution.

.first
{
    height:50px;
    background-color:#ff00ff;
    float:left;
    width: 40%;
}
.divider
{
    display: inline-block;
    width: 20%;
    height:50px;
    background-color:#fff000;    
    float:left;
}
.last
{
    height:50px;
    background-color:#00ffff;
    float:left;
    width: 40%;
}

You can view the fiddle here -> http://jsfiddle.net/A94xT/5/

Answer 5

Answer №3

To create the divider, simply set the width to 20px after subtracting 10px from each side.

.divider {
    width: 20px;
}

SEE IT IN ACTION

Answer 6

To create the divider, simply set the width to 20px after subtracting 10px from each side.

.divider {
    width: 20px;
}

Having trouble with the auto width CSS for the center section of my webpage

Answer №1

Answer №2

Answer №3

SEE IT IN ACTION

Similar questions

Tips for calculating the total of each row and column in a table with jQuery

Spin: twist beyond 360 degrees or less than 0 degrees

Visual Composer in WordPress is not displaying as expected

Unraveling HTML elements within a string using MongoDB: A step-by-step guide

Modify the useRef value prior to the HTML rendering (React functional component)

Turn off background sound on mobile devices

Ways to display multiple PHP pages in a single division

Set up a JavaScript function that triggers an alert if two numbers are determined to be equal

How to Manage Empty Lines in HTML Documents within WordPress

Rotating the transform causes the div to be pushed beyond the screen boundaries and renders

Centering the header image on the screen creates a visually appealing focal point

Develop an AJAX script for processing multiple form inputs in PHP and HTML

Adjust the input width dynamically in Angular

Dividing a string into an array and displaying it in a table using Laravel

The RSS feed is stretching beyond the limits of the table's height

Adjust the height of a <div> element to fit the remaining space in the viewport or window automatically

Position card action buttons at the bottom using Material UI

Can the z-index property be applied to the cursor?

What is the best way to eliminate unwanted white space at the top of the page?

Try implementing a body template when using the mailto function