How can I maintain text alignment when it wraps around a floated element?

Currently, I am working on a responsive website project. In the example code provided, I have set the width of the container div to a fixed value to highlight a specific issue.

The problem arises when the text wraps onto multiple lines and extends beyond the boundaries of the green box, causing it to lose its indentation. Is there a way to resolve this using only CSS without making changes to the HTML code?

Link to CodePen Example

<div class="cont">
<label for="one">
  <div class="">
    <a href="#" class="check-style">
      <span></span>
    </a>
    <input type="checkbox" class="" value="1" id="one" name="privacy"></div> Ive read <a href="#">document</a>. And I agree. And I agree. And I agree. And I agree. And I agree. And I agree. And I agree. And I agree. And I agree. And I agree. And I agree. And I agree. And I agree. And I agree. And I agree. 
</label>
</div>

.cont {
  width: 400px;  
}

.check-style {
  background: green;
  float: left;
  height: 40px;
  width: 40px;
}

input[type=checkbox] {
  opacity: 0;
  position: absolute;
}

htmlcss

Answer №1

Not the most elegant, but it gets the job done! Update your CSS with the code below:

.cont {
  width: 400px;  
}

label > div {
  height: 70px;
  float: left;
}

.check-style {
  background: green;
  display: inline-block;
  height: 40px;
  width: 40px;
}

input[type=checkbox] {
  opacity: 0;
  position: absolute;
}

View the implementation here

The drawback of this method is the fixed height for the div element

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

Click the toggle ng-press attribute

I have a section with an on-click="..." action. The event slightly adjusts the section's appearance within the document so that it resembles a button. I am looking to switch between making this section clickable and non-clickable in my program. While ...

htmlangularjs

What sets the HTML5 cross-browser compatibility saga apart from that of CSS/JS?

Back when CSS and JS became popular, the major issue was that each browser interpreted them differently leading to limited functionality across different browsers. Now as HTML5 gains traction, it seems like we might be headed towards a similar situation, b ...

javascriptcsshtmlcross-browser

Creating a Stylish Funnel Graph using CSS

I am currently working on customizing a funnel chart based on data from my database that is displayed on the page. Everything is functioning correctly except for the CSS rendering of the chart. <ul id="funnel-cht"> <li style="height:70px;widt ...

htmlcsscharts

Hide the div in PHP if the active variable is null

It looks like I'll need to implement Jquery for this task. I have a print button that should only appear if my array contains data. This is a simplified version of what I'm aiming to achieve: HTML <?include 'anotherpage.php'?> ...

javascriptphpjqueryhtml

What are the advantages of going the extra mile to ensure cross-browser compatibility?

It's fascinating how much effort is required to ensure web applications work seamlessly across all browsers. Despite global standards like those set by W3C, the development and testing process can be quite laborious. I'm curious why all browsers ...

javascripthtmlcsscross-browsercross-platform

The hover effect on <a href element will only activate after clicking or refreshing the page

Having an issue with my website where I'm using HTML and CSS exclusively. The problem arises when I have multiple "a hrefs" that should change their background colors slightly when hovered over. However, whenever I clear the browser cache or go into i ...

htmlcsshover

Strategies for adjusting image components based on various screen sizes

Let's consider a scenario: There is an image nested inside an introductory div for the desktop layout, like so: <div class="intro"> <img id="gambar" src="assets/images/image-intro-desktop.jpg" alt=&q ...

javascripthtmlcss

Is it possible to encounter the issue of "Context Lost" and "Importing multiple instances" in Three.js?

I am in the process of developing a 3D editor that allows users to manipulate a 3D scene and then view the result by pressing a "play" button. In order to display the output, I am utilizing an iframe. Below is the snippet of my HTML code: <iframe id=&qu ...

javascripthtmliframethree.js

Is it possible to assign a predetermined text content to a table cell using a CSS class?

I attempted the following: <style type="text/css"> td.orange : before { background: #DD5F15; content : "TRIPLE";} </style> However, it seems that the content is being added after the closing "td" tag, which is causing it not to display. E ...

htmlcsshtml-table

Discover the steps for integrating an object into a Ext.grid.Panel using Sencha Ext Js

Currently, I am utilizing Sencha Ext Js 4 and have integrated an Ext.grid.Panel into my project. I am interested in adding another element inside the header, such as a textbox. Is this achievable? {filterable: true, header: 'Unique' /*Here i w ...

javascripthtmlextjsextjs4

What could be causing the no-repeat functionality to fail on these background images, and what steps can be taken to prevent the list text from overlapping with the image?

UPDATE EDIT. There is still an unresolved issue with this problem. Although setting the background to no-repeat fixed the image repetition problem, the list item text still overlaps the background image and there is an extra tick to the left. Please refer ...

csshtml-listsbackground-image

Optimizing Your CSS Loading Process for Production Environments

Lately, I've been loading a lot of JS and CSS files in my project. In an effort to boost my site's performance, I decided to use YUICompression integrated with Ant build. After each project build, it automatically creates a minified file by appen ...

javascriptcssantminifyyui-compressor

Enhance the color scheme of your collapsed or expanded Bootstrap NAV for mobile devices

Currently working on customizing the navbar using Bootstrap. I've been able to style it perfectly for both desktop and mobile devices in its initial state. The issue arises when attempting to style the navbar in its expanded and collapsed states on m ...

javascriptjqueryhtmlcsstwitter-bootstrap

PHP script not running as intended

I created an HTML form where users can input values and select options. Once the user has made their selections, these values are then sent to a PHP script on the server. The PHP script retrieves data from a MySQL database based on the user-selected values ...

phpmysqlhtmlajax

Allow the table headers to be flexible and accommodate extended names in the rows

<div class="container"> <div class="table-responsive"> <table class="table" width="100%" > <thead> <tr> <th class= "style6" >Year</th> <th class="styl ...

htmlcss

Developing Angular 6 for dynamic HTML navigation tabs

Being new to Angular 6, I recently created tabs in HTML and now need to convert them into Angular 6 while also making them dynamic. Here is the original HTML code: <ul class="nav nav-tabs side_nav" role="tablist"> <li role="presentation" class= ...

htmlangulartabsangular6

Trying to dynamically filter table cells in real time using HTML and jQuery

During my search on Stack Overflow, I successfully implemented a real-time row filtering feature. However, I now require more specificity in my filtering process. Currently, the code I am using is as follows: HTML: <input type="text" id="search" place ...

javascriptjqueryhtmlfilter

Refreshing a webpage using PHP, Javascript's location.reload, and an HTML input field

I am currently working on a page that executes a MySQL query when a button is clicked. The query results in about 6 columns and approximately 100 rows being displayed. My goal is to allow users to sort the query results by clicking on the column headers, ...

javascriptphphtmlpostreload

HTML allows for the creation of multiple pages within a single file

How can I create nested files that have access to other files? I am working on a website where I use the following code to link different pages: <div class="topnav"> <a href="scenes/home.html">Home</a> <a h ...

html

What are some methods for simulating user interaction on input and button elements?

Here is a code snippet available in this stackblitz demo. Essentially, there is a basic form with an input field and a button. Clicking the button will copy the current value of the input to a label: https://i.stack.imgur.com/pw3en.png after click: htt ...

javascripthtmlangular