Home/ Questions/Q 7991941
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-04T13:26:07+00:00

2 div’s. HTML and CSS only. Specified in the CSS that the second div

  • 0

2 div’s. HTML and CSS only.

Specified in the CSS that the second div is positioned to the right of the first div.

The heading of the second div is there, where expected but not it’s check boxes.

Why aren’t the second div’s check boxes in the same area?
(They more under the first divs, to the left….?)

Any help is greatly appreciated.

Code in JsFiddle: http://jsfiddle.net/GregMcNulty/2mQ7k/

<html>
    <head>
        <style type="text/css">
            #checkbox1
            {
                display:inline;
                position:relative;
                top:1in;
                left: .5in;                              
            }
            #checkbox2
            {
                display:inline;
                position:relative;
                top:1in;
                left: 1.5in;                
            }   
        </style>    
    </head>
<body>   

      <form>

        <div id="checkbox1">
            Please select the Clamps you are interested in:
        </div>

        <div id="checkbox2">
            Please select the Revets you are interested in: <br />
            <input type="checkbox" name="Solid" /> Solid <br />
            <input type="checkbox" name="Cherry" /> Cherry lock <br />
            <input type="checkbox" name="PopRivets" /> PopRivets <br />
            <input type="checkbox" name="Rivnuts" /> Rivnuts <br />
            <input type="checkbox" name="Huck" /> Huck Clinch
        </div>


    </form>

</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You have your divs inline I suspect what you actually wanted was inline-block, also vertical align them so they have the desired alignment.

            #checkbox1
        {
            display:inline-block;
            vertical-align:top;
            position:relative;
            top:1in;
            left: .5in;                              
        }
        #checkbox2
        {
            display:inline-block;
            vertical-align:top;
            position:relative;
            top:1in;
            left: 1.5in;                
        }

    FIDDLE

    • 0