Positioning elements at the bottom of the container

Question

Positioning elements at the bottom of the container

There is a dilemma that only those in the world of web development will understand. Beware!

I have envisioned a layout for a website I am constructing. The concept involves tilted <hr/> elements on the page, with text wrapping around them (refer to image below which illustrates this, where the black line signifies the <hr/>)

The design showcases orange stripes. Each stripe acts as a floating element with varying widths - starting from 10px, then 20px, and so forth. The black line marks their endpoint, delineating where they truncate the text.

The large orange space represents another floating element with a width of 0 and a height equal to 100% of its parent minus the aggregate height of the other 70 floating elements (the stripes), equating to 70px.

The conundrum: achieving this appears impossible. What currently occurs:

Due to each small stripe being 1px in height, they remain visible under any circumstance. However, the sizable element relies on its parent's height. Setting a fixed height for the parent solves the issue, but I desire a dynamically adaptable box which allows modifications to its internal text content. Furthermore, fixing the height results in disastrous visual impacts when scaling the webpage.

The desired outcome entails: The initial, substantial floating element should occupy the necessary space of (100% - 70px), without imposing a fixed height on its parent while still being floated.

I intend to reward the individual who solves this predicament with all the accolades within my capacity, given that it has plagued me for an extended duration.

To assist individuals attempting to resolve the matter, consider the following insights:

Table cells can align elements to their baseline.
Various rotation attempts initiated, yet unfortunately no provision for upside-down text.
Experimented with margin, padding, and border combinations on the primary floating div - none proved effective thus far.
The preference isn't for elements to float; this was merely the strategy undertaken due to a lack of knowledge regarding alternative methods for text wrapping around an element. Feel free to attempt any approach, as long as internal text adjustments are feasible, while ensuring consistent appearance regardless of scaling changes.
Seems like employing Javascript to ascertain the required div height may be the sole solution.

All code consolidated into a Fiddle

EDIT: A potential solution has been identified, although programming execution remains unclear.

Through Javascript, the browser could calculate the container's content height (text, images, margins, etc.). Consequently, #lw ought to adjust to match that height. Subsequently, decrease #lw by 1px. Evaluate whether content height had altered upon reduction. If not surpassing the threshold of #lw's height + 70px, repetition ensues. Conversely, should the content height surpass previously mentioned limits, reduce #lw by 1px once more, halting the process. Upon window resizing, recommence the procedure.

This task seems daunting; were I versed in JS, I would willingly tackle it myself. Possibly enrolling at Codecadamy for enlightenment.

EDIT:

In the interim, a simpler version of the quandary emerges. Exploring css-shapes, revealed a means to accomplish what the 70 floating elements did utilizing a single entity. Additional set of files has been crafted, albeit necessitating a js file for functionality. HTML and CSS components provided below as code snippets; link appended for access to js code.

An automated height determination mechanism imperative in the coding structure. Included within depicts prescribed action through a <script> tag.

I begin to appear indolent, unable to contribute viable JavaScript directives.

HTML

<!doctype html>
    <html>
        <head>
            <meta charset="utf-8">
            <link rel="stylesheet" type="text/css" href="css/stylesheet.css">
            <script src='js/shapes.polyfill.min.js'></script>
        </head>
        <body>
            <div id="container">
                <div id="polybreak"></div>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus enim arcu, porttitor vitae hendrerit euismod, efficitur pretium nulla. Sed a justo nulla. Aenean vel erat purus. In velit arcu, lacinia in justo in, vestibulum pellentesque mauris. Phasellus quis eros nunc. Vivamus fringilla euismod est, eget consectetur lacus cursus et. Fusce at arcu ac turpis laoreet feugiat nec a nulla.
                </p>
                <p>
                    Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque vehicula mollis leo non tempus. Praesent scelerisque dui felis. Suspendisse tristique, sapien egestas semper cursus, elit quam facilisis sapien, sit amet ornare odio nibh sed nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum libero nisi, efficitur id felis non, maximus ultricies sapien. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce rhoncus nibh enim, eget dignissim neque placerat et. Nam sit amet placerat sapien. Quisque vitae risus ac dolor porttitor tincidunt.
                </p>
                <p>
                    Nullam volutpat, lorem vitae ultricies lobortis, ligula ligula posuere erat, sed gravida sapien nisi non ante. Aliquam tellus sapien, placerat mollis tempor quis, consequat imperdiet magna. Etiam cursus ornare mauris sit amet varius. Sed dignissim euismod felis, at aliquet est fringilla at. Duis lorem nunc, imperdiet nec rhoncus et, egestas quis nunc. Nulla imperdiet elementum libero consequat tempor. Donec ante nunc, pellentesque nec ex dapibus, auctor sagittis ipsum. Phasellus ut est ex.
                </p>
            </div>
            <script src='js/shapes.polyfill.min.js'></script>
            <script type="text/javascript">
                On load and on resize:
                Make #polybreak the same height as #container + 60px.

                Subtract 1px off #polybreak''s height and check: is #container higher than #polybreak? If so, add 1px and stop. If not, repeat.
            </script>
        </body>
    </html>

