How to use CSS absolute positioning for a div with dynamic height to automatically adjust the container size

I have scoured the internet in search of posts discussing a similar issue to mine, but unfortunately I have not been able to find a solution that brings me closer to resolving it.

As it stands, I am facing a challenge with a DIV setup. I have a Container that encapsulates two DIVs. The first DIV contains a logo that should always be positioned at the top left (positioned relatively). Meanwhile, the second DIV should always begin at the bottom right of the Container and contain varying text content (positioned absolutely).

When the text in the second DIV is short, everything appears fine. However, when the text length increases beyond the size of the logo, it extends outside the top boundary of the Container.

My objective is for the Container to expand along with the absolute DIV as the text grows longer.

To help clarify my issue, I have provided a sample demo in the following fiddle:

[jsfiddle.net/jb3drnb0][1]

Is there something crucial that I am overlooking?

htmlcss

Answer №1

Thank you for your valuable suggestions, they provided me with a new perspective on the issue at hand. Although I initially experimented with floating elements, it didn't yield the desired outcome. It wasn't until Sidd recommended using Javascript that I delved into utilizing the CSS Calc function and Inline-Blocks with specific Width-Parameters, in conjunction with text-align and vertical-align properties to achieve my desired result.

For those who are curious, I have updated the code example. Feel free to take a look! :)

