modifying the position of a container within the lower bounds of a surrounding container

I'm struggling to position the blue box at the bottom of this image, and I can't figure out why.

Here is my CSS:

    .boxes {
        margin-left: 4%;
        margin-right: -4px; 
        height: 345px;
        padding: 5px;
        font-size: 12px;
    }

    .box-one{
        background-image: url("uploadir.com/u/nxa8310f");
        background-repeat: no-repeat;
        background-size: cover;
    }

    .index-image-text {
        padding-bottom: 0;
        margin-bottom: 0;
        font-weight: bold;
        color: white;
        background-color: #2E3192;
        }

HTML:

   <div class="boxes img-rounded box-one grid-20">

    <h1>Pottery Painting</h1>
        <p class="index-image-text">
            Testing<br>             
        </p>

    </div>

Currently, there is a slight gap on both sides, but I want the box to be at the very bottom of the image without any gaps.

Current Display:

Desired Display:

Any suggestions? Here's a fiddle for reference: jsfiddle.net/kzaLx2vb/

htmlcss

Answer №1

Perhaps this information will be of assistance.

HTML:

<div class="boxes img-rounded box-one grid-20">
        <h1>Pottery Painting</h1>
        <p class="index-image-text">Testing</p>
</div>

CSS:

body {
    width: 300px;
}
.boxes {
    margin-left: 4%;
    margin-right: -4px; 
    height: 345px;
    font-size: 12px;
}
.box-one{
    background-image: url("http://uploadir.com/u/nxa8310f");
    background-repeat: no-repeat;
    background-size: cover;
}
.index-image-text {
    padding-bottom: 0;
    margin-bottom: 0;
    position:relative; 
    top:75%;            
    font-weight: bold;
    border-bottom-left-radius: 2px;
    border-bottom-right-radius: 2px;
    color: white;
    background-color: #2E3192;
    text-align: center;
    padding-top: 10px;
}
h1 {
    padding-top: 30px;
    text-align: center;
    color:#FFF;
}

JSFiddle: http://jsfiddle.net/5q354m3h/

Answer №2

If you're looking to accomplish your goal effectively, consider applying a relative styling to the box:

.box-one{
 position:relative;
}

Next, you can use absolute positioning for your index-image-text element:

.index-image-text {
  position:absolute;
  bottom: 0;
  left:0;
  right:0;
}

Answer №3

http://jsfiddle.net/abc123/22/

CSS:

.containers {
    margin-left: 4%;
    margin-right: -4px; 
    height: 345px;
    font-size: 12px;
    /* additional code */
    padding: 0; /*update padding from 5px to 0*/
    position: relative; /*set as relative for outter box reference */
    border-radius: 10px; /*round corners based on reference image */
    overflow: hidden; /*cut out for bottom rounded corner */
    max-width: 320px; /*not necessary*/
}

.container-one {
    background-image: url("http://uploadir.com/u/xyz4567");
    background-repeat: no-repeat;
    background-size: cover;
}

h1 {
    color: #fff;
    text-align: center;
}

.image-text-index {
    padding-bottom: 0;
    margin-bottom: 0;
    font-weight: bold;
    color: white;
    background-color: #2E3192;
    /*additional code */
    margin: 0; /*override default padding value on "p" tag */
    padding-top: 10px; /*spacing based on reference image */
    position: absolute; /*set as absolute to position within relative outter box */
    bottom: 0; /*inner box sticks to bottom of outter box */
    width: 100%; /*stretch inner box to fill outter box */
    text-align: center; /*position based on reference image */
    font-family: verdana; /*font family according to image */
}

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

Optimizing the position of the datepicker dropdown in Boostrap 4

I am currently utilizing Bootstrap 4 (final) with the boostrap-datepicker-plugin 1.7.1. Since Bootstrap 4 no longer uses .input-group-addon elements for the calendar icon, but instead .input-group-prepend and .input-group-append, I made some modificatio ...

jquerycsstwitter-bootstrapdatepickerbootstrap-4

How can you utilize jQuery to export multiple-page HTML content into a PDF document?

I'm having trouble exporting HTML to PDF using jQuery, especially when the HTML content spans multiple pages in the PDF file. Below is my current code snippet: $("body").on("click", "#downloadPDF", function () { html2canvas($('#dow ...

javascripthtmljquerypdfpdf-generation

jQuery Alert for Double-Checking Email Entry

Is it possible to create a simple alert pop-up using jQuery if the user does not enter the correct email address in the second email input form? Below is my current code: <div id="reservation-request"> <form method="post" action="test.php ...

phpjavascriptjqueryhtml

What is the best way to trigger a method once an image has completed loading and rendering?

Is there a way to trigger a method once an image has finished loading and displaying on the web browser? Here's a quick example using a large image: http://jsfiddle.net/2cLm4epv/ <img width="500px" src="http://www.digivill.net/~binary/wall-cover ...