CSS

html, body{
    margin: 0;
    padding: 0;
    height: 100%;
}

p{
    text-align: justify;
}

#container{
    width: 700px;
    margin: 0 auto;
}

#polybreak{
    width: 100%;
    float: left;
    shape-outside: polygon(0 calc(100% - 100px), 700px calc(100% - 1px), 700px 100%, 0 calc(100% - 99px));
}

Link to the raw js code https://raw.githubusercontent.com/adobe-webplatform/css-shapes-polyfill/master/shapes-polyfill.min.js

javascript html css

Answer 1

Answer №1

Many individuals are sharing JavaScript answers, so let's add a practical solution to the mix. The challenge when using JavaScript is that there is no clear method to 'calculate' the final height of #lw since predicting how text wrapping behaves can be difficult.

//Establish a good starting point
Zepto(".lW").hide();
var sh = document.getElementById("wrapper").scrollHeight;
document.getElementById("lw").style["height"] = sh - 60 + "px";
Zepto(".lW").show();

//Initiate the search
var height = parseInt(document.getElementById("lw").style["height"]);
var difference = Infinity;
var bestheight = 0;
var i = 0;
var checker = setInterval(function(){
    i++;
    height += 1;
    document.getElementById("lw").style["height"] = height + "px";
    var sh = document.getElementById("wrapper").scrollHeight;

    //The crucial part is finding the optimal situation instead of just 
    //the first instance where #lw exceeds the floats; our goal is to find 
    //the most efficient solution within a specific pixel range.
    // Here, that range is hardcoded as 30 pixels.
    if(Math.abs(height + 70 - parseInt(sh)) < difference){
        difference = Math.abs(height + 70 - parseInt(sh));
        bestheight = height;
    }
    if(i>30){
        clearInterval(checker);
        document.getElementById("lw").style["height"] = bestheight + "px";
    }
},0);

Check out the JSFiddle for the complete solution.

Answer 2

Many individuals are sharing JavaScript answers, so let's add a practical solution to the mix. The challenge when using JavaScript is that there is no clear method to 'calculate' the final height of #lw since predicting how text wrapping behaves can be difficult.

//Establish a good starting point
Zepto(".lW").hide();
var sh = document.getElementById("wrapper").scrollHeight;
document.getElementById("lw").style["height"] = sh - 60 + "px";
Zepto(".lW").show();

//Initiate the search
var height = parseInt(document.getElementById("lw").style["height"]);
var difference = Infinity;
var bestheight = 0;
var i = 0;
var checker = setInterval(function(){
    i++;
    height += 1;
    document.getElementById("lw").style["height"] = height + "px";
    var sh = document.getElementById("wrapper").scrollHeight;

    //The crucial part is finding the optimal situation instead of just 
    //the first instance where #lw exceeds the floats; our goal is to find 
    //the most efficient solution within a specific pixel range.
    // Here, that range is hardcoded as 30 pixels.
    if(Math.abs(height + 70 - parseInt(sh)) < difference){
        difference = Math.abs(height + 70 - parseInt(sh));
        bestheight = height;
    }
    if(i>30){
        clearInterval(checker);
        document.getElementById("lw").style["height"] = bestheight + "px";
    }
},0);

