how could i do vertical-align:bottom for some divs that have float:left?
you can see the source here: http://jsfiddle.net/Lb1su4w2/
this is what i have: (every color is a different div)
this is what i want to have:
Vertical align only works with inline block elements, floated elements ignore the vertical align property.
Update the box class with the following:
.box {
display: inline-block;
vertical-align: bottom;
width:80px;
}
I would make them all inline block elements and remove the whitespace with one of these techniques.
Updated fiddle: http://jsfiddle.net/9rcnLb8n/
Alternatively you could use flexbox with the align-self: flex-end; property.
HTML:
<div id='wrapper'>
<div id='a' class='box'>aa</div>
<div id='b' class='box'>bb</div>
<div id='c' class='box'>cc</div>
<div id='d' class='box'>dd</div>
</div>
CSS:
.box {
width:80px;
vertical-align: bottom;
display: inline-block;
}
#a {
background-color:red;
height:200px;
}
#b {
background-color:green;
height:100px;
}
#c {
background-color:yellow;
height:150px;
}
#d {
background-color:blue;
height:300px;
}
#wrapper {
border: 1px solid pink;
display: table;
}
In this case don't use:
float: left;
Instead use:
display: inline-block;
Check out my fiddle:
http://jsfiddle.net/Lb1su4w2/6/
Related
There are two situations:
1. Two divs A & B in a container side by side
2. One div A in the same container in the center
Here is an example: http://jsfiddle.net/lvil/toj9w9zz/
.container_one, .container_two {width:200px; height:100px; background-color:red;}
.container_one .inner_a {width:100px; background-color:green; float:left;}
.container_one .inner_b {width:100px; background-color:blue; float:right;}
.container_two .inner_a{width:100px; margin:0 auto; background-color:green;}
<div class="container_one">
<div class="inner_a">
a
</div>
<div class="inner_b">
b
</div>
</div>
<br>
<div class="container_two">
<div class="inner_a">
a
</div>
</div>
Let's say the containers have the same class(not like in the example).
The number of inner DIV always changes (1 or 2).
Is it possible to make css fit both situations?
I have tried many things but could not achieve this.
Try inline-block, keep this inner_a rules for both divs and remove floats.
.container_one, .container_two {
background-color: #ff0000;
height: 100px;
text-align: center;
width: 200px;
}
.container_two .inner_a {
background-color: #008000;
display: inline-block;
width: 100px;
}
The following code is the best and least:
.inner_a {
background-color: green;
display: table;
margin: 0 auto;
width: 100px;
}
.container_one .inner_a {
float:left;
}
.container_one, .container_two {
width:200px;
height:100px;
background-color:red;
}
.container_one .inner_b {
width:100px;
background-color:blue;
float:right;
}
What you want to do is use display:inline-block instead of floating and then target the divs with class .inner_a when they are the last child of the parent, like so:
.container_one>div{
display:inline-block;
width:100px;
}
.inner_a{
background-color:green;
}
.inner_a:last-child{
margin:0 auto;
}
.inner_b{
background-color:blue;
}
i am attempting to align 3 sub-div elements in one line, first element with left floating, third - with right and 2nd - centered.
Below my draft. What I have missed?
http://jsfiddle.net/yDzL9/
In my real e-shop the problem is in aligning of 2nd div which contains input (button), but in jsfiddle's example the problem with the third div.
Use display: inline-block for all sub elements and set white-space: nowrap; property to parent div.
Example-
HTML:
<div id="container">
<div class="wishlist">
</div>
<div class="cart">
</div>
<div class="compare">
</div>
</div>
Method 1 (Without Floated div):
CSS:
#container {
height:26px;
width:300px;
background-color:#009900;
white-space: nowrap;
}
#container div{
display: inline-block;
width:100px;
height:26px;
}
Working Example
Method 2 (With Floated div)
CSS:
#container {
height:26px;
width:300px;
background-color:#009900;
white-space: nowrap;
text-align: center;
}
#container div{
display: inline-block;
width:50px;
height:26px;
}
.wishlist{
background-color:blue;
float: left;
}
.cart{
background-color:black;
}
.compare{
background-color:red;
float: right;
}
Working Example
Using the display: flex css rule it will work as you want it to!
HTML:
<div id="container">
<div class="wishlist"></div>
<div class="cart"></div>
<div class="compare"></div>
</div>
CSS:
body {
margin: 0;
padding: 0;
}
#container {
height:26px;
width:300px;
padding: 10px;
display: flex;
background-color:green;
}
#container > div {
height: 90%;
width: 90px;
}
.wishlist {
float: left;
background-color:blue;
}
.cart {
margin: 0 auto;
background-color:yellow;
}
.compare {
float: right;
background-color:red;
}
As shown in this jsfiddle, and here is another one.
I know this is a drawn out question but with all the examples I could find on the net for some reason I cannot replicate.
I need 2 div boxes that are 300px; wide to be next to each other and be centered in the middle.
I have the following code
<div class="container">
<div class="box1"></div>
<div class="box2"></div>
</div>
<style>
.container {
width:100%;
text-align:center";
}
.box1 {
float:left;
width:300px;
}
.box2 {
float:right;
width:300px;
}
</style>
For whatever reason I can get the boxes next to each other but it stays on the left side of the screen instead of the center. I just need them centered
Example: http://jsbin.com/ubanuf/12/edit (not mine)
It is cause you have float: left. There are several ways to do that, you can add display: inline-block; or add margin: 0 auto;
.box1 {
float:left;
width:300px;
display: inline-block;
}
.box2 {
float:right;
width:300px;
display: inline-block;
}
Change your CSS as follow
.container {
width:100%;
text-align:center;
}
.box1, .box2 {
display: inline-block;
width:300px;
}
inline-block elements will be align with the text, if you set the text-align: center for the container div.
you have extra (") double quote at your CSS text-align: center";.
Here is an other way (there are plenty indeed!):
.container {
margin: 0 auto;
width: 100px;
}
.box1 {
width:50%;
display: inline-block;
}
.box2 {
float: right;
width:50%;
display: inline-block;
}
There is redundant space between the two child DIVs if you use inline-block, here is my solution.
container {
width:100%;
text-align:center;
font-size: 0; // hack the space
}
.container div{
font-size: 16px; // hack "hack the space"
}
.box1 {
display:inline-block;
width:300px;
}
.box2 {
display:inline-block;
width:300px;
}
you does not need to do any thing..just give box1 and box2 width in "%" or give container width in "Pixel". That will solve your problem
Like This
<style>
.container {
width:100%; //or change it to 600px
text-align:center";
}
.box1 {
float:left;
width:300px; //or change it to 50%
}
.box2 {
float:right;
width:300px; //or change it to 50%
}
</style>
Try to keep everything in "%" or "Pixel"
Thanks
I just discovered the display: table and display: table-cell; vertical-align: middle method to align divs verticaly today.
I am using it at many places of my code, but i meet a specific case where i can't make it works!
When i want to verticaly align n elements containing elements which has the same font-size, everything works fine, but if i want a text bigger on one inline elements than others, here is what happens:
HTML:
<div class="wrapper">
<div class="menu">
<div class="left"><span>LEFT</span>
</div>
<div class="middle"><span>MIDDLE</span>
</div>
<div class="right"><span>RIGHT</span>
</div>
</div>
</div>
CSS:
button {
margin:0;
padding:0;
cursor:pointer;
}
.wrapper {
height: 300px;
width: 600px;
background-color:red;
white-space: nowrap;
}
.menu {
height: 100%;
width: 80%;
}
.left {
height: 100%;
width: 20%;
display:inline-table;
background-color:blue;
}
.middle {
height: 100%;
width: 60%;
display:inline-table;
background-color:orange;
}
.right {
height: 100%;
width: 20%;
display:inline-table;
background-color:green;
}
span {
display:table-cell;
vertical-align:middle;
}
.middle span {
font-size:5em;
}
RESULTS:
Here is a JSFiddle showing the issue
How to avoid that? Maybe there is a better way than the inline-table trick for that case?
Just vertical align the direct children of the container, in your case this will do the job:
.menu > div {
vertical-align: middle;
}
Another solution is to add a fixed line height to the spans:
.menu span { line-height: 50px;}
I have a simple div with a display: inline-block; and a wrap to center it. It appears a pixel at the bottom of the content. Do you know why and how to get rid of it?
Here is the problem to check: http://jsfiddle.net/8S8aH/
HTML:
<div class="wrap">
<div id="content"></div>
</div>
CSS:
body{
margin:0;
}
.wrap {
text-align: center;
background:red;
}
#content {
margin:0px auto;
text-align:left;
width:250px; height:100px;
display: inline-block;
background:whiteSmoke;
}
Change the vertical-align value on #content
#content {
display: inline-block;
vertical-align: bottom;
}
http://jsfiddle.net/8S8aH/4/
Use display: block for content div
#content {
margin:0px auto;
text-align:left;
width:250px;
height:100px;
display: block;
background:whiteSmoke;
}
JS Fiddle Demo
Personally, I prefer this to clear space in inline-block elements.
Demo
#content:after{
content:'\00a0';
}
There are alternatives as well.