0

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;
}
Brendan Jackson
  • 93
  • 1
  • 10

2 Answers2

0

Well it seems to work well for me in Google Chrome. Maybe you have another CSS style conflicting with those elements.

Have you tried to use Firefox's Firebug to see what styles were being applied to elements?

dreamweaver
  • 195
  • 11
  • I have on old version of Chrome. I forgot to look in multiple browsers. Thanks. I have used the chrome debug window and checked the CSS and the problem is nothing I have tried (section, div, etc) has taken uo the space so as to push the other elements down. – Brendan Jackson Jan 13 '16 at 00:11
0

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!

David Taiaroa
  • 25,157
  • 7
  • 62
  • 50