Here is the code.
I have typical form with label, input and helper:
The code:
html:
<div class="container">
<span class="label">Label:</span>
<div class="el">
<input>
<span>helper helper helper</span>
</div>
</div>
css:
.container {
outline: 1px solid black;
width: 200px;
height: 100px;
}
.label{
display: inline-block;
width: 30%;
}
.el{
display: inline-block;
width: 60%;
}
input{
width: 50%;
}
The problem is that Label: aligned opposite second row. I know how to fix that: i can use float: left; or vertical-align: top; in the .label class, but i want to know, why is that happening? Why Label: jump to second row?
p.s. Sorry for my english.
This is because the default value for vertical-align is baseline, which...
Aligns the baseline of the element with the baseline of its parent
For reference, here is the article on Mozilla Developer Network
Please try this one;
.inner {
display: inline-block;
vertical-align: middle;
background: yellow;
padding: 3px 5px;
}
DEMO
I think due to the display:inline-block defined is creating this situation..
Better use display:inline
This will solve your problem...
And here is the code
CSS
.container {
outline: 1px solid black;
width: 250px;
height: 100px;
}
.label{
display: inline;
width: 50%;
}
.el{
display: inline;
width: 60%;
}
input{
width: 50%;
}
HTML
<div class="container">
<span class="label">Label:</span>
<div class="el">
<input />
<span>helper helper helper</span>
</div>
</div>
Related
I'm trying to float two elements of different height, with the shorter one being middle centered.
If I use inline-block instead of float the vertical centering works correctly, but the 'middle' div doesn't stretch to fit.
float example: http://jsfiddle.net/jonofan/r3pejgud/3/
inline-block: http://jsfiddle.net/jonofan/87kwpuxa/
Also interested to hear if people think should be going about this layout a different way entirely.
EDIT: I don't see this to be a duplicate of this question because my current code doesn't use table display. It just so happens that 'use table display' is the best answer in this case.
.header {
width: 600px;
border: 1px solid black;
display: inline-block;
}
.header img {
width: 50px;
float: left;
}
.middle {
position: relative;
top: 50%;
transform: translateY(-50%);
border: 1px solid gray;
height: 20px;
overflow: hidden;
}
.middle .itemheading {
position: absolute;
bottom: 0;
left: 0;
font-size: 1.8em;
}
.middle .itemdate {
position: absolute;
bottom: 0;
right: 0;
}
<div class='header'>
<img src='http://i.imgur.com/J2HToiP.jpg' />
<div class='middle'>
<span class='itemheading'>Heading Text</span>
<span class='itemdate'>Wednesday 01 July 2015</span>
</div>
</div>
Not perfect but you don't have to resort to absolute positioning. Use display: table-cell; instead.
Not sure how the border for .middle is supposed to work.
<div class='header'>
<div class="img-wrap">
<img src='http://i.imgur.com/J2HToiP.jpg' />
</div>
<div class='middle'>
<span class='itemheading'>Heading Text</span>
<span class='itemdate'>Wednesday 01 July 2015</span>
</div>
</div>
.header {
width: 600px;
border: 1px solid black;
}
.header img {
width: 50px;
}
.header .img-wrap {
display: table-cell;
vertical-align: middle;
}
.header .middle {
width: 100%;
display: table-cell;
vertical-align: middle;
border: 1px solid gray;
}
.itemdate {
float: right;
}
http://jsfiddle.net/87kwpuxa/2/
I want to divorce two cells, making some white area between them while they are horizontally aligned, any idea how to achieve this?
<div class="bubble">
<div id="lover1" class="lover">cell1.</div>
<div id="lover2" class="lover">cell2.</div>
</div>
I have tried:
<style>
.bubble {
position: absolute;
left: 93px;
top: 21px;
width: 335px;
height: 284px;
display: table;
background-color: #ffcc99;
}
.lover {
display: table-cell;
vertical-align: middle;
text-align: center;
}
#lover2{
margin-left: 100px;
}
</style>
<div class="bubble">
<div id="lover1" class="lover">cell1.</div>
<div id="lover2" class="lover">cell2.</div>
</div>
CSS:
.bubble .lover {display:inline-block;margin-left:10px;}
That's all the CSS you'll need. However you have used absolute positioning for some reason, so I can't comment on whether this is actually appropriate in the context.
Use the border-spacing property:
.bubble {
/* add these lines */
border-collapse: separate;
border-spacing: 10px 0px;
position: absolute;
left: 93px;
top: 21px;
width: 335px;
height: 284px;
display: table;
background-color: #ffcc99;
}
.lover {
display: table-cell;
vertical-align: middle;
text-align: center;
/* add some color to your cells to see there boundings */
background: red;
}
#lover2{
margin-left: 100px;
}
That's very easy to achieve if you use flexbox to do the trick. If you don't mind changing the property of bubble class, you can do flexbox
Please refer to https://css-tricks.com/snippets/css/a-guide-to-flexbox/ for more information.
I'm trying to put two spans in a div, one on each side, and both aligned to the bottom of the div, without using absolute positioning (since that ignores padding, etc and I always feel bad after resorting to it). The text in the right span is taller than in the left span. If I use vertical-align to position them, it doesn't take affect if they are both floated, however without them both being floated, they will not be horiziontally aligned properly. I don't have any guarantees on which of the two spans will have more text in it.
http://jsfiddle.net/gsvfn07f/
<div class="outer">
<div class="inner">
<span class="left">left</span>
<span class="right">right</span>
<div class="clearfix"></div>
</div>
</div>
.outer {
width: 40%;
height: 200px;
border: 1px solid red;
}
.inner {
border: 1px solid green;
padding: 5px;
}
.left {
float: left;
display: inline-block;
vertical-align: baseline;
}
.right {
float: right;
font-size: 2em;
}
.clearfix {
clear: both;
}
You can use line-height to get margin from top for your text.
This code seems to do what you want:
.outer {
width: 40%;
height: 200px;
border: 1px solid red;
}
.inner {
height: 35px;
width: 100%;
border: 1px solid green;
}
.left {
line-height: 48px;
float: left;
width: 50%;
}
.right {
display: block;
float: right;
width: 50%;
text-align: right;
font-size: 2em;
}
<div class="outer">
<div class="inner">
<span class="left">left</span>
<span class="right">right</span>
</div>
</div>
Why first "display: inline-block;" div below that the second ?
I want two div in one line.
see example http://jsfiddle.net/ubo2bok9/
CSS code
.conteiner {
display: inline-block;
height: 300px;
width: 200px;
background-color: #2e9;
margin: 2px;
}
.inConteiner {
width: 190px;
height: 30px;
background-color: #29e;
color: white;
margin: 2px;
}
HTML code
<div class="conteiner">
first
</div>
<div class="conteiner" id="BaseConteiner">
second
<div class="inConteiner">
<p> 111111111111111 </p>
</div>
<div class="inConteiner">
<p> 222222222222222 </p>
</div>
<div class="inConteiner">
<p> 333333333333333 </p>
</div>
</div>
You just need to set vertical-align:middle; to your .conteiner element because the text is being aligned with the elements in another container.
See the fiddle
Add a property float:left to your .conteiner
DEMO
.conteiner {
display: inline-block;
height: 300px;
width: 200px;
background-color: #2e9;
margin: 2px;
float:left;
}
you could use like this
.conteiner {
display: table-cell;
height: 300px;
width: 200px;
background-color: #2e9;
margin: 2px;
float:left;
}
for fixed width just use table-cell it will work fine.
add vertical-align:top; in .conteiner div
.conteiner {
display: inline-block;
height: 300px;
width: 200px;
background-color: #2e9;
margin: 2px;
vertical-align:top;
}
DEMO
html
<div class="main">
<h1>Test</h1>
<span class="details">Jan 21, 2014</span>
</div>
css
.main{
background-color: #666666;
border: 1px solid red;
}
h1{
background-color: #383838;
display: inline-block;
margin: 0;
padding: 0;
}
.main span{
display: inline-block;
vertical-align: middle;
}
jsFiddle
This seems to be really a simple problem, but I'm not able to fix it or I'm being too lazy. Just would like to vertical-align: middle and align it to the right of the div, if I use float: right the element attaches to the bottom of the border above. Don't want to use line-height as well.
If you want a solution that doesn't include line-height, and float, also you want to align the span to the right ....
Then use display: table; for the parent element having nested child elements set to display: table-cell;
Demo
.main{
background-color: #666666;
border: 1px solid red;
display: table;
width: 100%;
}
h1{
background-color: #383838;
display: table-cell;
margin: 0;
padding: 0;
width: 20%;
}
.main span{
display: table-cell;
vertical-align: middle;
text-align: right;
}
You want to add vertical-align: middle; to your h1
Fiddle