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

The socket.io.js file could not be located while using (nodejs with express [4.13] and socket.io [1.3])

Sending data from a PHP function to an AJAX call in the form of an associative array using json_encode() does not

Determining the clicked node in a JavaScript environment

Managing iframes in React using reference methods

Can you leverage the class declaration from a previous style in CSS when creating a new definition?

Retrieving a targeted data point from a JSON object

Adjust the visibility of components depending on the width of the screen

Modify the length of an array using a number input field

Adjust the color palette size when the zoom level is modified in the responsive mode within Angular

Angular.js, require.js, and jQuery Plugin all combined to create a uniquely customized directive

Making the navbar color modifications to the dropdown menu

Retrieving the information verified in the database

Can you set up an automatic redirect after a payment is made on paypal.me?

Exploring the power of combining observables in RxJS

The ellipsis text-overflow feature occasionally malfunctions during a single session when using IE 11

Removing the root component in ReactJS can be done on specific pages by implementing

Ways to position an absolute element in the middle of two CSS Grid cells

Tips for assigning a Custom Formik Component's value to the Formik value

What is the proper way to reference automatically generated class names within nested style rules when using makeStyles in Material-UI?

Element not producing output via Autocomplete from mui/material package