Html - I need help aligning and resizing a variable number of div elements to a specific pixel value (600px in this case)

fmotion1
September 19, 2023
151 views
0 votes
2 Answers

I am creating a small app that extracts the dominant colors of an image via K-Means and then outputs an HTML preview of the results.

This is how it looks now:

Right now there are eight colors, but there could potentially be any number from 3-10.

The problem is, I can’t get the colors to span exactly 600px. I want the color grid to always span exactly 600px.

The current implementation is because I have a hard-coded value of width: 70px; set for each color. I want to eliminate this hard coded value and have the color elements auto size to the correct width that in total equates to 600px. Even if I have 3, 4, 5, etc. colors.

This is the code now:

<html>

<head>
    <style>
        :root {
            --color-gen-1: #680E4A;
            --color-gen-2: #6183D9;
            --color-gen-3: #132A93;
            --color-gen-4: #AF1B6A;
            --color-gen-5: #4ab9ec;
            --color-gen-6: #5A448B;
            --color-gen-7: #e054a1;
            --color-gen-8: #170E63;
        }

        .palette-selector_colors {
            height: 60px;
            width: fit-content;
            background-color: rgb(226, 222, 217);
            overflow: hidden;
            display: block;
            position: relative;
        }

        .palette-selector_colors div {
            height: 100%;
            position: relative;
            overflow: hidden;
            float: left;
            flex-grow: 1;
            display: inline-flex;

        }

        .palette-container {
            display: block;
            width: 600px;
        }

        .palette-selector_colors div {
            width: 70px;
            display: inline-block;
        }

        div .palettecolor1 {
            background-color: var(--color-gen-1);
        }
        div .palettecolor2 {
            background-color: var(--color-gen-2);
        }

        div .palettecolor3 {
            background-color: var(--color-gen-3);
        }

        div .palettecolor4 {
            background-color: var(--color-gen-4);
        }

        div .palettecolor5 {
            background-color: var(--color-gen-5);
        }

        div .palettecolor6 {
            background-color: var(--color-gen-6);
        }

        div .palettecolor7 {
            background-color: var(--color-gen-7);
        }

        div .palettecolor8 {
            background-color: var(--color-gen-8);
        }
        </style>
</head>

    <img src="img/cyberpunk.jpg" width="600px"/>

    <br/>
    <br/>
    <div class="palette-container">
        <div class="palette-selector_colors">
            <div class="palettecolor1">&nbsp;</div>
            <div class="palettecolor2">&nbsp;</div>
            <div class="palettecolor3">&nbsp;</div>
            <div class="palettecolor4">&nbsp;</div>
            <div class="palettecolor5">&nbsp;</div>
            <div class="palettecolor6">&nbsp;</div>
            <div class="palettecolor7">&nbsp;</div>
            <div class="palettecolor8">&nbsp;</div>
        </div>
    </div>

</html>

Is this possible to do? I am not a newbie to HTML/CSS, but I’m by no means an expert.

Here is a Repo with the code:

https://github.com/fmotion1/ColorGridTest/tree/main

Any help would be truly appreciated.

Tags: css html

Answers

Try this – I’ve made some modifications to your code. Hopefully, this will be helpful for you.

HTML:

<head>
<link rel="stylesheet" href="style.css" />

</head>

    <img src="img/cyberpunk.jpg" width="600px"/>

    <br/>
    <br/>
    <div class="palette-container">
        <div class="palette-selector_colors">
            <div class="palettecolor1">&nbsp;</div>
            <div class="palettecolor2">&nbsp;</div>
            <div class="palettecolor3">&nbsp;</div>
            <div class="palettecolor4">&nbsp;</div>
            <div class="palettecolor5">&nbsp;</div>
            <div class="palettecolor6">&nbsp;</div>
            <div class="palettecolor7">&nbsp;</div>
            <div class="palettecolor8">&nbsp;</div>
            
            <!-- Added extra column to check auto width -->
            <div class="palettecolor9">&nbsp;</div>
            <div class="palettecolor10">&nbsp;</div>
        </div>
    </div>

</html>

CSS:

:root {
            --color-gen-1: #680E4A;
            --color-gen-2: #6183D9;
            --color-gen-3: #132A93;
            --color-gen-4: #AF1B6A;
            --color-gen-5: #4ab9ec;
            --color-gen-6: #5A448B;
            --color-gen-7: #e054a1;
            --color-gen-8: #170E63;
            --color-gen-9: green;
            --color-gen-10: tomato;
        }
        
        .palette-container {
            display: flex;
            max-width: 600px;
            width: 100%;
        }

        .palette-selector_colors {
            height: 60px;
            width: fit-content;
            background-color: rgb(226, 222, 217);
            overflow: hidden;
            display: flex;
            flex-wrap: wrap;
            position: relative;
        }

        .palette-selector_colors div {
            height: 100%;
            position: relative;
            overflow: hidden;
            flex-grow: 1;
            flex-basis: 0;
            width: 75px;
            display: flex;
            max-width: 100%;
            padding: 1rem;

        }

        div .palettecolor1 {
            background-color: var(--color-gen-1);
        }
        div .palettecolor2 {
            background-color: var(--color-gen-2);
        }

        div .palettecolor3 {
            background-color: var(--color-gen-3);
        }

        div .palettecolor4 {
            background-color: var(--color-gen-4);
        }

        div .palettecolor5 {
            background-color: var(--color-gen-5);
        }

        div .palettecolor6 {
            background-color: var(--color-gen-6);
        }

        div .palettecolor7 {
            background-color: var(--color-gen-7);
        }

        div .palettecolor8 {
            background-color: var(--color-gen-8);
        }
        
        div .palettecolor9 {
            background-color: var(--color-gen-9);
        }
        
        div .palettecolor10 {
            background-color: var(--color-gen-10);
        }

You can easily do that with Flexbox. It’s simpler than the code you had:

:root {
    --color-gen-1: #680E4A;
    --color-gen-2: #6183D9;
    --color-gen-3: #132A93;
    --color-gen-4: #AF1B6A;
    --color-gen-5: #4ab9ec;
    --color-gen-6: #5A448B;
    --color-gen-7: #e054a1;
    --color-gen-8: #170E63;
}

.palette-selector_colors {
  height: 60px;
  display: flex;
}

.palette-selector_colors div {
    flex: 1 1 auto;
}

.palette-container {
    display: block;
    width: 600px;
}

div .palettecolor1 {
    background-color: var(--color-gen-1);
}
div .palettecolor2 {
    background-color: var(--color-gen-2);
}

div .palettecolor3 {
    background-color: var(--color-gen-3);
}

div .palettecolor4 {
    background-color: var(--color-gen-4);
}

div .palettecolor5 {
    background-color: var(--color-gen-5);
}

div .palettecolor6 {
    background-color: var(--color-gen-6);
}

div .palettecolor7 {
    background-color: var(--color-gen-7);
}

div .palettecolor8 {
    background-color: var(--color-gen-8);
}

<div class="palette-container">
  <div class="palette-selector_colors">
    <div class="palettecolor1">&nbsp;</div>
    <div class="palettecolor2">&nbsp;</div>
    <div class="palettecolor3">&nbsp;</div>
    <div class="palettecolor4">&nbsp;</div>
    <div class="palettecolor5">&nbsp;</div>
    <div class="palettecolor6">&nbsp;</div>
    <div class="palettecolor7">&nbsp;</div>
    <div class="palettecolor8">&nbsp;</div>
  </div>
</div>

Please signup or login to give your own answer.

Click here to cancel reply.

Html – I need help aligning and resizing a variable number of div elements to a specific pixel value (600px in this case)

Answers