How can I align a group of four checkboxes in HTML?

Code for HTML

<div  id=checkbox>
    <div id=groupfour>
        <div id=groupone>
            <input type="checkbox"  checked="checked" name="Mapmashup" value="Jan" id="EJan">
            <label>Jan </label>
        </div>
        <div id=groupone>
            <input type="checkbox"  checked="checked" name="Mapmashup" value="Feb" id="EFeb">
            <label>Feb</label>
        </div>
        <div id=groupone>
            <input type="checkbox"  checked="checked" name="Mapmashup" value="Mar" id="EMar">
            <label>Mar</label>
        </div>
        <div id=groupone>
            <input type="checkbox"  checked="checked" name="Mapmashup" value="Apr" id="EApr">
            <label>Apr</label>
        </div>
    </div>

    <div id=groupfour>
        <div id=groupone>
            <input type="checkbox"  checked="checked" name="Mapmashup" value="May" id="EMay">
            <label>May</label>
        </div>
        <div id=groupone>
            <input type="checkbox"  checked="checked" name="Mapmashup" value="Jun" id="EJun">
            <label>Jun</label>
        </div>
        <div id=groupone>
            <input type="checkbox"  checked="checked" name="Mapmashup" value="Jul" id="EJul">
            <label>Jul </label>
        </div>
        <div id=groupone>
            <input type="checkbox"  checked="checked" name="Mapmashup" value="Aug" id="EAug">
            <label>Aug</label>
        </div>
    </div>

CSS Code

#groupfour
{
    position:relative;
    vertical-align: bottom;
}

I need to organize my checkboxes into groups of four in three rows. This setup will display the months vertically. Removing the internal div affects the alignment of checkboxes across all three rows.

Answer №1

Take a look at this JSBIN link

This is an extremely simple method to achieve the desired outcome.

Answer №2

Previously utilized white-space:nowrap along with display:inline-block;

similar to this

#groupfour{
white-space:nowrap;
}

#groupfour #groupone{
display:inline-block;
}

Preview

Preview-2

Answer №3

To achieve this, you can use CSS styling.

<style>
.groupone{
    float: left;
}
.groupfour{
    clear: left;
}
</style> 

Furthermore, if you are targeting the same div simultaneously, make sure to change all 'id' attributes to 'class'.

<div class="groupfour">
                <div class="groupone">
                    <input type="checkbox"  checked="checked" name="Mapmashup" value="Jan" class="EJan">
                    <label>Jan </label>
                </div>
                <div class="groupone">
                    <input type="checkbox"  checked="checked" name="Mapmashup" value="Feb" class="EFeb">
                    <label>Feb</label>
                </div>
                <div class="groupone">
                    <input type="checkbox"  checked="checked" name="Mapmashup" value="Mar" class="EMar">
                    <label>Mar</label>
                </div>
                <div class="groupone">
                    <input type="checkbox"  checked="checked" name="Mapmashup" value="Apr" class="EApr">
                    <label>Apr</label>
                </div>
            </div>

            <div class="groupfour">
                <div class="groupone">
                    <input type="checkbox"  checked="checked" name="Mapmashup" value="May" class="EMay">
                    <label>May</label>
                </div>
                <div class="groupone">
                    <input type="checkbox"  checked="checked" name="Mapmashup" value="Jun" class="EJun">
                    <label>Jun</label>
                </div>
                <div class="groupone">
                    <input type="checkbox"  checked="checked" name="Mapmashup" value="Jul" class="EJul">
                    <label>Jul </label>
                </div>
                <div class="groupone">
                    <input type="checkbox"  checked="checked" name="Mapmashup" value="Aug" class="EAug">
                    <label>Aug</label>
                </div>
            </div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

navigating to the start of a hyperlink

I'm having issues with scrolling to anchors and encountering 3 specific problems: If I hover over two panels and click a link to one of them, nothing happens. When I'm on section D and click on section C, it scrolls to the end of section C. ...

Is it possible to add animated text using anime.js?

var elements = document.querySelectorAll('.content'); anime({ targets: elements, content: 100, }); <script src="https://raw.githubusercontent.com/juliangarnier/anime/master/lib/anime.min.js"></script> <span class="content"> ...

Is it possible to load babel-polyfill using <script async> tag?

I have created a modal dialog on my webpage that appears when certain interactions occur. Utilizing React, I used webpack to generate a compact bundle that can be added to my page using a script tag. Since it incorporates Generators and needs to support ...