Check out the JSFiddle for the complete solution.

Answer 3

Answer №2

The latest trend in CSS includes its own dedicated feature set for handling these types of tasks called CSS Shapes. Adobe has even developed a helpful polyfill to support this module. Have you tried it out yet?

Answer 4

The latest trend in CSS includes its own dedicated feature set for handling these types of tasks called CSS Shapes. Adobe has even developed a helpful polyfill to support this module. Have you tried it out yet?

Answer 5

Answer №3

To control the height of the top div temporarily, give it a fixed height that matches the desired appearance of the non-angled text. It seems like the bottom div already has a fixed height of 70px.

<style type="text/css">
    #topPart { height: 600px }
</style>

To cater to varying screen heights, we need to calculate the correct dimension for the top div and subtract whatever space is needed at the bottom.

<script type="text/javascript">
window.onload=function(){
function resize()
{
    var windowHeight = window.innerHeight;
    document.getElementById("topPart").style.height = windowHeight - 70 + "px";
}
resize();
window.onresize = function() {
    resize();
};
}
</script>

The resizing function will be activated whenever the browser window changes, ensuring alignment between the top and bottom divs.

Add this basic structure in the HTML page:

<div id="topPart">
<p>Include any desired text or other elements here</p>
</div>
<div>
The staggered divs for the bottom section
</div>

Using percentages won't yield desired results, as you must account for the bottom portion's height. Initially, start by subtracting around 150 to 200px to avoid overflowing the bottom of the screen and causing layout issues. The page will respond dynamically, allowing for scaling up and down smoothly.

This is my interpretation of the instructions...

Answer 6

To control the height of the top div temporarily, give it a fixed height that matches the desired appearance of the non-angled text. It seems like the bottom div already has a fixed height of 70px.

<style type="text/css">
    #topPart { height: 600px }
</style>

To cater to varying screen heights, we need to calculate the correct dimension for the top div and subtract whatever space is needed at the bottom.

<script type="text/javascript">
window.onload=function(){
function resize()
{
    var windowHeight = window.innerHeight;
    document.getElementById("topPart").style.height = windowHeight - 70 + "px";
}
resize();
window.onresize = function() {
    resize();
};
}
</script>

The resizing function will be activated whenever the browser window changes, ensuring alignment between the top and bottom divs.

Add this basic structure in the HTML page:

<div id="topPart">
<p>Include any desired text or other elements here</p>
</div>
<div>
The staggered divs for the bottom section
</div>

Using percentages won't yield desired results, as you must account for the bottom portion's height. Initially, start by subtracting around 150 to 200px to avoid overflowing the bottom of the screen and causing layout issues. The page will respond dynamically, allowing for scaling up and down smoothly.

This is my interpretation of the instructions...

Positioning elements at the bottom of the container

Answer №1

Answer №2

Answer №3

Similar questions

Finding the index of an element in an array using the filter method in Angular JavaScript

Execute a function with parameters when a button is clicked dynamically using PHP

NodeJS reports an invalid key length, while C# accepts the key length as valid

Incorporate relationships while inserting data using Sequelize

Error 410: The Webpage has Disappeared

Updating another component when an input value changes in React

JWT - Effective strategies for enhancing the user experience for a returning logged-in user

Strange Behavior of SVG 'fill: url(#....)' in Firefox

Error: Property 'blogCategory' is unreadable because it is undefined

What is the best way to transform a list of Python+Flask objects into a list of JavaScript objects?

Are the server updates not syncing with the client browser?

The event listener $(window).on('popstate') does not function properly in Internet Explorer

How can we eliminate the modal-open class in Angular when transitioning to a different URL?

Automatically refreshing the canvas whenever the value of an HTML element is modified in Javascript

Automatically populate the next dropdown menu depending on the answer provided in the previous field

The Bootstrap navbar collapse fails to expand in the appropriate location

Assign the DatePicker Object to an HTML Element

ReactJS import duplication problem arising from utilizing npm link for component testing prior to npm package release

In a Custom Next.js App component, React props do not cascade down

Access the JSON data containing sub array values and showcase them on an HTML page by utilizing ngFor