Faced with such a problem as transferring blocks to a new line. Aligned them to the string with the command float: left; It is necessary to divide them into groups, 3 per line.
How rational is to make a transition to a new line, and then add a bunch <br> somehow not beautiful?
Everything looks at the moment like this:

 div.image1 { float: left; margin-left: 5px; } div.image2 { float: left; margin-left: 5px; } div.image3 { float: left; margin-left: 5px; } 
 <p>Pick materials</p> <div class="color-params" id="col-params" style="display: block;"> <p> Choose a color </p> <div class="image1"> <div id="image001"> <img src="\Users\cruel\Desktop\htmllll\color1.jpg" width="80"> <div class="select-image"></div> </div> <p> <input type="radio" name="col" class="radio" id="radio-001" value="001"> "color1" </p> </div> <div class="image1"> <div id="image002"> <img src="\Users\cruel\Desktop\htmllll\color2.jpg" width="80"> <div class="select-image"></div> </div> <p> <input type="radio" name="col" class="radio" id="radio-002" value="002"> "color2" </p> </div> <div class="image1"> <div id="image003"> <img src="\Users\cruel\Desktop\htmllll\color3.jpg" width="80"> <div class="select-image"></div> </div> <p> <input type="radio" name="col" class="radio" id="radio-003" value="003"> "color3" </p> </div> </div> <div class="elbow-params" id="el-params"> <div class="image2"> <div id="image004"> <img src="\Users\cruel\Desktop\htmllll\elbow1.jpg" width="80"> <div class="select-image"></div> </div> <p> <input type="radio" name="elb" class="radio" id="radio-004" value="004"> "elbow1" </p> </div> <div class="image2"> <div id="image005"> <img src="\Users\cruel\Desktop\htmllll\elbow2.jpg" width="80"> <div class="select-image"></div> </div> <p> <input type="radio" name="elb" class="radio" id="radio-005" value="005"> "elbow2" </p> </div> <div class="image2"> <div id="image006"> <img src="\Users\cruel\Desktop\htmllll\elbow3.jpg" width="80"> <div class="select-image"></div> </div> <p> <input type="radio" name="elb" class="radio" id="radio-006" value="006"> "elbow3" </p> </div> <div class="wheel-params" id="whl-params" style="display:block;"> <div class="image3"> <div id="image007"> <img src="\Users\cruel\Desktop\htmllll\wheel1.jpg" width="80"> <div class="select-image"></div> </div> <p> <input type="radio" name="whl" class="radio" id="radio-007" value="007"> "wheel1" </p> </div> <div class="image3"> <div id="image008"> <img src="\Users\cruel\Desktop\htmllll\wheel2.jpg" width="80"> <div class="select-image"></div> </div> <p> <input type="radio" name="whl" class="radio" id="radio-008" value="008"> "wheel2" </p> </div> <div class="image3"> <div id="image009"> <img src="\Users\cruel\Desktop\htmllll\wheel3.jpg" width="80"> <div class="select-image"></div> </div> <p> <input type="radio" name="whl" class="radio" id="radio-009" value="009"> "wheel3" </p> </div>

    1 answer 1

    Add in CSS block that should be on the new line clear: both;

     .image1:first-child, .image2:first-child, .image3:first-child { clear: both; }