What could be causing the svg to not be visible inside the div?

I am struggling to display an SVG element within a div as it is not visible at all. Can someone help me make the SVG visible in the div? Here is a link to the code: http://codepen.io/helloworld/pen/HjkhK <div style="height:100px;background:yellow;"> ...

Unable to impose a restriction on the number input field limit

My input field has a type of "number" with the min and max attributes applied to limit user input. However, I am facing an issue where users can still enter values beyond the set limit. How can I prevent users from entering values above the specified lim ...

Is there a way to align text without any vertical spacing between lines?

Is there a way to remove the space between these two text boxes? https://i.sstatic.net/MFkuQ.png I attempted using a container with display:flex; in it, but that caused the text to be off-center. body { background-color: lightblue; } h2 { color: ...

When I separate the div into its own line in the HTML/CSS code, the behavior changes significantly

I'm encountering an issue with my HTML/CSS structure: .im-wrapper { width: 100%; height: 100%; position: fixed; overflow: hidden auto; top: 0; left: 0; } .im-backdrop { background-color: var(--darkblack); opacity: 80%; width: 1 ...

React does not recognize the use of `.css` or `.scss` files for styling

Recently, I encountered an issue with my React code where inline styles were working fine: render() { return ( <div style={{ fontSize: 48 }}>LOLOLO</div> ) } However, when I tried using index.css (which defines .me { font-size ...

Can you point out the syntax error in my flex code?

I'm attempting to redesign my layout grid using flex. It seems that the flex code I commented out is incorrect, possibly due to an issue with setting the width in my .container class. The grid auto property adjusts the columns automatically within my ...

Update the positioning of the element to center instead of the default top left origin using jQuery

I am facing an issue with positioning a marker inside a triangle, which is represented by a simple div, as shown in the image below: https://i.stack.imgur.com/0Q7Lm.png The marker needs to be placed exactly at the centroid of the triangle. However, it see ...

Div modal no longer scrolling along with the rest of the page

One of the challenges I'm facing is integrating a html/css modal on my webpage, which can be accessed via this link: The issue arises when trying to utilize the main scroll bar on the page in order to navigate downwards and view the remaining content ...

Looping through elements with jQuery's `each` method within another `

When using div containers in my code, I wanted to loop over them and then iterate through the items within each container. Instead of $('.stackContainer .stackItem').each(, I was looking for a solution like this: // setup stacks $('.stackC ...

Visual button spacing

There is no CSS styling applied to the page. When two image buttons are placed in separate lines of code like this: <asp:ImageButton ID="btnVoteUp" Height="16px" Width="16px" runat="server" ImageUrl="images/thumbs_up.gif" CausesValidation="false" Co ...

Transform a span into a div while retaining its content and styles, ensuring compatibility with Internet Explorer

Is there a reliable JavaScript method to convert a span into a div while preserving its contents and the original classes of the span? The classes are pre-set, so hardcoding should be possible. <span class="my class"> <p class="conten ...

What's causing the text not to wrap when using float?

I've tried setting float:left for the image and float:right for the text, but the image is still overlapping the text. What I really want is for the text to wrap around the image - to be on the right side of the image at the beginning and below the i ...

The functionality of jQuery .rotate() appears to be malfunctioning

I'm struggling to get this code working properly. My jQuery version is 2.1.0. Here's the code snippet: $("a.shownav img").rotate(180); Any suggestions on how to make it function correctly without relying on a plugin? ...

Is the isPointToPath function unreliable in JS/CANVAS/HTML?

Check out the snippet below for testing purposes. The yellow(y) area represents the canvas, returning "n" upon clicking The red(r) area represents the clickable region, returning "y" upon clicking The trouble(x) area indicates an error, returning "y" wh ...

Tips for organizing and securing downloaded zip files from external websites

I am currently developing an application using CodeIgniter framework. I have a requirement to only download files with a .zip extension and upload them to my local drive. In order to achieve this, I have been provided with a function called get_zip_content ...

Basic animation feature malfunctioning

So, I'm really new to this whole HTML5 canvas thing and I'm trying to make a pixel move across the screen with an additive tail behind it. The idea is for the tail to scroll away once it reaches a certain point while the pixel continues moving. I ...

Display "Temporary Text" in an HTML drop-down list if no selection is made

Is there a way to ensure that the placeholder in an existing select element always remains visible? I noticed that when I select an option and then go back to the blank item, the placeholder disappears. How can I make sure it is always displayed when no ...