Create a layout that includes options with checkboxes and divs styled inline

I'm in the process of setting up a voting poll on a website.

The poll needs to be presented as a radio button followed by a <div> that contains all relevant poll details. In this <div>, I want the option text to appear on the left and the percentage on the right. Below is a simple visual representation of how I want the layout to look:

/---------------------------------------------------\
|/-------\/----------------------------------------\|
||       ||/------------------------\/------------\||
|| Radio ||| Option text            || Percentage |||
||       ||\------------------------/\------------/||
|\-------/\----------------------------------------/|
\---------------------------------------------------/

I've almost achieved this (I believe!), but the widths are off, with the radio button taking up too much space. Ideally, they should only take up necessary width, while the <div> housing additional data occupies the remaining space to the right.

Does anyone have any suggestions on how I can adjust my CSS/HTML code to achieve the desired layout?

You can access the code here - http://jsfiddle.net/D4cqL/

htmlcsslayout

Answer №1

To ensure proper alignment, make sure to set a width for your display container:

.poll .poll-option-container .poll-option-display-container {
    margin: 0 0 0 10px;
    float: right;
    width:93%;
}

In addition, adjust the line-height of the checkbox container for vertical alignment:

.poll .poll-option-container .poll-option-checkbox-container {
    height: 36px;
    line-height:36px;
    overflow: hidden;
    padding-right: 1px;
}

Feel free to check out this FIDDLE for reference.

Answer №2

.poll-option-checkbox-container input {
    padding-top: 17px;
}

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

Acquire the model from a field within an Angular Formly wrapper

I'm in the process of designing a wrapper that will exhibit the model value as regular text on the page. Once the mouse hovers over this text, it transforms into a Formly field, which works perfectly fine. However, I'm encountering an issue where ...

javascripthtmlangularjsangular-formly

Looking to transform a PHP output value

I have a form with checkbox input, and a hidden 'sibling' input attached to it, in order to generate values of either '0' or '3' based on the checkbox status. When unchecked, the value is '0', and when checked, the ...

javascriptphphtmlforms

In Internet Explorer 8, the Radmenu hover menu may appear below surrounding Radmenus

Utilizing a radmenu, I am able to dynamically generate a submenu structure by examining folders in sharepoint document libraries. However, when placing multiple controls on the page, the root menu from other controls overlaps with the submenu of the curren ...

htmlcssinternet-explorertelerik

When the input field is cleared, JavaScript will not be able to recognize its contents

Having an issue with my function that fetches results, <script language="javascript"> function fetchResult(value){ url="ajax_fetch.php?st=usr&q="+value; ajax(url); } fetchResult(" "); </script&g ...

javascriptphphtml

Transform the € entity (which is stored in the database) into the € (Euro Symbol) within FPDF PHP

My MySQL database stores the euro symbol as "€", but when I display it in HTML, it shows as "€". Is there a way to convert "€" back to "€"? Here is the code snippet: function GetRate($NoPo){ global $dbname; $String = "SELECT ".$db ...

phphtmlmysqlinternationalizationfpdf

Identifying CSS on iPhone and iPad: A Guide

I need to adjust the CSS style based on different devices. This is how I currently have it set up: <link rel="stylesheet" type="text/css" href="@Url.Content("~/Content/Destop.css")" media="only screen and (min-width: 1224px)"/> <link rel="s ...

htmlcss

Is there a way to adjust the time font size according to the dimensions of the time picker?

HTML and CSS .pickthetime { height: calc(var(--vh, 1vh) * 3); width: calc(var(--vw, 1vw) * 25); align-content: center; // center looks better, also tried left to stop it from breaking a new line on Safari on iOS font-weight: 300; } <input cla ...

javascripthtmljquerycssresponsive-design

Crash in the Android WebView of the Galaxy S3 device due to Signal 11 SIGSEGV

My Android WebView is experiencing issues with memory access and crashes on a Galaxy S3 running Android 4.0.4. The HTML5 content includes interactive battles where enemies appear for the user to slash, interspersed with normal HTML pages. Despite the use o ...

androidhtmlwebviewsegmentation-faultgalaxy

Tips for updating the color of a table row when it is chosen and a row is inserted using ajax

I have successfully added table rows dynamically through ajax in MVC C#. Now, I am looking to change the color of a selected row. This effect works well on the table with rows generated in the HTML view. <div class="col-lg-6 col-sm-12"> ...

c#jquerycssajaxasp.net-mvc

A duo of adjacent buttons styled with HTML, CSS, and Bootstrap

I'm encountering an issue with the layout of my design. On my product page, I have two buttons placed on top of each other because one is within a form (refer to the image). https://i.sstatic.net/cS9TI.jpg I would like to position the two buttons s ...

htmlcsstwitter-bootstrapbootstrap-4

What is the best way to show real-time values using chart js?

Just recently, I've delved into the world of web development and am eager to learn how to integrate chart js for real-time value display. Could anyone offer advice or guide me through the process? var data = []; var temp = []; async f ...

javascripthtmlnode.jsejs

JQuery integration resulting in disappearance of Input-group-btn element

Allow me to explain my current project. I am in the process of developing a Modal that enables users to input a password There will be an option to toggle between showing or hiding the text in the password field using a button positioned on the right sid ...

javascriptjqueryhtmlcsstwitter-bootstrap-3

Using Express to Deliver Static Content to Subdirectories

I am currently using Express to serve a React application that was bootstrapped with Create React App. The project has the following directory structure: |--client/ | |--build/ | | |--static/ | | | |--main.css | | | |--main.js | ...

javascripthtmlreactjsexpress

Is there a way to convert HTML into a structured DOM tree while considering its original source location?

I am currently developing a user script that is designed to operate on https://example.net. This script executes fetch requests for HTML documents from https://example.com, with the intention of parsing them into HTML DOM trees. The challenge I face arise ...

javascripthtmldomparser

Utilizing the text field feature within Twitter Bootstrap 3.0 in-line styling

I am attempting to create a horizontal form with an inline text field split into two sections: one on the left and one on the right. The left side will contain horizontal text fields, some of which are inline, while the right side will have a mix of inline ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

Looping through items with ng-repeat and creating a submenu with M

When constructing a menu from a JSON file with submenus using the JQuery.mmenu plugin, I encountered an issue when trying to implement the submenu structure with ng-repeat. The raw HTML approach worked perfectly, but as soon as I introduced ng-repeat to dy ...

javascriptjqueryhtmlangularjsmmenu

How can I remove the arrow from a CSS selector?

I'm looking to enhance the appearance of a select element on my webpage, so I've crafted some custom CSS: .selectWebDropDown { background-color:Transparent; background: url(../Images/ddl_Normal.png) no-repeat right #FFFFFF !important; ...

htmlcss

Display text with a hover effect

When I hover over an image, I want to display some text. I managed to make it work, but the text was expanding the size of the card. To solve this issue, I added a display none to the text class. I can't include all the code here, so here's a sn ...

htmlcssbootstrap-4

Leverage XMPP with the power of HTML5

I have been intrigued by the integration of xmpp (Extensible Messaging Presence Protocol) with html5 and javascript. How can one implement an xmpp chat in html5? ...

htmlxmpp

"Enhance your website with a sleek Bootstrap navigation system featuring dividers and

Need help with creating a Bootstrap nav menu similar to this design made in Photoshop? Wondering about the best way to position the logo and create dividers between menu items like shown in this image. Here's the HTML code currently being used: & ...

javascriptjqueryhtmlcsstwitter-bootstrap