Why the second DIV when using display: inline-block is pushing downward?
Here is my code what I have tried.
HTML
<div class="div1"></div><div class="div2"></div>
CSS
.div1{
width: 400px;
height: 500px;
background: #F00;
display: inline-block;
}
.div2{
width: 300px;
height: 200px;
background: #00F;
display: inline-block;
}
jsFiddle: http://jsfiddle.net/enve/fbreJ/
I know that it works using float: left, but I can't use it in what I am trying to do.
Because that's the way inline-block elements work.
To fix that, just add a vertical aligment:
.div2 {
vertical-align: top;
}
jsFiddle Demo: http://jsfiddle.net/enve/fbreJ/1/
Related
I'm trying to center align a div that is located within another div. I want to vertically center the "options" div that is located inside the "plan-container"
Thanks in advance.
.plan-container {
width: 960px;
height: auto;
margin-top: 62px;
overflow: hidden;
background-color: red;
}
.options {
float: left;
width: 151px;
height: 100px;
background-color: green;
}
.plan {
float: left;
width: 220px;
height: 600px;
margin-left: 23px;
background-color: purple;
}
.plan:last-child {
float: right;
}
.plan-featured{
width: 300px;
height: 600px;
background-color: purple;
}
<div class="plan-container">
<div class="options">Options</div>
<div class="plan">Box one</div>
<div class="plan plan-featured">Box two</div>
<div class="plan">Box three</div>
</div>
Vucko's answer is correct. I wanted to add a comment, but since I don't have enough reputation yet, I'll just post it as an answer.
You can use the vertical-align property on the inner div that needs centering. This property only works on elements that have display:inline-block or display:table. Refer to the actual spec here.
Repeating Vucko's answer:
.options {
display: inline-block;
vertical-align: middle;
}
You can use inline-block instead of float, and than you can use the vertical-align property:
.plan-container>div{
display: inline-block;
vertical-align: middle;
}
JSFiddle
However, beware of the whitespace issue.
Try it-
.plan-container {
display: flex;
flex-wrap: wrap; /* optional. only if you want the items to wrap */
justify-content: center; /* for horizontal alignment */
align-items: center; /* for vertical alignment */
}
I have a div containing an input and an a element:
.wrapper {
width: 300px;
display: inline-block;
}
.custom-input {
display: block;
width: 100%;
}
.button {
width: 20px;
height: 20px;
background-color: #ccc;
display: block;
}
<div class="wrapper">
<input class="custom-input" type="text" />
<a class="button"></a>
</div>
Here's a jsfiddle.
I want my input and my button inline. The input with button always has 100% width of the wrapper. In some cases, I want to remove the button. The input then has 100% width of the wrapper div.
It is only inline when I use inline-flex for the wrapper. But I want it to be able to run on old browsers (IE 8-9), and I want my input and my element to always have 100% width of wrapper.
How can I do it?
Using width: 100% on your input will make it take all the horizontal space available, pushing the button to the line below.
This should work :
.wrapper{
width: 300px;
display: inline-block;
}
.custom-input{
display: inline-block;
}
.button{
width: 20px;
height: 20px;
background-color: #ccc;
display: inline-block;
}
Here's the updated jsfiddle : http://jsfiddle.net/k6yhtf92/3/
try to use display: inline-block instead display:block
updated css
.wrapper{
width: 300px;
display: block;
}
.custom-input{
display: inline-block;
}
.button{
width: 20px;
height: 20px;
background-color: #ccc;
display: inline-block;
}
I am trying to center 3 boxes in the middle of my container. However, I cannot get it working.
What am I doing wrong?
HTML
<div id="boxes">
<div class="box">Box1</div>
<div class="box">Box2</div>
<div class="box">Box3</div>
</div>
CSS
#boxes {
width: 800px;
background-color: yellow;
float: left;
}
#boxes .box {
width: 100px;
height: 100px;
margin: 10px;
float: left;
background-color: blue;
}
JSFiddle with the problem: http://jsfiddle.net/3cUF5/
If you need a crossbrowser solution, then use display: inline-block for inner boxes and align with text-align: center on parent.
Example fiddle: http://jsfiddle.net/RhBEz/1/
Css
#boxes {
width: 800px;
background-color: yellow;
float: left;
text-align: center;
}
#boxes .box {
display: inline-block;
width: 100px;
height: 100px;
margin: 10px;
background-color: blue;
}
A second approach is using display: flex, but this will work only on recent Chrome and Firefox:
Example: http://jsfiddle.net/2mxET/1/
Css
#boxes {
width: 800px;
background-color: yellow;
float: left;
display: flex;
justify-content:center;
}
#boxes .box {
width: 100px;
height: 100px;
margin: 10px;
background-color: blue;
}
Using float: left on .box means they cannot be centered. You also needed to add text-align: center to #boxes
Please see a working version here http://jsfiddle.net/s455x/
Just add margin:0 auto; for #boxes
CSS
#boxes {
width: 800px;
background-color: yellow;
float: left;
margin-left:auto;
margin-right:auto;
}
Now your outer container #boxes is aligned to center
http://jsfiddle.net/3cUF5/2/
#boxes {
text-align: center;
}
#boxes .box {
float: left; /* removed this line */
display: inline-block;
}
When you're trying to center elements, it's not a good idea to use floats. You have two basic options when centering elements.
do display: inline-block; to the child elements, and text-align: center; to the parent element
or
do display: block; to the element you want centered, as well as margin: 0 auto;
Not sure what browsers' you are trying to support but FlexBox makes this super easy, and if non-supported browsers are a requirement then you can just provide a fallback that works.
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>
http://jsfiddle.net/dsUnc/
However when I replace an img tag with text - elements are positioned like expected (next to each other with the same height).
Happens on all browsers.
How to fix it?
float: left is not an option
HTML:
<div id='main'>
<div id='first'>
<img src='https://www.google.ru/images/icons/product/chrome-48.png' height='30'>
</div>
<div id='second'>Text</div>
</div>
CSS:
div {
border: 1px solid gray;
height: 30px;
}
#first {
display: inline-block;
height: 30px;
}
#second {
display: inline-block;
height: 30px;
}
Add vertical-align: top to do it without float.
jsFiddle
#first {
display: inline-block;
height: 30px;
vertical-align: top;
}
#second {
display: inline-block;
height: 30px;
vertical-align: top;
}
Make the container with relative position and the div you want to position with absolute position with top:0;
http://jsfiddle.net/uqAGt/
Just add float: left or vertical-align: top to your child divs:
Demo: http://jsfiddle.net/dsUnc/2/
Demo: http://jsfiddle.net/dsUnc/5/