Tips for Expanding the Height of a Parent Div to Fill Its Containing Parent

I am experiencing some difficulty with a seemingly simple task.

My goal is to have the lime-colored background expand and fill 100% of the current height of its parent container (in this case, the magenta-colored section). Here is a live example:

https://jsfiddle.net/L973mmva/

Below is the code snippet:

<div style="width:100%;">
    <div style="margin: 0 auto; width: 80%; background-color:magenta;">

        <div style="display:inline-block; float:left; width:25%;">
            <img src="http://www.bjbzryl.com/data/out/7/780401.jpg" style="width:100%;" />
        </div>

        <div style="display:inline-block; float:left; width:73%; margin-left:2%; background-color:lime;">
            <p style="float:left; display:inline-block; margin:2% 2% 2% 2%;">blah blah blah</p>
        </div>


        <div style="clear:both;"></div>

    </div>
</div>
htmlcssresponsive

Answer №1

By utilizing flex, the height of the flex children will automatically match that of the parent container, eliminating the need for inline-block, float, and any clearfix code.

<div style="width:100%;">
  <div style="margin: 0 auto; width: 80%; background-color:magenta; display: flex;">

    <div style="width:25%;">
      <img src="http://www.bjbzryl.com/data/out/7/780401.jpg" style="width:100%;" />
    </div>

    <div style="width:73%; margin-left:2%; background-color:lime;">
      <p style="float:left; display:inline-block; margin:2% 2% 2% 2%;">blah blah blah</p>
    </div>

  </div>
</div>

Answer №2

It's more efficient to utilize flexbox instead of floating elements:

<div style="margin: 0 auto; width: 80%; background-color:magenta;display:flex;">
    
    <div style="width:25%;display: inline-block;">
    <img src="http://www.bjbzryl.com/data/out/7/780401.jpg" style="width:100%;">
    </div>
    
    <div style=" margin-left:2%; background-color:lime; flex: 1;">
    <p style="float:left; display:inline-block; margin:2% 2% 2% 2%;">blah blah blah</p>
    </div>
    
    
    <div style="clear:both;"></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

Creating a form in PHP with the power of JavaScript, AJAX, and jQuery

I have successfully created a registration form using HTML, processed the data with PHP, and utilized javascript, ajax, and jquery. However, I am facing an issue where I want to display a notification stating whether the operation was "inserted/failed" on ...

javascriptphpjqueryhtmlajax

Converting the Google logo to grayscale for the Google Translate button

Is there a simple way for a non-coder like myself to change the colors of the Google Logo in the Google Translate Button to grey scale instead of its usual bright shades? Below is the embed code I am using: <div id="google_translate_element"></di ...

htmlembedgoogle-translate

Struggling to fetch a basic form field input using node.js and express

Currently, I am delving into Node.js with express and web development. For my inaugural project, I aim to craft a directory listing application. In my quest, I stumbled upon a captivating HTML form. Here's a snippet of the form's code: <form a ...

htmlnode.jsexpress

transmit static information using a form

I'm currently working on sending data from one page of my website to another. It seems like using an HTML form with the action attribute set to the destination would be the way to go. <form method="POST" action="/destination"> <input ty ...

phphtmlforms

Issue with offset calculation in bootstrap table occurs when the bootstrap-table is closed and the window is resized

