Struggling to align a div vertically using CSS is causing me some difficulties

Hey there, I'm trying to figure out how to align the "container2" div to the bottom of the "container," but I'm running into some issues. Can anyone lend a hand?

HTML

<div id="container">
    
         <div id="container2">
             <p>Text</p>
        </div>
    </div>

CSS

#container{
    /*Colors*/
    background-color:rgb(129, 159, 255);
    /*Size Box*/
    width:400px;
    height:200px;
    margin:0 auto;
    overflow:auto; }
    
     #container2{
     /*Colors*/
     background-color:black;
     color:white;
     /*Size Box*/
     width:50%;
     height:50%;
     padding:20px;
     margin:0 auto;
     overflow:auto;  }

http://jsfiddle.net/G4GT4/1/

htmlcssalignment

Answer №1

To maintain the current layout, you'll need to arrange the child element using position:absolute.

JSFiddle Example

CSS Styles

#wrapper{
    /*Background Colors*/
    background-color:rgb(200, 150, 100);

    /*Dimensions*/
    width:300px;
    height:150px;

    margin:0 auto;
    overflow:auto;
    position: relative;
}

#content{
    /*Background Color*/
    background-color:black;
    color:white;

    /*Dimensions*/
    width:60%;
    height:60%;

    padding:10px;
    margin:0 auto;
    overflow:auto; 
    position: absolute;
    bottom:0;
    left:50%;
    margin-left: -30%;
}

Answer №2

Include

#box { position: relative; }
#container-bottom { position: absolute; bottom: 0; }

An alternative option is to utilize tables

Answer №3

Check out the demo here

#box {
    background-color:rgb(129, 159, 255);
    display: table-cell;
    width:400px;
    height:200px;
    margin:0 auto;
    overflow:auto;
    text-align: center;
    vertical-align: bottom;
}
#box2 {
    background-color:black;
    color:white;
    /*Box Size*/
    width:50%;
    height:50%;
    padding:20px;
    margin:0 auto;
    overflow:auto;
    display: inline-block;
}

Answer №4

To achieve the desired layout, you can adjust the margin-top based on the height of the elements or use relative and absolute positioning as shown below.

#wrapper {position: relative;}
#content {position: absolute; bottom: 0; left: 25%;}

http://example.com/code-sample

Answer №5

You have the option to define the position relative to container2

See it in action here 

#container2{
    /*Customize Colors*/
    position: relative;
    top: 15%;
    background-color:black;
    color:white;

    /*Adjust Box Size*/
    width:50%;
    height:50%;

    padding:20px;
    margin:0 auto;
    overflow:auto; 

}

Answer №6

If you prefer not to utilize position absolute, a different approach is available:

example

styles

#box{
    text-align:center;
}
#box:before {
    content:"";
    height:100%;
    display:inline-block;
    vertical-align:bottom;
}
#box2{
    display:inline-block;
    vertical-align:bottom;
}

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

Formatting a specific portion of the content within the placeholder

I need to adjust the CSS style for a specific part of a placeholder, not the entire placeholder text. For example, if my placeholder text is: "Where (example: New York)" <label>Search:</label> <textarea placeholder="Where (example: New Yor ...

csshtmlplaceholder

Is concealing content using Javascript or jQuery worth exploring?

While I have been hiding content using display:none; in css, there are concerns that Google may not like this approach. However, due to the needs of jQuery animations, it has been necessary for me. Recently, I have come across a new method for hiding conte ...

javascriptjqueryhtmlcss

"Troubleshooting: ngForm.controls returning undefined value in Angular application

Trying to test this HTML code in Angular: <form name="formCercarUsiari" #formCercarUsuari="ngForm" class="tab-content"> <input #inputNif class="form-control input-height" maxlength="100" type="text" placeholder="Indiqui NIF" name="nif" i18n-pla ...

javascripthtmlangulardomundefined

I'm looking to create a unit test for my AngularJS application

