I need to keep the subfooter div on the bottom of childbox div like a footer.Here is the jsfiddle
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.parentbox {
width:500px;
height:400px;
border-style:solid;
text-align: center; /* align the inline(-block) elements horizontally */
}
.parentbox:before { /* create a full-height inline block pseudo-element */
content: ' ';
display: inline-block;
vertical-align: middle; /* vertical alignment of the inline element */
height: 100%;
}
.childbox {
display: inline-block;
vertical-align: middle; /* vertical alignment of the inline element */
padding: 5px;
border: 2px solid black;
}
</style>
</head>
<body>
<div class="parentbox">
<div class="childbox">
<div id="subfooter">
keep on bottom of box
</div>
</div>
</div>
</body>
</html>
Use following css:
.parentbox:before {
vertical-align: bottom;
}
.childbox {
vertical-align: bottom;
}
Currently you have set vertical-align: middle in your css causing your child element to appear in middle of screen.
* {box-sizing: border-box;}
body {margin: 0;}
.parentbox {
width:500px;
height:100vh;
border-style:solid;
text-align: center; /* align the inline(-block) elements horizontally */
}
.parentbox:before { /* create a full-height inline block pseudo-element */
content: ' ';
display: inline-block;
vertical-align: bottom; /* vertical alignment of the inline element */
height: 100%;
}
.childbox {
display: inline-block;
vertical-align: bottom; /* vertical alignment of the inline element */
padding: 5px;
border: 2px solid black;
}
<div class="parentbox">
<div class="childbox">
I shall be in the bottom of parentbox regardless of its size!
</div>
</div>
As per CSS specification, the parent must be set to position: relative and the child can be set to position: absolute or fixed
The modified fiddle for your amusement, know that the answer to this question can be found pretty much anywhere both on this website and the internet. Positioning, that's the word.
JSFiddle
Also, a nice link about an article on positioning, might be helpful.
Positioning
here maybe it help.
html,body{
height:100%;
margin:0;
padding:0;}
.parentbox{
background:#ccc;
height:100%;
display:flex;
align-items:center;
justify-content:center;}
.childbox{
align-self:flex-end;
background:#999;}
<div class="parentbox">
<div class="childbox">
I shall be in the middle of parentbox regardless of its size!
</div>
</div>
it has many ways to answer.
position absolute, and set bottom to 0.
display flex and set align items or align self
you need to read more about css.
wish it help.
You don't need to add the pseudo element for that just add position styling and there you go.
.parentbox {
width:500px;
height:400px;
border-style:solid;
text-align: center; /* align the inline(-block) elements horizontally */
position: relative;
}
.childbox {
display: block;
padding: 5px;
border: 2px solid black;
position: absolute;
left: 0;
right: 0;
bottom:0;
margin: 5px;
}
<div class="parentbox">
<div class="childbox">
I shall be in the middle of parentbox regardless of its size!
</div>
</div>
Here is your Answer, Through CSS itself you can achieve this.
.parentbox{
height: 300px;
width: 200px;
background-color: #990000;
position: relative;
}
.childbox{
color: #fff;
background-color: #000;
position: absolute;
bottom: 0;
padding: 10px;
}
<div class="parentbox">
<div class="childbox">
I shall be in the middle of parentbox regardless of its size!
</div>
</div>
Please try it once..
HTML
<div class="parentbox">
<div class="childbox">
I shall be in the middle of parentbox regardless of its size!
</div>
</div>
CSS
.parentbox {
width: 500px;
height: 400px;
border-style: solid;
text-align: center;
position: relative;
}
.parentbox:before { /* create a full-height inline block pseudo-element */
content: ' ';
display: inline-block;
vertical-align: middle; /* vertical alignment of the inline element */
height: 100%;
}
.childbox {
display: inline-block;
vertical-align: middle;
padding: 5px;
border: 2px solid black;
position: absolute;
bottom: 5px;
left: 12% !important;
}
I hope its helpful to you
.parentbox {
position:relative;
}
.childbox {
position: absolute;
left: 0;
right: 0;
bottom: 0;
}
There are many method to solute your requirement.Hope it can give you some tip
Related
I have two divs as you can see below. I want to create 5 px margin-top between the two. However margin-top of inner div cause unnecessary margin on the top of outer div, and hence cause unnecessary margin at top of the page.
Adding border property to outer div solve the problem and i can also fix it by other hacks like posioning and padding to outer div. However i am curious to know what is causing this problem ?
<div class="outer">
<div class="inner">
</div>
</div>
and here is the Css
* {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
.outer{
width:100%;
height:200px;
background:black;
}
.inner{
width:100%;
height:100px;
margin-top:5px;
background:red;
}
* {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
.outer {
width: 100%;
height: 200px;
background: black;
}
.inner {
width: 100%;
height: 100px;
margin-top: 10px;
background: red;
}
<div class="outer">
<div class="inner">
</div>
</div>
All you need is to make the display of the outer div inline-block.
display: inline-block;
cause from what I understand is two display block inside each other with behaving the same if one has margin the other will have and you will no notice that
html {
margin: 0;
}
* {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
.outer {
width: 100%;
height: 200px;
background: black;
display: inline-block;
}
.inner {
width: 100%;
height: 100px;
margin-top: 10px;
background: red;
}
<html>
<head>
<title>StackOverFlow 🍗</title>
</head>
<body>
<div class="outer">
<div class="inner">
</div>
</div>
</body>
</html>
The problem is the inner div is in the very beginning of outer. One trick would be adding padding-top to outer div:
.outer{
/* other stuff */
padding-top: 1px;
}
.inner{
/* other stuff */
margin-top: 4px;
}
or put all the 5px in padding-top
.outer{
/* other stuff */
padding-top: 5px;
}
Or you may use another element before the inner div, for example hr
<div class="outer">
<hr>
<div class="inner">
</div>
</div>
But the best trick is (as Mohammad said) make the outer div inline-block.
.outer{
/* other stuff */
display: inline-block;
}
I need to keep the subfooter div on the bottom of childbox div like a footer.Here is the jsfiddle
<div class="parentbox">
<div class="childbox">
<div id="subfooter">
keep on bottom of box
</div>
</div>
</div>
<style>
.parentbox {
width:500px;
height:400px;
border-style:solid;
text-align: center; /* align the inline(-block) elements horizontally */
}
.parentbox:before { /* create a full-height inline block pseudo-element */
content: ' ';
display: inline-block;
vertical-align: middle; /* vertical alignment of the inline element */
height: 100%;
}
.childbox {
display: inline-block;
vertical-align: middle; /* vertical alignment of the inline element */
padding: 5px;
border: 2px solid black;
height:40%
}
</style>
And also need to keep the text 'keep on bottom of box' vertical align
Just try it once.
HTML
<div class="parentbox">
<div class="childbox">
<div id="subfooter">
keep on bottom of box
</div>
</div>
</div>
CSS
.parentbox {
width: 500px;
height: 400px;
border-style: solid;
text-align: center;
position: relative;
}
.parentbox:before { /* create a full-height inline block pseudo-element */
content: ' ';
display: inline-block;
vertical-align: middle; /* vertical alignment of the inline element */
height: 100%;
}
.childbox {
display: inline-block;
vertical-align: middle;
padding: 5px;
border: 2px solid black;
position: absolute;
bottom: 5px;
left: 12% !important;
}
I have tried it and would this be anything close to what you are looking for?
All I've done is added
position: absolute;
To the .parentbox, and
position: absolute; bottom: 0;
To the .childbox
Hope this helps.
try this jsfilddle i assume that's which you want to do
HTML
<div class="parentbox">
<div class="childbox">
<div id="subfooter">
<div class = "footer">
keep on bottom of box
</div>
</div>
</div>
CSS
.parentbox {
width:500px;
height:400px;
border-style:solid;
text-align: center; /* align the inline(-block) elements horizontally */
}
.parentbox:before { /* create a full-height inline block pseudo-element */
content: ' ';
display: inline-block;
vertical-align: middle; /* vertical alignment of the inline element */
height: 100%;
}
.childbox {
display: inline-block;
vertical-align: middle; /* vertical alignment of the inline element */
padding: 5px;
border: 2px solid black;
height:40%
}
.footer {
padding-top: 145px;
}
https://jsfiddle.net/2L6yjckz/
I am trying to make a website navbar using divs instead of the usual lists. The divs are inline-blocks and on hover, the navbar expands. This should cause all the inner divs to expand (height:100%), while retaining centered text. I want to use only html and css.
One way is to set line-height and use vertical-align:middle. But since the div expands vertically in a dynamic manner, I cannot give a static value to line-height. I tried using line-height:100%, but that doesn't seem to help!
The html:
<html>
<head>
<title>Hello</title>
<link rel="stylesheet" type="text/css" href="style2.css">
</head>
<body>
<div id="headContainer">
<div id="logo"></div>
<div id="rightBar">
<div class="navelement">HOME</div>
<div class="navelement">HOME</div>
<div class="navelement">HOME</div>
<div class="navelement">HOME</div>
</div>
</div>
</body>
The Css:
* {
margin: 0;
padding: 0;
}
#headContainer {
height: 80px;
width: 100%;
background-color: white;
border: 5px solid red;
}
#headContainer:hover {
height: 100px; /*Dynamically change navbar height on hover, thus changing the height of all children*/
}
#rightBar {
line-height:100%;
display: inline-block;
width:80%;
height: 100%;
border: 5px solid blue;
vertical-align: middle;
}
.navelement{
display: inline-block;
height: 100%;
border:2px solid cyan;
}
The JSFIDDLE:
http://jsfiddle.net/GBz3s/1/
If you're using a precise height for your nav, then you can use a hack with padding by declaring the height, floating the divs, doing some math, and making adjustments accordingly. You can see an updated fiddle here: http://jsfiddle.net/Perry_/GBz3s/3/
.navelement{
float: left;
width: 24.25%;
border:2px solid cyan;
position: relative;
height: 70px;
padding: 25px 0 0 0;
}
#rightBar:hover .navelement {
height: 90px;
padding: 45px 0 0 0;
}
You can do it like this
you need to give display: inline-table; to .navelement and
display: table-cell; vertical-align: middle; to .navelement a
CSS
.navelement{
display: inline-table;
height: 100%;
border:2px solid cyan;
}
.navelement a {
display: table-cell;
vertical-align: middle;
}
So Im trying to do a simple header where I have the text aligned central with a 2px border running underneath this.
The code I have works and should work perfectly on every other browser except firefox which is aligning the border right of the page as if the beginning of the border is aligned in the center. If I remove the text align center the border is placed perfectly but the text is aligned to the left obviously. Why is firefox doing this?
CSS:
.my-title {
position: relative;
margin-bottom: 70px;
padding-bottom: 15px;
}
.my-title:after {
position: absolute;
bottom: 0;
height: 2px;
background-color: #ffd500;
content: "";
width: 100%;
}
.align-center {
text-align: center;
}
Html:
<div class="row">
<div class="col-xs-12">
<hgroup class="my-title align-center">
<h1>Header</h1>
<h2>Sub-Header</h2>
</hgroup>
</div>
</div>
since your pseudo element is in position:absolute; it has no width in the flow of your content and follows text-align:center; set on parent.( as absolute it has, in the flow of content, 0 for heigh and width).
3 possibilities:
add the rule : left:0; no matter what text-align on parent will be, it will be drawn from left coordonates.
add the rule : display:block; so it behaves like a block element and ill ignore the text-align, it will do a break line and will be drawn from left or right (follows the direction/dir of document).
keep it in the flow:
.my-title {
position: relative;
margin-bottom: 70px;
padding-bottom: 15px;
}
.my-title:after {
height: 2px;
background-color: #ffd500;
content: "";
width:100%;
display:inline-block;
vertical-align:bottom;
}
.align-center {
text-align: center;
}
Using property left solved the problem:
.my-title:after {
left: 0;
}
Demo
Try this:
#-moz-document url-prefix()
{
.my-title
{
position: relative;
margin-bottom: 70px;
padding-bottom: 15px;
}
.my-title:after
{
position: absolute;
bottom: 0;
height: 2px;
background-color: #ffd500;
content: "";
width: 100%;
}
.align-center
{
text-align: center;
}
}
I'm trying to use the table-cell way to center a div vertically and horizontally.
It works when I use the following code:
div {
display: table;
}
.logo {
display: table-cell;
position: absolute;
vertical-align: middle;
left: 0;
right: 0;
bottom: 0;
top: 0;
margin: auto;
}
But I'd rather wrap .logo in another div called .center like here JSFiddle, but for some reason, although it works in JSFiddle, it isn't working for me on my site.
Here is a good starting point.
HTML:
<div class="containing-table">
<div class="centre-align">
<div class="content"></div>
</div>
</div>
CSS:
.containing-table {
display: table;
width: 100%;
height: 400px; /* for demo only */
border: 1px dotted blue;
}
.centre-align {
padding: 10px;
border: 1px dashed gray;
display: table-cell;
text-align: center;
vertical-align: middle;
}
.content {
width: 50px;
height: 50px;
background-color: red;
display: inline-block;
vertical-align: top; /* Removes the extra white space below the baseline */
}
See demo at: http://jsfiddle.net/audetwebdesign/jSVyY/
.containing-table establishes the width and height context for .centre-align (the table-cell).
You can apply text-align and vertical-align to alter .centre-align as needed.
Note that .content needs to use display: inline-block if it is to be centered horizontally using the text-align property.
This would be easier to do with flexbox. Using flexbox will let you not to specify the height of your content and can adjust automatically on the height it contains.
DEMO
here's the gist of the demo
.container{
display: flex;
height: 100%;
justify-content: center;
align-items: center;
}
html
<div class="container">
<div class='content'> //you can size this anyway you want
put anything you want here,
</div>
</div>