Is It Possible to Have Four Equally-Spaced DIVs with Variable Widths?

Question

Is It Possible to Have Four Equally-Spaced DIVs with Variable Widths?

I am currently facing a challenge in creating a simple sub-navigation system for my website. I want to have either 3 or 4 equally spaced DIVs across the top of the content area. Despite being a common requirement, CSS does not offer straightforward solutions for this problem.

1) For example, having 3 Variable-Width, Equally-Spaced DIVs:

[[LEFT]                [CENTER]               [RIGHT]]

2) Alternatively, with 4 Variable-Width, Equally-Spaced DIVs:

[[LEFT]    [LEFT CENTER]    [RIGHT CENTER]    [RIGHT]]

My workaround for the first issue with 3 DIVs involves floating the left and right DIVs and setting an arbitrary size for the middle DIV while using "margin: 0 auto". This approach is not ideal but provides a rough solution assuming no changes are made to the navigation.

To address the second problem with 4 DIVs, I center a DIV as before, float two DIVs within it, and set arbitrary sizes for alignment:

[[LEFT]    [[LEFT CENTER]    [RIGHT CENTER]]    [RIGHT]]

However, this method becomes complex when language or image modifications are implemented on the site, necessitating re-calculation of alignment values. It merges structure with presentation, making it overly complicated.

Any assistance in simplifying this task would be greatly appreciated.

EDIT 07/20/2012 5:00PM

I attempted a "table-cell" solution using percentages, which worked to some extent. However, I encountered another issue due to each DIV serving as a container for two additional DIVs, displaying icon-label pairs either floated or displayed inline-block.

For reference: http://jsfiddle.net/c3yrm/1/

The final element in the list appears incorrectly aligned.

Your continued help is highly appreciated!

EDIT 07/20/2012 7:16PM

Thanks to the guidance from arttronics, a final solution has been achieved: http://jsfiddle.net/CuQ7r/4/

css css-float html

Answer 1

Answer №1

For more information, check out the jsFiddle Pure CSS Demo

To solve the issue, we utilized the float property for each breadcrumb and implemented a straightforward calculation to determine the width percentage of each breadcrumb based on the total number of breadcrumbs.

Answer 2

For more information, check out the jsFiddle Pure CSS Demo

To solve the issue, we utilized the float property for each breadcrumb and implemented a straightforward calculation to determine the width percentage of each breadcrumb based on the total number of breadcrumbs.

Answer 3

Answer №2

To simplify the calculation, consider utilizing percentages:

[[LEFT=24%]2% margin><2% margin[LEFT CENTER=24%]2% margin><2% margin[RIGHT CENTER=24%]2% margin><2% margin RIGHT=24%]]=100%/??px

You can then set a width for the container and use

display:inline;

If adding borders to visualize the divs causes extra space, adjust the element's width by 1% or alter their background colors.

Answer 4

To simplify the calculation, consider utilizing percentages:

[[LEFT=24%]2% margin><2% margin[LEFT CENTER=24%]2% margin><2% margin[RIGHT CENTER=24%]2% margin><2% margin RIGHT=24%]]=100%/??px

You can then set a width for the container and use

display:inline;

If adding borders to visualize the divs causes extra space, adjust the element's width by 1% or alter their background colors.

Answer 5

Answer №3

ol {
    width: 400px;
    /*width: 800px;*/

    display: table;
    table-layout: fixed; /* the secret sauce for equal width */
    background: #ccc
}
ol > li {
    display: table-cell;
    border: 1px dashed red;
    text-align: center
}

Check it out here: http://jsfiddle.net/QzYAr/

Answer 6

ol {
    width: 400px;
    /*width: 800px;*/

    display: table;
    table-layout: fixed; /* the secret sauce for equal width */
    background: #ccc
}
ol > li {
    display: table-cell;
    border: 1px dashed red;
    text-align: center
}

Check it out here: http://jsfiddle.net/QzYAr/

Answer 7

Answer №4

A method that I have discovered is utilizing flex boxes (or inline-flex).

For a detailed explanation and example of how this can be implemented, you can visit this link.

In my opinion, flex boxes will likely become the preferred approach for managing these types of layouts in the future. However, until other browsers align with Mozilla's utilization of the flex-basis attribute (including values such as min-content, max-content, fit-content, etc.), issues may persist particularly with responsive designs. For instance, when the window size is reduced, lengthy content like "a_really_really_long_word" may not completely display within the designated space, leading to some content being cut off on the right side of the screen if precautions are not taken.

By incorporating the flex-wrap property, it may be possible to ensure that all elements fit within the layout. You can refer to this resource for another illustration of this concept specifically catered to Mozilla browsers.

I typically opt for flex boxes in scenarios such as letterheads or tables where the width is relatively fixed and spacing is automatically adjusted. Conversely, for websites requiring content to condense significantly, I often utilize nested float and inline-block objects based on recommendations from other responses provided here.

Answer 8

A method that I have discovered is utilizing flex boxes (or inline-flex).

For a detailed explanation and example of how this can be implemented, you can visit this link.

In my opinion, flex boxes will likely become the preferred approach for managing these types of layouts in the future. However, until other browsers align with Mozilla's utilization of the flex-basis attribute (including values such as min-content, max-content, fit-content, etc.), issues may persist particularly with responsive designs. For instance, when the window size is reduced, lengthy content like "a_really_really_long_word" may not completely display within the designated space, leading to some content being cut off on the right side of the screen if precautions are not taken.

By incorporating the flex-wrap property, it may be possible to ensure that all elements fit within the layout. You can refer to this resource for another illustration of this concept specifically catered to Mozilla browsers.

I typically opt for flex boxes in scenarios such as letterheads or tables where the width is relatively fixed and spacing is automatically adjusted. Conversely, for websites requiring content to condense significantly, I often utilize nested float and inline-block objects based on recommendations from other responses provided here.

Is It Possible to Have Four Equally-Spaced DIVs with Variable Widths?

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Troubleshooting a problem with the Bootstrap dropdown menu

Changing the color of a Highcharts series bar according to its value

Enhance Your Website with HTML and JavaScript

Class for Bootstrap CSS to adjust card image when resized

What is the best way to make a textview span its layout in an android app?

How can I validate HTML input elements within a DIV (a visible wizard step) situated within a FORM?

Display map.svg on the browser and execute a function when any area is clicked

What should we name this particular style of navigation tab menu?

Ways to turn off textarea resizing

Having difficulty in closing Sticky Notes with JavaScript

"Bootstrap is functioning properly on my local environment, but it seems to

align the button to the left using bootsrap configuration

Looking to design a popup using CSS styles

Shorten a data point in JSON code

Angular 6 is showcasing dates in a quirky manner

Issues with padding and margin on iOS devices

How many hyperlinks are there on this webpage?

Modify the color of the matSnackbar

The justify-content-around property in Bootstrap-4 does not seem to be functioning as expected when

Concealing Contact Form Using Javascript