I am currently working on a weather application that utilizes the to retrieve weather data. The JavaScript code I have written for this app is shown below: angular.module('ourAppApp') .controller('MainCtrl', function($scope,apiFac) { ...

javascripthtmlangularjsunit-testing

What is the most effective way to send an email in PHP with a table format

<?php $result = mysqli_query($con, "SELECT * FROM cse"); $mail_data = ""; while ($row = mysqli_fetch_array($result)) { $Hallticket_No = $row['Hallticket No']; $Name = $row['Name']; $Email_ID = $row[&apos ...

phpjavascriptjqueryhtmlmysql

Flot Graphs: A unique dual-axis line chart with the ability to stack data on one axis

Is it possible to utilize the FLOT Javascript library for creating a chart with dual axis and three data sets? I am specifically looking to have one data set on the left axis and two on the right axis. Ideally, I want to stack the two datasets on the right ...

javascripthtmlchartsflot

Responsive Font Sizing in React Native

Does React Native automatically adjust font size based on screen size? If I set the fontSize to 10 for a Text component, will it resize according to different phone sizes? If not, what is the best way to make fonts responsive in React Native? ...

cssreact-nativeresponsive-design

Show small information box when hovering over custom toggle button

I have developed a unique custom toggle switch feature When I hover my mouse over the switch, it should display a tooltip message as YES if the switch is in the ON position and NO if it's in the OFF position. Is there a way to implement this functio ...

htmljquerycss

Remove the </div> text and replace it with nothing

I'm attempting to substitute the end tag div with an empty string. Here is my code: $('#textDiv').html().replace(/'</div>'/g,'').replace(/<div>/g,'\n') This is the HTML: <div id='tex ...

javascriptjqueryhtml

What causes the vuetify tag not to render as HTML in the browser?

I ran into a styling issue while using Vuetify in my Nuxt 2 project. Upon inspecting the element in dev tools, I noticed that some Vuetify tags were not being converted to HTML as expected (they were displayed as div class="tag_name"). These unco ...

htmlvue.jsnpmnuxt.jsvuetify.js

CSS bundling may cause rendering issues, but it functions properly when written directly on the page

When I attempt to link the CSS file within the head or put it in a bundle, it won't render properly. However, if I use inline styles, everything works fine. The application is running locally with debug set to true on Web.config - <compilation debu ...

c#htmlasp.netcssasp.net-mvc-4

What is the best way to center-align elements?

I have a couple of inquiries. First off, I'm facing an issue with centering everything within a form while aligning the text to the left side of the fields. I've attempted using justify-center and align-items within the "container" class and th ...

htmlformscssflexbox

Creating a versatile design using a combination of grids, HTML tables, and media queries to ensure

When it comes to developing a responsive website, which method is superior: utilizing grid systems, employing media queries, or relying on HTML tables? ...

htmlcssresponsive-designgridmedia-queries

Having trouble with the preview feature when resizing images

Before trying to implement the JSFiddle was working correctly: http://jsfiddle.net/qa9m7t33/ However, after attempting to implement it, I encountered some issues: http://jsfiddle.net/z1k538sm/ While trying to resize an image, I realized that this example ...

javascriptjquerycss

Utilizing the Masonry jQuery plugin for optimizing empty spaces

Recently, I came across the Masonry plugin and I'm considering using it in a project. One question that intrigues me is whether there is a way to detect empty spaces that occasionally show up in the layout when divs are positioned. Being able to ident ...

javascriptjqueryhtmlcssjquery-masonry

Dynamic styling updates on page refresh in Next.js

There is a strange issue with my styling that I can't seem to figure out. I have a NavBar set to be 20vh in height and an image set to be 100% in width. However, whenever I refresh the page, the NavBar height decreases and the image width increases si ...

javascriptcssreactjsmaterial-uinext.js

Attach a button and arrow to the cursor while it is hovering

Can anyone help me figure out how to make a button magnetize the content (arrow) along with it when hovered over by the cursor? I found an example of what I want on this website , but I am struggling to implement it in my own code. I've searched thro ...

javascripthtmlcss

Animated CSS sidemenu (utilized as a filtering panel for a table)

Hi there, I'm having some trouble with CSS Animation. I recently started developing websites and am using Bootstrap 4 along with Animate.css for animations. My goal is to have an icon button expand sideways to reveal a div containing select elements f ...

javascripthtmlcssanimation

How to hide text within a contenteditable element

I'm trying to create a contenteditable span that behaves like a password field in a Linux terminal; the text is entered, but not visible. I've experimented with different CSS properties like visibility: hidden and display: none, but they don&apos ...

htmlcss

What is the reason behind this Uncaught TypeError that is happening?

After converting my questionnaire to a PHP file and adding a validation script, I encountered an error: Uncaught TypeError: Cannot set property 'onClick' of null The error is pointing me to line 163 in my JavaScript file, where the function f ...

javascriptphphtml