Positioning the bottom of a two-column layout using CSS

I am working on a 2 column layout that should have a height of 100% of the window size. The left side will contain an image taking up 90% of the window size positioned at the bottom of the wrapper. On the right side, there will be text occupying the top 50% of the height and an image below it also taking up 50% of the height. Both images need to be responsive to the window size without overflowing onto other page elements.

Check out my code here: http://jsfiddle.net/jfarr07/7TctY/2/

HTML

<div class="background">
<div class="wrapper">
    <div class="leftside">
<div class="imgspacer"></div>
<div class="img"></div>
    </div>
    <div class="rightside">
        <div class="text">lakjsd;lfjas;ldjf;alsdjf;lasdlkfjas;ldjf;alsdjf;laksjdfl;kasjdf</div>
        <div class="rightimage"></div>
    </div>
</div>
</div>

CSS

body,html {
    height:100%;
    min-height:100%;
}

.background {
    background-size:cover;
    height:100%;
    min-height:100%;
    background-color:#333;
}

.wrapper {
    width:90%; 
    margin:0 auto;
    height:100%;
    min-height:100%;
    background-color:#fff;
}

.leftside {
    height:100%;
    min-height:100%;
    width:50%;
    float:left;
}

.imgspacer {
    height:10%; 
    background-color:#222;
    width:100%;
}

.img {
    height:90%;
    background-image:url(http://1.bp.blogspot.com/-CnXnB1TnnhE/UVc8czYpDUI/AAAAAAAAAP8/FXezUtrUeMU/s1600/Jared-allen.jpg);
    width:100%;
    background-repeat:no-repeat;
}

.rightside {
    background-color:#888;
    width:50%;
    height:100%;
    min-height:100%;
    float:right;
}

.text {
    width:100%;
    height:50%;
}

.rightimage {
    width:100%;
    height:50%;
    background-image:url(http://1.bp.blogspot.com/-CnXnB1TnnhE/UVc8czYpDUI/AAAAAAAAAP8/FXezUtrUeMU/s1600/Jared-allen.jpg);
    background-repeat:no-repeat;
}

Answer №1

One small addition you may need is background-size: contain;. Could this be the solution you are seeking?

http://jsfiddle.net/7TctY/5/

UPDATE - background-size: cover; can also be effective in certain situations, but for this particular case, it resulted in cutting off images in an undesirable manner.

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

The HTML body is given a right margin for proper spacing

Within the page, I noticed some margin to the right that extends beyond the body itself, causing a scroll bar to appear at the bottom. However, I'm unable to determine the root cause of this issue. I have provided links to both Codepen and Netlify be ...

The full background width is not being displayed as 100% on the

Unexpectedly, the "full left secondary-bg" background division on this particular page (http://goo.gl/OU4MkW) is no longer spanning the full width of the screen and I am unable to figure out why. This website is WordPress-based and constructed using the sk ...

Is JavaScript generating a random sequence by dynamically adding fields?

I'm encountering an issue with my button that adds a set of text fields every time I click on the Add More button. The problem is that when I add new text fields, they are appended above the Add More button. Then, pressing the button again adds more t ...

Upon clicking the checkbox, only the ul tag will be displayed on the screen

It's puzzling to me that when I click on the checkbox, only the ul tag with id=menu is visible on the screen, not id=social. I need to ensure display:block is set for every ul tag. .show-menu { display:block; } #menu{ float:left; } #social{ ...

What is the best way to ensure that this header remains adaptable to different screen

Looking for guidance on creating a fluid and responsive header design similar to the curved images shown at this link or this link. How can I ensure that my design maintains its shape without distortion when viewed on different devices? Any suggestions a ...

The navigation icon on my website refuses to close

Hey there, I'm having some trouble creating a side navigation menu. The issue I am facing is that the menu opens without any problem, but then I can't seem to figure out how to close it using a second "onclick()" function. If you could take a lo ...

Reversing the order of input-group-addon and input in bootstrap on mobile devices

I attempted to adjust the layout of a bootstrap input-group-addon on mobile devices by using two input elements and manipulating their display and visibility properties. From a design standpoint, I achieved the desired result as the input is now positione ...

Style binding for background image can utilize computed properties or data for dynamic rendering

In my code, I am trying to pass an object that contains a string path for its background image. I have experimented with using data and computed properties, but so far I haven't had any luck getting them to work within the :style binding. However, if ...

adjust the size of a form field to match the background image dimensions

I'm encountering an issue while trying to solve this particular challenge: My goal is to integrate a login box onto a full-screen image. Although I've come across numerous methods for incorporating an image into a form field, my task requires me ...

What steps do I need to take to transform this HTML snippet into a Bootstrap design

Looking to convert the table below into bootstrap rows and columns. I'm not very familiar with bootstrap, but would like to give it a try. Any guidance on where to start would be greatly appreciated. Thank you for your help! <div id="section1"> ...

The submenu dropdown on the navigation bar appears once you hover over the parent bootstrap element

Hey there! I'm currently facing an issue where the submenu dropdown is displaying when its grandparent is hovered, rather than just its parent. Here's the code snippet: <nav class="navbar navbar-default"> <div class="container"> ...

The CSS float puzzle - text alignment dilemma

Recently, I created a simple float-based banner with tiles which you can see here on jsfiddle. However, I encountered a major issue with centering text in each tile. My goal is to have all the "Sample text" content centered both horizontally and vertically ...

Gradually appear/disappear div element with a delay added

Storing divs in an array and deleting them after appending is my current method. Now, I'm looking to incorporate a fade-in and fade-out effect on each div with a delay. Check out this code snippet : var arr = $(".notification"); function display ...

The alignment of Flex Divs is off despite having identical heights

I'm facing an issue where divs are not staying at the top of their parent div if the image they contain does not have the same height as the others. Within my navbar, I have icons of varying sizes placed inside divs using display: flex to vertically ...

The label element in a CSS form is not displaying correctly

After clicking submit on the form located at this link: I am experiencing an issue where the validation messages are not displaying as intended. I would like them to appear next to the input elements, inline with the form. I suspect that there may be a p ...

Customize the appearance of each TreeItem in JavaFX using CSS to assign unique

I am looking for a way to color individual Tree Items in a treeView based on specific conditions. I found a promising answer, but unfortunately, I am struggling to implement it. You can check out the answer here. My main obstacle is understanding how to u ...

The horizontal scroll feature is dysfunctional when attempting to allocate cell space based on a percentage

I want to display two sections of text that take up the full width of the screen and resize automatically when the screen size changes. Currently, I am using percentage widths to achieve this. However, when the text inside a section exceeds the available ...

Ensure that the div remains within the viewport

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Tit ...

Modify the button's text with jQuery after it has been clicked

I've been struggling to update the text of a button after it's clicked, and I'm encountering an issue where it works in one part of my code but not in another. Could someone please guide me on what might be missing in my code? The first bl ...

Exploring Unicode Symbols for Icon Selection

I'm currently working on integrating an icon picker into my application that will enable the user to select a mathematical operator for data comparison. While I have successfully implemented the fontawesome-iconpicker on the page, I am encountering d ...