Could anybody write the CSS fragment to do this?
<div class="container">
<span class="left">Left</span><span class="right">Right</span>
</div>
Here's the CSS for .container:
.container {
position:absolute;
bottom:0;
margin: 0 5px 5px 5px;
}
Notice the position is absolute because it is "absolute positionated" on its containing element.
I've alredy tried float:left/float:right on the two nested elements but nothing happens.
Set the elements to block, set a width and float them.
.left{
display: block;
float:left;
width: 100px;
}
.right{
display: block;
float:right;
width: 100px;
}
Example: http://jsfiddle.net/LML2e/
float: left and float: right will work perfectly when you set a (relative or absolute) width for your .container div
Demo
.container {
position:absolute;
bottom:0;
margin: 0 5px 5px 5px;
width: 200px; //either absolute width
width: 100%; // or relative width
}
Side note: If you set the .container to width: 100% you will get ugly scroll bars due to the margin. Just use the margin in the .left and .right classes. See here.
You need to set a width in order to use float. If you want a width of 100% you can set .container { width: 100%; } or improve your code into something like:
.container {
position:absolute;
bottom:5px;
left:5px;
right:5px;
}
Related
I want to change the inner div height according to the outer div.
In my case I have two inner divs one with fixed height and the outer div expands its heigh according to that (I use 'clearfix' there). But I need the other inner div also change its height to the outer div height
height : 100%; did not work.
This is a JsFiddle link to show my problem.
https://jsfiddle.net/qjsqxk7j/18/
HTML ->
<div class="outer clearfix">
<div class="col-xs-3 left">
</div>
<div class="col-xs-9 right">
<div class="inner">
<label>sssss</label>
<button class="btn-default">
sss
</button>
</div>
</div>
CSS ->
.right {
height: 100%;
background-color: blue;
}
.left {
height: 200px;
background-color: red;
}
.inner{
position: relative;
top: 50%;
transform: translateY(-50%)
}
.outer {
background-color: yellow;
position: relative;
max-width : 500px;
}
Actually I want the Blue div take all the yellow space left and the button and label comes to its vertical centre.
(I want my outer div to get one of its inner div height and changed accordingly.And then when the outer div height changes the other inner div also has to change its height. But it won't.)
Try below code and yes I have remove clearflex from parent element as it clear float for both child element. This increase and decrease it's hide when child element height increase and vise versa i.e. same for parent element.
.outer{
width:100%;
height:auto;
background:yellow;
position:relative;
border-bottom:1px solid #111;
display:table;
}
.outer > .right{
width:50%;
height:auto;
background:red;
float:left;
word-break : break-all;
}
.outer > .left{
width:50%;
height:auto;
background:blue;
float:left;
}
see here jsfiddle
i used display:table-cell on the 2 columns ( left and right ) and display:table to .outer . for this to work you need to overwrite the float:left from the columns given by bootstrap
code added
.left,.right {
display:table-cell;
float:none;
vertical-align:middle;
}
.outer {
display: table;
}
or with a little JQ : jsfiddle
code :
var hgt = $(".outer").height()
$(".left").height(hgt)
let me know if this was what you were looking for
change some css Remove your Comment code
.right {
height: 200px;
background-color: red;
}
.left {
height: 100%;
background-color: blue;
}
.inner{
position: relative;
top: 50%;
transform: translateY(-50%);
}
.outer {
background-color: yellow;
position: relative;
max-width : 500px;
height:200px;
}
https://jsfiddle.net/qjsqxk7j/25/
Pretty new to html and css and i'm just having the problem described in the title. My nav is pushing down div with the id main.
nav{
width:120px;
float:left;
margin:0px 5px 0px 5px;
#main{
display:inline-block;
padding: 1em;
float:left;
position:relative;
min-width: 900px;
Any help is appreciated, cheers.
edit:
Hi guys, maybe i should explain it better. On the page there is a nav to the left and a div to the right of it. When the windows width is made smaller the div to the right is being pushed below the nav instead of stay where it is and it's content being displayed off the screen.
You have explicitly told your element to behave like that. When you set min-width and a width in pixels, you are telling your elements to stay the same size no matter what happens. Remove min-width and set width to a percentage value like 1% instead of 50px like this:
nav {
width: 50%;
background: red;
height: 50px;
float:left;
}
#main {
display: inline-block;
height:50px;
float:left;
position: relative;
width: 50%;
background: black;
}
body {
margin: 0;
}
<nav></nav>
<div id="main"></div>
i have 2 div children floated (left and right) in 1 row.
First div's height is higher then second div. So what i want to do is:
Fit second div height according to the parent container, so it will
be the same for both children
Vertical-align the content of the second div
I tried
.container { overflow: hidden; }
#boxLeft{ width: 50%; float: left;}
#boxRight{ width: 50%; float: right; line-height: 100% }
#box2Right p{ text-align: right; vertical-align: middle;}
but line-height: 100% is not working (is working with pixels but i MUST use 100% because i have different rows with different heights).
I also would like to avoid using table if it's possible.
this is my fiddle: http://jsfiddle.net/qYBfu/2/
Thanks
You might want to use display:table like this:
DEMO:http://jsfiddle.net/qYBfu/4/
.container {
display:table;
}
#boxLeft{
display:table-cell;
}
#boxRight{
display:table-cell;
}
You can check this question: Are floats bad? What should be used in its place
Hope this helps:
For make both divs containers same "height", you can use the following code:
#boxRight{ width: 50%; float: right; background: silver; line-height: 100%; margin-bottom: -99999px; padding-bottom: 99999px; }
http://jsfiddle.net/qYBfu/5/
And what is not clear for me is if you want to align the right content in the middle of the column.
In that case, I think either you have to align only one row, where you can use height & line height equal to the left column (that imply to know the height in advance) or use a JS solution.
You can stretch the left div to full height of parent by making the parent positioned and applying position:absolute; top:0; bottom:0 to the left div.
for aligning the text vertically, you can make use of css3 flex box (if ancient browser support is not an issue, hopefully)
.container {
position:relative;
overflow: hidden;
}
#boxLeft {
width: 50%;
display:inline-block;
background: silver;
}
#boxRight {
display:-webkit-flex;
-webkit-align-items:center;
-webkit-justify-content:center;
position:absolute;
top:0;
right:0;
bottom:0;
width: 50%;
background: pink;
text-align:center;
}
JSFiddle
This technique just uses css :before pseudo-element, without absolute positioning
.container { white-space: nowrap; text-align: center; }
You can avoid the text-align, just add it if you want your boxes centered
.container:before{ content:""; width: 1px; height: 100%; display: inline-block; vertical-align: middle; }
.item{ display: inline-block; vertical-align: middle; white-space: normal; text-align: center; width: 30%; }
DEMO: http://jsfiddle.net/qYBfu/9/
Is there any alternative to vertical-align?
For using vertical align I am having to set the display to table-cell. When I have the display set to table-cell the height of the div that I have set does not work. I have overflow-y set to auto on that div. What I am trying to do is align the content inside the div from the bottom of that div... I am not able to do that.. Any alternatives?
This is what I have right now:
#container{
height:375px;
border:1px solid #000;
position:relative;
overflow-y:auto;
display:table-cell;
vertical-align:bottom;
}
#container > div{
margin:0;
margin-bottom:5px;
width:660px;
position:relative;
}
There are 2 alternatives, one is to set line-height.. and other one is to set the parent element to position: relative; and than set your child element to position: absolute; and later, use top: 50%; and left: 50%; and than deduct the margins which will be 1/2 of the total height and width of the absolute element itself...
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
left: 50%;
margin-top: -100px; /* Assuming height of the element is 200 */
margin-left: -200px; /* Assuming width of the element is 400 */
}
Here's a catch though, using absolute will require fixed dimensions of the element you are trying to align vertically center
Vertical Aligning an element using display: table-cell;
Demo
.parent {
height: 200px;
background: #eee;
display: table-cell;
width: 300px;
vertical-align: bottom;
}
.child {
height: 20px;
background: #aaa;
}
Also it would be better if you use display: table; as a wrapping element.
try this:
#container{
height:375px;
line-height:375px;
}
#container > div{
display:inline-block;
line-height:1;
}
What would be the correct method to vertically center any content in a defined width/height div.
In the example there are two contents with different heights, what is the best way to center vertically both using the class .content . (and it works for every browser and without the solution of table-cell)
Have some solutions on mind, but would like to know other ideas, one is using position:absolute; top:0; bottom: 0; and margin auto.
I have researched this a little and from what I have found you have four options:
Version 1: Parent div with display as table-cell
If you do not mind using the display:table-cell on your parent div, you can use of the following options:
.area{
height: 100px;
width: 100px;
background: red;
margin:10px;
text-align: center;
display:table-cell;
vertical-align:middle;
}
Live DEMO
Version 2: Parent div with display block and content display table-cell
.area{
height: 100px;
width: 100px;
background: red;
margin:10px;
text-align: center;
display:block;
}
.content {
height: 100px;
width: 100px;
display:table-cell;
vertical-align:middle;
}
Live DEMO
Version 3: Parent div floating and content div as display table-cell
.area{
background: red;
margin:10px;
text-align: center;
display:block;
float: left;
}
.content {
display:table-cell;
vertical-align:middle;
height: 100px;
width: 100px;
}
Live DEMO
Version 4: Parent div position relative with content position absolute
The only problem that I have had with this version is that it seems you will have to create the css for every specific implementation. The reason for this is the content div needs to have the set height that your text will fill and the margin-top will be figured off of that. This issue can be seen in the demo. You can get it to work for every scenario manually by changing the height % of your content div and multiplying it by -.5 to get your margin-top value.
.area{
position:relative;
display:block;
height:100px;
width:100px;
border:1px solid black;
background:red;
margin:10px;
}
.content {
position:absolute;
top:50%;
height:50%;
width:100px;
margin-top:-25%;
text-align:center;
}
Live DEMO
This could also be done using display: flex with only a few lines of code. Here is an example:
.container {
width: 100px;
height: 100px;
display: flex;
align-items: center;
}
Live Demo
I found this solution in this article
.parent-element {
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.element {
position: relative;
top: 50%;
transform: translateY(-50%);
}
It work like a charm if the height of element is not fixed.
Simple trick to vertically center the content of the div is to set the line height to the same as height:
<div>this is some line of text!</div>
div {
width: 400px
height: 50px;
line-height: 50px;
}
but this is works only for one line of text!
Best approach is with div as container and a span with the value in it:
.cont {
width: 100px;
height: 30px;
display: table;
}
.val {
display: table-cell;
vertical-align: middle;
}
<div class="cont">
<span class="val">CZECH REPUBLIC, 24532 PRAGUE, Sesame Street 123</span>
</div>
I would say to add a paragraph with a period in it
and style it like so:
<p class="center">.</p>
<style>
.center {font-size: 0px; margin-bottom: anyPercentage%;}
</style>
You may need to toy around with the percentages to get it right
margin: all_four_margin
by providing 50% to all_four_margin will place the element at the center
style="margin: 50%"
you can apply it for following too
margin: top right bottom left
margin: top right&left bottom
margin: top&bottom right&left
by giving appropriate % we get the element wherever we want.