I have set up a color palette as a set of responsive divs using W3school's Responsive HTML tutorial as a part of a large set of "details" elements under "visual media" on my robotics team's website. Currently if you open the color palette it forces the "details" elements below it to move right to line up with it's right edge. I would like them to move to stay below it without brute forcing it with &NBSP; or <br> so that if the window size changes the details elements will move up and down as the palette expands and contracts.
HTML:
<!--color palette--><details class="indent1"><summary>Color Palette</summary>
<div id="wrapper" class="palletewrapper">
<div class="palette" style="background-color:#4169E1;"><p>Power Hawk Blue<br> Hex: 4169E1 <br> RGB: R: 65, G: 105, B: 225 <br> CMYK: C: 71, M: 53, Y: 0, K: 12 <br> Pantone: PMS 7683C</p></div>
<div class="palette-light" style="background-color:#FFFFFF;"><p>White<br>Hex:FFFFFF<br>RGB: R: 255, G: 255, B: 255<br>CMYK: C: 0, M: 0, Y: 0, K: 0<br>Pantone: #9063 C</p></div>
<div class="palette" style="background-color:#2f3f58;"><p>Dark Blue<br>Hex: 2f3f58<br>RGB: R: 47, G: 63, B: 88<br>CMYK: C: 47, M: 28, Y: 0, K: 65<br>Pantone: PMS 432C</p></div>
<div class="palette-light" style="background-color:#9eb0c9;"><p>Slate Blue<br>Hex: 9eb0c9<br>RGB: R: 158, G: 176, B: 201<br>CMYK: C: 21, M: 12, Y: 0, K: 21<br>Pantone: PMS 536C</p></div>
<div class="palette" style="background-color:#c74f4f;"><p>Power Hawk Red<br>Hex: c74f4f<br>RGB: R: 199, G: 79, B: 79<br>CMYK: C: 0, M: 60, Y: 60, K: 22<br>Pantone: PMS 7418C</p></div>
<div class="palette-light" style="background-color:#f0ebe7;"><p>Cool Gray<br>Hex: f0ebe7<br>RGB: R: 240, G: 235, B: 231<br>CMYK: C: 0, M: 2, Y: 4, K: 6<br>Pantone: PMS 663C</p></div>
<div class="palette" style="background-color:#000000;"><p>Black<br>Hex: 000000<br>RGB: R: 0, G: 0, B: 0<br>CMYK: C: 0, M: 0, Y: 0, K: 100<br>Pantone: #6 C</p></div>
</div>
</details><!--color palette-->
CSS:
.palette-light{
float: left;
margin: 5px;
padding: 15px;
width: 175px;
height: 175px;
border: 1px solid black;
color:black;}
.palette{
float: left;
margin: 5px;
padding: 15px;
width: 175px;
height: 175px;
border: 1px solid black;
color:white;}
#wrapper {
width: auto;
margin: 0 auto 0 auto;
}
it forces the "details" elements below it to move right
If you are referring to the links listed under 'Other Resources' then one solution would be to apply a clearfix solution to the div wrapping the Color Palettes.
Target this div then apply the following CSS
details.indent1:before,
details.indent1:after {
content: " ";
display: table;
}
details.indent1:after {
clear: both;
}
Hope this helps!