How can I display three divs on the same line with different widths and heights, where one is left-aligned, another is right-aligned, and the third is centered within the containing div? Also, how can I vertically align them to the bottom of the containing div instead of the top?
The solution I currently have only aligns the divs to the top of the containing div. What would be the best approach to achieve my desired layout?
To position child divs within a container, set the container div to position:relative and the child divs to position:absolute.
This allows you to easily align the child divs by using properties like bottom:0px for vertical alignment and left/right styling for horizontal positioning.
I have created a working example on jsFiddle: http://jsfiddle.net/Damien_at_SF/KM7sQ/5/. Here is the code:
HTML:
<div id="container">
<div id="left">left</div>
<div id="center">center</div>
<div id="right">right</div>
</div>
CSS:
#container {
position:relative;
height:400px;
width:100%;
border:thick solid black;
}
#container div {
background:grey;
width:200px;
}
#left {
position:absolute;
left:0px;
bottom:0px;
}
#center {
position:absolute;
left:50%;
margin-left:-100px;
bottom:0px;
}
#right {
position:absolute;
right:0px;
bottom:0px;
}
Note: For the "center" div, the margin-left should be half the width of the div :)
I hope this explanation helps! Feel free to reach out with any questions.
Following a technique similar to @Damien-at-SF:
I have thoroughly demonstrated all the requirements you requested.
HTML:
<div id="container">
<div id="left"></div>
<div id="mid"></div>
<div id="right"></div>
</div>
CSS:
#container {
position: relative;
height: 400px;
width: 80%;
min-width: 400px;
margin: 0 auto;
background: #ccc
}
#left, #right, #mid {
position: absolute;
bottom: 0;
}
#left {
left: 0;
width: 80px;
height: 200px;
background: red
}
#right {
right: 0;
width: 120px;
height: 170px;
background: blue
}
#mid {
left:50%;
margin-left: -80px;
width: 160px;
height: 300px;
background: #f39
}
If you want to make the center of your div stretchy, one option is to use this method:
<div style="display:flex; justify-content: center;">
<div style="flex: 0 1 auto;"></div>
<div style="flex: 1 1 auto;"></div>
<div style="flex: 0 1 auto;"></div>
</div>
Building on the initial response:
To enhance alignment further in the "center" div CSS, include:
text-align:center;
For the "right" div CSS, make sure to insert:
text-align:right;
... for achieving precise left/center/right alignment.
To make sure your layout is properly structured, apply position: relative to the parent div and each of the three child divs. Then, adjust the position of the child divs by setting their bottom attribute to 0:
bottom: 0
To vertically align flexbox items at the bottom, you can utilize align-items: flex-end.
.container {
display: flex;
height: 300px;
min-width: 400px;
background-color: #61a0f8;
justify-content: space-between;
align-items: flex-end;
}
.item {
width: 100px;
height: 120px;
background-color: #f08bc3;
display: flex;
justify-content: center;
align-items: center;
color: white;
font-size: 2rem;
}
.flex-2 {
width: 140px;
height: 240px;
}<div class="container">
<div class="item">1</div>
<div class="item flex-2">2</div>
<div class="item">3</div>
</div>Please check out this fiddle, My attempt was to design an animation where a div glides in, followed by text appearing character by character. I am aiming for a smoother writing effect rather than the current typing effect I have achieved. Does anyone kn ...
I am currently working with this particular component: <template> <div id="cms-img-upload-multiple" class="cms-img-upload-multiple"> <input class="btn-upload" v-if="!state.images.length" type=&qu ...
My files all have a header that includes a navigation bar. I am trying to use jQuery to add the 'active' class to the relevant list items (li). The method I initially thought of involved setting a variable on each page, assigning an ID equal to ...
Looking to dynamically change the background image of an element based on specific strings in the URL. Rather than changing it for each individual term like "Site1", I want to be able to target multiple words. Here's what I've tried: var urlstri ...
Currently, I am experimenting with d3.js examples to create visual graphs. Here is the link for reference. Below is the snippet where I've implemented the LineChart function to construct the graph, with Django as the backend. {% load static %} < ...
I've been attempting to incorporate an image slider into my personal website on GitHub, but I've encountered some difficulties as the images are not displaying. Interestingly, I can load individual images without using the slider and they show up ...
Is it possible to use Selenium with Python to determine if HTML inputs are visually overlapping each other? For instance, the first image shows elements that overlap: https://i.sstatic.net/vsSUd.png While the second image displays elements that do not ov ...
Currently, I'm working on implementing a hide/show function for comments using JavaScript. Fortunately, I was able to find a helpful solution here (thanks to "PiggyPlex" for providing the solution on How can I hide/show a div when a button is clicked? ...
I have been searching for solutions here but haven't had any luck so far. I am currently learning HTML and while working on a simple login feature, I have run into some issues. I am using XML as a makeshift "database" and PHP to retrieve the informati ...
Chrome and Safari are working perfectly fine, but I encountered an issue with IE and FF where the submenu menu appears on the left side of the main navigation. The website in question is cedumilam.php.cs.dixie.edu. Below is the CSS code I am using: # ...
While trying to login to a website by entering the user id and password, I am facing an issue with clicking on the Login button. Despite trying to submit the form, I am unable to proceed further. Can anyone offer some assistance? $username = "abcd" $pa ...
I'm currently working on a code that updates a table every 5 seconds. I have implemented a table sorter with Knockout.js, however I am facing an issue where the data is being appended to previous data instead of updating it. Below is the code snippe ...
Issue: I'm encountering difficulty opening a local Excel file via a file URL when the directory containing the file has spaces in its name. In my scenario, I have an HTML file with a link that should open a local Excel file from the same directory. T ...
Looking for some assistance with creating an animated dropdown menu that slides upwards. Any help is appreciated! $('.need-help').click(function() { $('.need_help_dropdown').slideToggle(); }); .need-help { background:url(../im ...
I'm having an issue with my webpage where the text on my CSS cards is overflowing and not staying within the card. Additionally, when I hover over an element, the remaining CSS cards are arranged in a zig-zag manner. Here's the code snippet for r ...
Users have multiple options to choose from. When a user selects one option, I want to display additional options that are dependent on the initial selection. For example, if the user can select between 1 or 2 gates, upon choosing a number I will show all t ...
In customizing a jQuery slider bar from a tutorial by Thoriq Firdaus for use in a Django Python application, I found that the original size and range of the slider were too small for my needs. I needed to set the range to min: -100 and max: +100. Modifying ...
I am currently working on creating visualizations using D3, and one challenge that I have encountered is the need to define a lot of styles within my code instead of in my CSS where I would prefer them to be. This necessity arises mainly to support transi ...
How do I eliminate the white spaces on the left, right, and top of my background image that covers the header area above the fold on my webpage? I am currently testing in Google Chrome and using VS Code as my editor. html, body { width: 100%; height: ...
I hesitated to ask this question at first because it seemed trivial, but after spending over 3 hours searching on stackoverflow and Google, I decided to give it a shot. The issue I'm facing can be found here: http://jsfiddle.net/RVPkm/7/ In the init ...