javascriptjqueryhtmlcss

Stop menu items from shifting when focused

I've developed a mobile hamburger menu and attempted to adjust the padding to create space between the text and the borders. Here's the HTML: #menu-solutions:hover .menu-item-text, #menu-solutions:focus .menu-item-text, #menu-solutions:ac ...

htmlcsswordpress

The "in" class for Bootstrap collapse is not functioning as expected

I am currently experimenting with Bootstrap's collapse class to create a toggle effect for an element when a checkbox is clicked. The initial state of the page should have the checkbox unchecked and the element displayed. Upon clicking the checkbox, t ...

htmlcssdjangobootstrap-4

Choose the identical value multiple times from a pair of listboxes

Is there a way to use the bootstrapDualListbox() function to create an input that allows selecting the same value multiple times? I have been searching for a solution to this issue without success. If I have a list like this: <select multiple> <op ...

javascripthtmlcss

Align two DIVs in the correct layout: One as a sidebar that remains fixed, and the other as an expanding element

I am currently working on a code snippet to build a basic website featuring two main sections: a sidebar and the main content: html, body { height: 100%; margin: 0; } .container { display: flex; flex-direction: row; height: 100%; } .sidebar { ...

javascripthtmlcss

Ways to center text horizontally in a line with the help of bootstrap styles?

.list-group-item{ width: 165px; height: 32px; line-height: 1px; text-align: center; margin-bottom: 1px; margin-top: 58px; margin-left: 20px; } <ul class="list-group" v-if="showSearchHistory"> <li class="list-g ...

cssvue.jsbootstrap-4

Implementing Ajax to display autocomplete suggestions in an HTML table

I've been working on implementing an ajax auto complete function into my HTML code. My goal is to display the results from the auto complete function in a table on the html page. Although the auto complete function is working and I can see the drop do ...

htmlajax

Looking to reload a div with a captcha in a contact form without the need to refresh the entire page

I have integrated a div tag into my contact form to contain the captcha elements. If the user is unable to read the captcha image, I want to provide them with an option to refresh that specific section without reloading the entire page. I have tried variou ...

javascriptjqueryhtml

Tips on adding CSS to a React component

I've successfully converted an HTML file into a component designed to resemble a 7-segment LED display. I have imported the necessary CSS styles from the index.css file, but I am unsure how to properly apply these styles within the component. My atte ...

htmlcssreactjs

Material UI - Panel Expansion does not cause the div above to resize

Scenario : Utilizing leaflet and React-table together in one component. Two divs stacked vertically - one containing a leaflet map and the other a react-table. The second div has Expansion Panels with react-table inside. Issue : Problem arises when ...

javascripthtmlcssmaterial-ui

The functionality of Nativescript squared buttons is not functioning as expected

I recently developed a Nativescript app using Angular, incorporating customized buttons. However, I have encountered an issue where I am unable to achieve perfectly squared buttons with the desired appearance. Here is my CSS code: Button { font-size: ...

cssnativescriptangular2-nativescript

Safari's problem with auto-filling forms

I am in the process of designing a payment form. I need to have the fields for credit card number and its expiry date set to autofill. The Chrome browser is functioning correctly, but Safari is not recognizing the expiry_date field for autofill. Below are ...

htmlsafariautofill

Step-by-step guide to automatically submitting a form after obtaining geolocation without the need for manual button-clicking

I am looking for a way to automatically call a page to get geolocation data, and then submit the form to my PHP page with the values of getlat and getlon without the need to click a submit button. I have tried implementing the code below, however, despit ...

javascriptphphtmlgeolocation

Is it possible to absolutely position an element using its own bottom edge as a reference point?

Looking to achieve precise positioning of an element just off the top of the screen, specifically a sliding menu. Utilizing position: absolute and top: 0px is straightforward, but this aligns the element based on its top edge. Is there a way to achieve th ...

csscss-positionabsolute

How about implementing built-in validation for Vue Headless UI Listbox (Select) element?

I need assistance in integrating native validation support into the Vue3 or Nuxt 3 Vue Headless UI Listbox (Select) component. It appears that direct support is not available, so I am looking for the best and most straightforward approach to achieve this. ...

javascripthtmlvue.jsnuxt.jsheadless-ui

Display a series of numbers in a stylish Bootstrap button with uniform dimensions

I am trying to find a way to show the number of days in a specific month within a bootstrap button. However, the code I have been using does not evenly distribute the buttons in terms of height and width. I would like the display to look similar to the sc ...

javascripthtmlcssbootstrap-4

"Is it possible to apply CSS to all HTML elements except for a

I am looking to apply the specified styles to all elements except for a particular class and its descendants. html * { box-shadow: none !important; border: none !important; color: white; } I attempted the following but it did not work as intended: ht ...

htmlcss