.container { position: relative; height: auto; border: 1px solid #00f; overflow: visible; }

.left { display: inline-block; width: 160px; height: auto; vertical-align: top; }

.right { display: inline-block; height: auto; width: calc(100% - 170px); vertical-align: bottom; text-align: right; }

Answer №2

check out this sample the css:

.container {  height: auto; border: 1px solid #00f; overflow: visible; }

.left { float: left; height: auto; }

.right { float: right; bottom: 0px; right: 0px; padding-left: 160px; height: auto: }

the html:

<div class="container">
    <div class="left">
        ******************<br/>
        **** SAMPLETEXT ***<br/>
        ******************
    </div>
    <div class="right">
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
    </div>
    <div style="clear:both;"></div>
</div>

Answer №3

Since the property 'height:auto' has been set, consider changing it to a specific value like 250px and then test it out. Code :

height : 250px;

Instead of using :

height : auto;

Answer №4

An element that is absolutely positioned does not contribute its height to the parent container element. This means achieving this layout purely with CSS is not possible, unless you know either the width of .left (to set left-padding on .right equal to that width - which would also require floating both inner divs) or the height of .right (so it can be assigned to 

.container</code).</p>

<p>However, using Javascript makes it a simple task:</p>

<pre><code>    var ht = document.querySelector('.right').getBoundingClientRect().height;
    document.querySelector('.container').style.minHeight = (ht+10)+"px";

In this code snippet, the height of .right is calculated after rendering, and then 10px is added to that height when setting the minimum height of .container.

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 is the best way to style HTML strings in C#?

Wondering how to create HTML helpers in ASP.net? Looking for the simplest way to generate HTML strings or templates without having to change all double quotes to single quotes manually? You can streamline your process by using a syntax similar to ES6 templ ...

c#htmlasp.net-mvc

Adjust the CSS styling of an element in real-time

I am trying to dynamically set the background image for the ion-content element. How can I achieve this? If it were a CSS class, I could simply use [class]="cssClassName" and change the class name in the TypeScript file. But in this case, how can I accompl ...

htmlcssangulartypescriptionic4

Exploring through a dynamically generated table containing JSON data

I have successfully implemented a dynamic HTML table that is populated with JSON data based on the value of a variable when the "go" button is clicked. The initial population and search functionality work flawlessly. However, I encountered an issue when ch ...

javascriptjqueryhtmljson

Displaying a different background color on a colgroup element in CSS when a scroll is

My webpage contains one or more large and complex tables, where I use JQuery to add background-color to tr and colgroup elements when hovering over the table(s). An issue arises when there are multiple tables on a page that extends beyond the viewport wit ...

jqueryhtmlcss

Creating parallel lines utilizing pseudo elements

Can someone assist me in drawing double lines under my paragraph using pseudo elements only without using display block? Here is my code snippet with display block: p:after { content: ""; display: block; width: 40px; margin: 20px auto 0; bord ...

csspseudo-element

Is it possible to keep the screen in the same position using Javascript or jQuery, even after refreshing the page?

On my page for live scores results, there are two sections - the top section displays live match results and information, while the bottom section is dedicated to comments. When I submit a comment, the page refreshes and goes back up to the information sec ...

javascriptjqueryhtml

Creating a personalized button using Bootstrap

Struggling to create a unique custom button in Twitter Bootstrap 3. I am trying to design a button with a triangle in the right bottom corner like this: https://i.sstatic.net/IZAv0.jpg I have considered using the background of the button and adding text, ...

csstwitter-bootstrap-3

Storing the information received from an API as an HTML element

My HTML file contains JavaScript, along with a URL that displays data retrieved from an AWS lambda API call via AWS API Gateway. The page initially appears blank and the data is structured like this: [ {"user": "bob", "groups": ["bobsGroup"], "policies": ...

javascripthtmljsonaws-lambdaaws-api-gateway

In which location are HTML files stored within WordPress plugins?

Can someone help me locate the HTML files within WordPress plugins? I'm looking to make edits to the HTML and CSS files of a plugin, but I can't seem to find the specific HTML file. Any guidance on where these files are stored would be greatly ap ...

htmlcsswordpressplugins

fuzzy edges on an HTML5 canvas

When attempting to draw vertical lines on a canvas with a 1px width, some lines may appear wider or blurry. Various solutions, such as subtracting 0.5px or translating coordinates, have been suggested but do not seem to work in this case. Attempts have be ...

javascripthtmlcanvas

event triggered when the values of dynamically added rows change

I am trying to calculate the product of two input fields and display it without submitting the form. I have incorporated an array and included functionality to add/delete rows, with an onchange function to calculate the product. This solution works well ...

phpjqueryhtml

How to open a PDF file in a new tab using Angular

Within my Angular 12 application, I am seeking to enable users to "view" a PDF file stored locally in the application within a new tab on Google Chrome. Currently, when implementing the code below in HTML, the file downloads rather than opening in a new ta ...

javascripthtmlangulartypescript

Transforming the pen into a creative assortment of animated social media icons for top-notch production

My goal is to incorporate animated social media icons on my website using only CSS without any JavaScript. I came across a pen called "Yet Another Set of Animated Social Icons" that I'm attempting to modify. The issue at hand is that instead of the c ...

htmlcssbrowser

Change the height of a division element after a script has been loaded

My web application is created using Bootstrap and Flask and it loads a Bokeh server document into a container div. The responsiveness of the Bokeh elements' size depends on a specific fixed initial height set for the containing div. This customization ...

javascriptjqueryhtmlcss

The inclusion of a new class in the div element is causing unnecessary page duplication

I'm attempting to designate a small section of text on my mobile webpage as the only part to be printed, specifically on a 62mm x 52mm brother label printer label. Below is the CSS I've implemented: @page { size: 62mm 52mm; marg ...

htmlcssjquery-mobile

Expanding and collapsing multiple rows within a Bootstrap grid

Seeking advice on Bootstrap and its implementation of columns and rows. Currently facing a cascading effect where I have managers, followed by employees, and then employee family members. The challenge lies in my limited understanding of how Bootstrap uti ...

htmlcsstwitter-bootstraprows

Are you curious about the array of elements in React's carousel?

I'm currently in the process of constructing a website using React, and I have a specific challenge related to the "news" section. Within this section, I have a list of three components that represent different news items. These components are housed ...

javascriptcssreactjsnpmreact-router

What method can be used to trigger quirks mode in Chrome by setting the "BackCompat" property on compatMode?

Currently, I am utilizing Selenium for conducting tests on a client's website (an old site over which I have no control and will not be updated by the client). The issue arises when a specific section of the website only functions correctly when runn ...

javascripthtmlseleniumgoogle-chromegoogle-chrome-extension

Looking for assistance with aligning a form in the center?

After spending the last hour trying to center a form for a name without success, I have decided to seek help here. Although I have searched extensively, I am still struggling at this point. Here is my HTML: <div id="main" class="main"> <tabl ...

htmlcssformsinputalignment

Clickable div containing a hyperlink

I need assistance with a clickable div that contains a link. Here is the setup: HTML: <div onClick="goToCat(2);" class="author-topics-block "> <a href="http://mywebsite/page/?cat=2">The woman in steel</a> </div> CSS: .author ...

javascripthtmlhyperlink