I have outer div and inner div. I need to place inner div at the bottom of the outer one.
Outer div is elastic (width: 70% for example). I also need to center inner block.
Simple model of described make-up is shown on the picture below:
Tested and working on Firefox 3, Chrome 1, and IE 6, 7 and 8:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html><body>
<div style='background-color: yellow; width: 70%;
height: 100px; position: relative;'>
Outer
<div style='background-color: green;
position: absolute; left: 0; width: 100%; bottom: 0;'>
<div style='background-color: magenta; width: 100px;
height: 30px; margin: 0 auto; text-align: center'>
Inner
</div>
</div>
</div>
</body>
</html>
Live version here: http://jsfiddle.net/RichieHindle/CresX/
You need a wrapping div for the bottom one, in order to center it.
<style>
/* making it look like your nice illustration */
#outer { width: 300px; height: 200px; background: #f2f2cc; border: 1px solid #c0c0c0; }
#inner { width: 50px; height: 40px; background: #ff0080; border: 1px solid #800000; }
/* positioning the boxes correctly */
#outer { position: relative; }
#wrapper { position: absolute; bottom: 3px; width: 100%; }
#inner { margin: 0 auto; }
</style>
<div id="outer">
<div id="wrapper"><div id="inner"></div></div>
</div>
CSS3 Flexbox allows the bottom positioning very easily. Check the Flexbox support table
HTML
<div class="outer">
<div class="inner">
</div>
</div>
CSS
.outer {
display: flex;
justify-content: center; /* Center content inside */
}
.inner {
align-self: flex-end; /* At the bottom of the parent */
}
Output:
.outer {
background: #F2F2CD;
display: flex;
width: 70%;
height: 200px;
border: 2px solid #C2C2C3;
justify-content: center;
}
.inner {
background: #FF0081;
width: 75px;
height: 50px;
border: 2px solid #810000;
align-self: flex-end;
}
<div class="outer">
<div class="inner">
</div>
</div>
Works well on all browsers including ie6.
<style>
#outer{
width: 70%;
background-color: #F2F2CC;
border: 1px solid #C0C0C0;
height: 500px;
position: relative;
text-align: center;
}
#inner{
background-color: #FF0080;
border: 1px solid black;
width: 30px;
height: 20px;
/* Position at the bottom */
position: relative;
top: 95%;
/* Center */
margin: 0 auto;
text-align: left;
}
</style>
<div id="outer">
<div id="inner">
</div>
</div>
Related
I would like the button to be positioned at the bottom right of the red colored div. I used padding-bottom and margin-bottom properties but that does not seem to work. Could anyone please help?
.container {
display: flex;
flex-direction: column;
width: 300px;
height: 200px;
border: 1px solid blue;
padding: 8px;
}
.box {
width: 300px;
height: 150px;
border: 1px solid red;
}
.button {
float: right;
}
<div class="container">
<div class="box">
</div>
<div>
<button class="button">Click</button>
</div>
</div>
.button {
float: right;
position:relative;
transform:translate(-5px,-25px); //x and y controls
}
I have just answered the same thing to other question. ... Use position:relative. I see the point why people refrain from using it. But really ain't no shame. Especially when there isn't a parent-child relation between the elements.
.container {
display: flex;
flex-direction: column;
width: 300px;
height: 200px;
border: 1px solid blue;
padding: 8px;
}
.box {
width: 300px;
height: 150px;
border: 1px solid red;
}
.button {
float: right;
position:relative;
top: -22px;
}
<div class="container">
<div class="box">
</div>
<div>
<button class="button">Click</button>
</div>
</div>
An alternative to the other answers using display: grid instead. This is easier for the browser than using position absolute or float!!
/* ignore */ body { margin: 0 } * { box-sizing: border-box } /* ignore */
.container {
display: grid;
width: 50vw;
height: 100vh;
border: 1px solid blue;
padding: 8px;
}
.box, .button { grid-area: 1/1/-1/-1 }
.box { border: 1px solid red }
.button { margin: auto 0 0 auto }
<div class="container">
<div class="box">
</div>
<div class="button">
<button>Click</button>
</div>
</div>
I want to recreate the following structure:
With black is div container and inside the container on the left there will be text and on the right i need an image bigger than the container.
I tried to do this by grids but things got funky real quick.
As it seems to be important that the containing div maintains the dimensions (as shown by its border), this snippet adds in the actual image as a background on a pseudo element that is absolutely positioned.
That way the protruding bit of image does not alter the container div dimensions.
Here's a simple snippet using a grid to position the left and right sides. Of course you will want to alter proportions to suit your particular case, add styling to the leftside and so on:
.container {
display: grid;
grid-template-columns: 3fr 2fr;
width: 50vw;
height: auto;
margin-top: 10vh;
border: solid 2px black;
}
.leftside {
padding: 1vw;
}
.rightside {
position: relative;
width: 100%;
height: 100%;
}
.rightside::before {
content: '';
background-color: pink;
background-image: url(https://picsum.photos/id/1015/500/200);
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
width: 50%;
height: 140%;
bottom: 0;
left: 25%;
position: absolute;
}
<div class="container">
<div class="leftside">
<h2>Heading</h2>
<div>text1</div>
<div>text2</div>
</div>
<div class="rightside"></div>
</div>
go with the flexbox.
.main-container{
display:flex;
display: flex;
justify-content: space-evenly;
border:1px solid black;
margin:30px;
height:300px;
padding:10px;
}
.image{
width:50vw;
position:relative;
}
img{
width:100%;
height:150%;
width: 100%;
height: 150%;
top: -50%;
position: absolute;
}
.text{
display:flex;
align-items:center;
}
<div class="main-container">
<div class="text">
<p>Somthing Somthing</p>
</div>
<div class="image">
<img src="https://loremflickr.com/640/360" />
</div>
</div>
Here you go:
.background {
padding: 25px;
display: flex;
border: 1px solid black;
height: 150px;
position: relative;
margin-top: 50px;
}
.text {
border: 1px solid green;
width: 50%;
padding: 10px;
}
.img {
text-align: center;
width: 50%;
display: flex;
justify-content: center;
}
.img>div {
border: 1px solid blue;
width: fit-content;
padding: 10px;
height: 200px;
position: absolute;
bottom: 25px;
}
<div class="background">
<div class="text">
<p>
text1
</p>
<p>
text2
</p>
<button>
Click me
</button>
</div>
<div class="img">
<div>
me img
</div>
</div>
</div>
Hope this helps
I have 6 s inside a parent
The height of the internal divs change dynamically based on the underlying data.
The outer Div has a set height.
What I want is that when one of the internal Divs no longer fit (heightwise) in the parent that it should just move over to a "new column" inside the parent Div
Here is a short snippet with my situation:
#outer {
min-width: 100px;
width: 100px;
max-width: 200px;
height: 96px;
max-height: 96px;
background-color: #ddd;
position: relative;
}
#outer div {
width: 100px;
height: 30px;
border: 1px solid black;
text-align: center;
}
<div id="outer">
<div>Item1</div>
<div>Item2</div>
<div>Item3</div>
<div>Item4</div>
<div>Item5</div>
<div>Item6</div>
</div>
Here is another snippet of how I would want it to appear:
#outer {
float:left;
min-width: 100px;
width: 100px;
max-width: 200px;
height: 96px;
max-height: 96px;
background-color: #ddd;
position: relative;
}
#outer div {
width: 100px;
height: 30px;
border: 1px solid black;
text-align: center;
}
<div id="outer">
<div>Item1</div>
<div>Item2</div>
<div>Item3</div>
</div>
<div id="outer">
<div>Item4</div>
<div>Item5</div>
<div>Item6</div>
</div>
Can anyone suggest anything?
Thanks
Flex wrapping can easily solve this problem.
[If you're using bootstrap, you don't need to write the css written in '*' selector]
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
#outer {
display: flex;
flex-wrap: wrap;
width: 200px;
height: 90px;
background-color: #ddd;
position: relative;
}
#outer div {
width: 100px;
height: 30px;
border: 1px solid black;
text-align: center;
}
<div id="outer">
<div>Item1</div>
<div>Item2</div>
<div>Item3</div>
<div>Item4</div>
<div>Item5</div>
<div>Item6</div>
</div>
I have a design using some bootstrap styling which has a white column on the right. The height should be 100%, but it isn't rendering at 100%. It renders at 100% of the initial screen height, but when you scroll down it's no longer white.
I've looked at several other CSS solutions on this site. I've tried making all parent elements 100% height. I've tried making it a flexbox column. I've tried putting "position: relative;" in the body. Nothing has worked yet. I'd prefer not to use JS to achieve this.
Simplified version of my HTML:
<body>
<div class="container">
<div class="main">
<h1>This is the main content area</h1>
</div>
<div class="right pull-right">
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
</div>
</div>
</body>
The CSS:
body,html {
height: 100%;
background-color: #aaa;
}
body {
position: relative;
}
.main {
display: inline-block;
}
.container {
height: 100%;
}
.right {
display: inline-flex;
flex-direction: column;
background-color: #fff;
width: 350px;
height: 100%;
min-height: 100%;
border: 1px solid #E1E6E9;
margin-right: 100px;
position: absolute;
right: 100px;
}
.content {
height: 300px;
min-height: 300px;
margin: 10px 10px;
background-color: #ccc;
border: 1px solid #000;
}
Change your .right class to have height: auto;
It will size itself to fit with its content.
.right {
display: inline-flex;
flex-direction: column;
background-color: #fff;
width: 350px;
height: auto;
min-height: 100%;
border: 1px solid #E1E6E9;
margin-right: 100px;
position: absolute;
right: 100px;
}
http://codepen.io/smlariviere/pen/WrWgxQ
To make this easy, say you had a div that was 100px wide, and 3 divs inside of it each 20px wide. How can I align them to where they align to the center of the div leaving a 20px; gap on each side?
Center some HTML elements always depends of your project and integration dependencies...
You may be happy with these 2 solutions, display: inline-block; and float: left;
Both have pros & cons, hope that it can help you !
http://jsfiddle.net/HP2DS/1/
<!-- Inline-block -->
<div id='container'>
<div class='centered' id='content-left'></div><div class='centered' id='content-center'></div><div class='centered' id='content-right'></div>
</div>
#container {
width: 100px;
height: 80px;
text-align: center;
background: cyan;
}
#container .centered {
display: inline-block;
width: 20px;
height: 100%;
margin: auto;
background: magenta;
border: 1px solid black;
box-sizing: border-box;
}
<!-- Floating -->
<div id='container-2'>
<div class='centered' id='content-2-left'></div>
<div class='centered' id='content-2-center'></div>
<div class='centered' id='content-2-right'></div>
</div>
#container-2 {
width: 60px; /* 60px + 2*20px of padding... */
height: 80px;
padding: 0 20px;
text-align: center;
background: cyan;
}
#container-2 .centered {
float: left;
width: 20px;
height: 100%;
margin: auto;
background: magenta;
border: 1px solid black;
box-sizing: border-box;
}
Good day! Here is how I implemented it:
HTML
<div id="container">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
CSS
#container {
width: 100px;
height: 100px;
border: 1px solid red; /** for viewing purposes **/
text-align: center; /** center the divs **/
font-size: 0; /** remove the unwanted space caused by display: inline-block in .child **/
}
#container .child {
display: inline-block; /** set the divs side-by-side **/
vertical-align: top;
width: 20px;
height: 100px;
font-size: 12px; /** override font-size: 0 of #container, so that text will be visible again **/
text-align: left; /** set text in the .child divs back to normal alignment **/
border: 1px solid blue; /** for viewing purposes **/
box-sizing: border-box;
}
I hope this helps. Cheers! :)