CSS - Ensuring that the height of one div extends all the way down to meet another div

I'm facing an issue with two divs in my design. One of them contains a checkbox and the other has text which can vary in size - sometimes it's small, sometimes it's large. When the text in the second div is big, the box on the left extends all the way down to make up for the height difference if I didn't set its height attribute to 100%. However, this leads to a problem.

http://jsfiddle.net/4odLkzby/

You can see in the example how the left div extends beyond its boundaries and overlaps with the .reply div below it. How do I go about fixing this issue?

For better clarity, refer to the graphic below:

htmlcss

Answer №1

Demonstration - Check it out here

Include the CSS attribute position: relative to the parent element (.reply).

Answer №3

Take a look at this amazing CSS code snippet!

Cascading Style Sheets

.reply {
background: #E8E8E8;
font-family: "Helvetica Neue",Helvetica;
font-size: 15px;
color: #333;
text-shadow: 0px 0px 0px;
cursor: pointer;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#hovering-icon {
background: rgb(53, 107, 138);
color: white;
}
.hovering-answer {
background: rgb(71, 135, 172);
color: white;
overflow:hidden;
}
.reply > .icon-wrap {
background: #C4C4C4;
padding: 5px;
position: absolute;
overflow: hidden;
}
.answer-wrap {
margin-bottom: 10px;
}
.text-wrap {
padding: 7px 5px 7px 40px;
font-family: 'Helvetica', serif;
}
.icon-wrap {
    width: 30px;
    text-align: center;
    height: 100%;
}

Check out the code in action on jsfiddle

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

What advantages do constant variables offer when selecting DOM elements?

What is the significance of declaring variables as constant when selecting elements from the DOM? Many developers and tutorials often use const form = document.querySelector('form'); ...

javascripthtmldom

Creating a dynamic background image with automatic cropping techniques: How to do it?

I'm currently working on a custom wordpress theme and I've encountered an issue that I need help with. I want to have a wide background image on my homepage with text centered on it, but I also want the height to remain the same as the browser w ...

cssimagebackgroundresponsive

Steps for embedding PHP files into HTML code

Within my htdocs directory, I have a folder named "try" where I connected a PHP file to an HTML file. However, the PHP file is not being included properly. Could there be an issue with my code? <?php include 'init.inc.php'; ?> Both the ...

phphtmlxampp

Error encountered during PHP GET submission

I am currently working on a PHP page where users can select a season and episode from a form, which will then be sent to a page to play the selected episodes. Below is the form: <form action="view" method="get"> <select> <option name="s" ...

phphtml

"Creating a navigational bar using Bootstrap in a one-page application

I am facing an issue with Bootstrap's navbar in my single-page application. The dropdown navigation menu for mobile is not collapsing properly after clicking. Although I tried to fix it by adding data-toggle="collapse" data-target="#navbar" attributes ...

htmlcsstwitter-bootstrap

Showcasing images that vary between mobile and desktop views using Bootstrap 4

I have a website where I display 6 columns of images in a row using Bootstrap 4. However, I want to adjust the layout so that when viewed on mobile devices with a smaller screen width, the images are displayed in rows of 4 or 3 columns instead. <link ...

htmlbootstrap-4

Turn off the perpetual active mode

I have a situation where a link maintains its active state after being dragged and released. This is causing an issue that I need to address. For example, you can see the problem here: http://jsfiddle.net/Ek43k/3/ <a href="javascript:void(0);" id="foo ...

javascriptcss

The significance of the "$=" or "?=" symbols in lit-element illustrations

I'm struggling to comprehend the purpose of ?= or $= in these two instances: First Example: Lit-Element README <div id="box" class$="${this.uppercase ? 'uppercase' : ''}"> <slot>Hello World</slot> </div> ...

javascripthtmlweb-componentlit-element

Location tracking functions only operational when using the local host

I managed to successfully integrate geo-location on my website while testing it on localhost. But, when I uploaded the website to an online server, I encountered a problem. I started receiving a bool(false) error message. Geo.php <?php class G ...

phpjqueryhtmlgeolocation

Import information from a MySQL table into a single input field

I am currently working on a project that involves retrieving data from a MySQL database and displaying it in a single field. Below is the MySQL code I am using: My goal is to load all the data from $row['db_numbers']; into the field. <input t ...

phphtmlmysql

Personalizing the share button by changing the icon font to an image

I've been working on incorporating this share button into my website.... Although it functions properly as is, I want to switch out the icon font for an image. I attempted to modify certain CSS properties, but encountered some issues. http://jsfidd ...

jqueryhtmlcss

JavaScript code that deletes text from a document - Script eradication

I am trying to display the message "Todays Beer Style is: "Beer Style". However, when I add the javascript code, the "Todays Beer Style is:" text disappears. I'm not sure why this is happening. Below is the HTML code for reference. HTML Code <!DO ...

javascripthtml

Confirm the email address using the autocomplete feature in the field

I'm currently utilizing Material UI to design an autocomplete field with multiple inputs that gives users the option to either choose from existing email addresses or input their own. An example of what I'm trying to achieve can be seen here: ht ...

javascripthtmlreactjsmaterial-ui

Load pictures featuring a designated title

I have a collection of images stored in different categories: image-1-1.jpg image-2-2.jpg image-2-3.jpg image-2-4.jpg image-2-5.jpg image-3-1.jpg image-3-2.jpg image-3-3.jpg ... In addition, I also have links that correspond to each category: link 1 link ...

javascripthtmlimage

Stacking parent elements above children in CSS styling

I am encountering an issue with the following DIV structure: <div id="parent"> <div id="child"></div> <div id="child2"></div> </div> My goal is to have a partially opaque background for the parent DIV and fully visible ...

css

What is causing IE10 to display such a drastically different appearance?

I am currently implementing a cool image fade swap effect using CSS and JQuery along with an image sprite. JQuery: <script type="text/javascript> $(document).ready(function() { $('.otherbutton').append('<img class="hov ...

jqueryhtmlcss

Refresh the HTML content as soon as a modification is detected in the MySQL Database

Apologies if this sounds like a basic question, but I've hit a roadblock in my search for answers on the vast expanse of the internet... I am in the process of constructing a website that requires certain data on the page to be updated automatically. ...

phpmysqlajaxhtml

Stop iPhone body scrolling when fullscreen overlay is opened

My goal is to prevent the body from scrolling when my fullscreen overlay navigation is open. I have added a class show-nav to the body with the CSS attribute overflow: hidden, which works perfectly on desktop but not on iPhones. After researching similar ...

jqueryhtmlioscssiphone

Aligning a picture at the center of the screen with CSS - Various screen and image sizes

For my project, I need to design a web page with a single image perfectly centered both vertically and horizontally on the screen. Here are the specific requirements: The client's screen size is unknown (mobile) The image will be user-defined with u ...

javascriptcssenyo

Unveiling the method to retrieve XML tag based on the attribute of its parent element

This snippet is a segment of XML code: <?xml version="1.0"?> <menu> <pizzas> <pizza number="0"> <title>Tomato &amp; Cheese</title> <small>550</small> <medium></medium> <large> ...

phphtmlxmlxpathattributes