In a recent project, I utilized the bootstrap table. However, upon closing the bootstrap table with the following script: $(document).ready(function () { $(".removetable").click(function (e) { $(".table-aria").remove(); ...

javascripthtmljquerybootstrap-5bootstrap-table

Tips for displaying and hiding content in Angular2

I have a component that toggles the visibility of elements by clicking a button. This is the snippet of my HTML code: <div *ngFor="let history of histories | sortdate: '-dateModified'"> <p><b>{{ history.remarks }}</b& ...

htmlangular

Tips for identifying the visibility of one element out of two with Selenium

I'm stuck on detecting the visibility of elements in Selenium and could use some guidance. Specifically, I have a search field and a results list, with "No Results Found" displayed if nothing is found. My goal is to determine when either the list is n ...

htmlpython-3.xselenium-webdriver

What is the best way to initiate a Bootstrap carousel so that it begins with the first image every time a modal window appears

I am in the process of creating my own portfolio to showcase my work. I have implemented a feature where clicking on an image opens up a Bootstrap carousel. However, I'm facing an issue where the carousel doesn't always start with the first imag ...

javascripthtmlcsstwitter-bootstrapcarousel

"What is the best way to use JavaScript to dynamically modify the hover color of a button

I am looking to customize the hover color of all buttons on my website to align with the overall theme. The challenge is that I need the hover color to vary based on the page it originates from. I have successfully identified the referring page, but I am s ...

javascripthtmlcss

Adding specific tag attributes to user input in PHP

When accepting user input for a post, I want to allow users to include <a href=""></a> tags. However, I need to insert a class like <a class="user" href=""></a> if any <a> tag is included in the post before saving it to the da ...

phphtmlanchor

Hamburger must be used in order for the menu to be displayed

Whenever I visit the site, the menu remains hidden. However, when I resize the page and use the hamburger icon, the menu appears as expected. Even after resizing the page back to its original size, the menu continues to be visible. Refreshing the sit ...

htmlcss

Responsive HTML CSS Div with Bootstrap styling

Currently, I have some div elements that display nicely on desktop and tablet devices. However, the issue arises when the view is switched to mobile, as the elements appear disorganized and do not adjust appropriately. My goal is to have these elements au ...

jqueryhtmlcsstwitter-bootstrap

The issue with the Material UI Drawer component is that it is casting a shadow even when

Having some trouble with the Material UI Drawer component. Whenever I try to display it on my webpage, it automatically focuses on the inner div, adding a shadow or border if the focus is anywhere else. Does anyone know why this shadow appears and how to r ...

htmlcssreactjsmaterial-uiz-index

How can I access an InputStream from a local XML file in a PhoneGap application?

Looking for advice on how to fetch an inputstream from a local XML file using JavaScript in my PhoneGap application. I'm new to JavaScript, so any guidance would be appreciated! ...

javascripthtmlcordova

Prevent clicking on a specific column in a table using Jquery

Attempting to utilize Jquery for clicking on a table row in order to navigate to a new page. However, encountering an issue with the last column containing a button that redirects to a new page when clicked on the edge. Is there a way to disable the oncl ...

javascripthtmljqueryjsp

"Enhancing Layouts with Bootstrap: Implementing Spacing Between

Is there a way to add additional margin space between columns in my Bootstrap grid layout? I attempted to use a custom CSS class like this .classWithPad { margin: 10px; padding: 10px; } However, this did not resolve my issue. I also experimented w ...

htmlcsstwitter-bootstrapbootstrap-4

What is the best way to end a table row after every group of four items?

I am working with a Handlebars template to display an array of movies in a table with four columns. Currently, I have set up a HBS helper in my code: app.engine('handlebars',exphbs({ defaultLayout: 'main', helpers: { n ...

javascripthtmlnode.jsexpresshandlebars.js

What's the best way to expand the right side of .li following a left offset of -20px

My nested list structure looks like this... https://i.sstatic.net/sggVx.png What you see is a recursive ul/li setup... <div class="family d-block"> <span class="pb-2"> <small class="text-muted">Family:</small><br> < ...

htmlcsstwitter-bootstraplistbootstrap-4

Show a picture without specifying its file location

Looking for Suggestions on a New Title I am interested in using a script as the source attribute for an image, like this : <img src="img.js"/> Note: I am open to using any programming language, whether it be javascript or php. Here is what my fol ...

javascriptphphtml

The fixed div is always positioned in the top corner

My webpage has a 'Book Now' button that remains at the top of the viewport with a 10px gap. However, due to the parent element having a height of 100%, the button scrolls out of view once the viewport surpasses that height. To see an example, cli ...

htmlcss