Here is html:
<div style="height: 100px">
<span style="vertical-align:top;">top</span>
<span style="vertical-align:bottom;">bottom</span>
</div>
http://jsfiddle.net/CaS5r/1/
Why vertical-align property does not work in this example? Do I use it incorrectly?
I'm unsure what you want to achieve.
See this fiddle: http://jsfiddle.net/CaS5r/4/
It does work, but it only aligns to it's siblings.
some debugging
span {
outline: 1px solid red;
}
div {
background: yellow;
height: 100px;
}
HTML
<div >
<span style="vertical-align:top;">top</span>
<span style="vertical-align:middle;">middle</span>
<span style="vertical-align:baseline;">baseline</span>
<span style="vertical-align:bottom;">bottom</span>
</div>
UPDATE
you can see it better if the font is bigger (e.g. 50px) http://jsfiddle.net/CaS5r/5/
UPDATE
You probably want to use display: table;
http://jsfiddle.net/CaS5r/7/
Then it does what you expect
Related
I'm using pure CSS to create table layouts and neither my rows nor cells are behaving like tr or td elements.
The results seem to be that cells do not keep a consistent width and rows seem to have a float: left behavior when they should be display: block
This seems to work OK without the anchor tags... why?
.livesearchtable {
display: table;
table-layout: fixed;
width: 100%;
}
.livesearchrow {
display: table-row;
background: #f8f8f8;
width: 100%;
}
.livesearchcell {
display: table-cell;
width: auto;
padding: 5px 7px;
border-bottom: 1px solid #ccc;
white-space: nowrap;
}
<div class="livesearchtable">
<a href="../something.php">
<div class="livesearchrow">
<div class="livesearchcell">1</div>
<div class="livesearchcell">Some text thats long enough to make a difference</div>
<div class="livesearchcell">Lorem Ipsum</div>
</div>
</a>
<a href="../something.php">
<div class="livesearchrow">
<div class="livesearchcell">2</div>
<div class="livesearchcell">short</div>
<div class="livesearchcell"></div>
</div>
</a>
</div>
Try this. Take class 'livesearchrow' and set it as class for a tags. Delete divs with 'livesearchrow' class. Now a.livesearchrow is table-row and divs inside it are table-cells.
<div class="livesearchtable">
<a href="../something.php" class="livesearchrow">
<div class="livesearchcell">1</div>
<div class="livesearchcell">Some text thats long enough to make a difference</div>
<div class="livesearchcell">Lorem Ipsum</div>
</a>
<a href="../something.php" class="livesearchrow">
<div class="livesearchcell">2</div>
<div class="livesearchcell">short</div>
<div class="livesearchcell"></div>
</a>
</div>
I have the following HTML code:
<span class="container">
<span id="item1" class="item">
<button class="removeitem"></button>
<span class="text"></span>
</span>
<span id="item2" class="item">
<button class="removeitem"></button>
<span class="text"></span>
</span>
<span id="item3" class="item">
<button class="removeitem"></button>
<span class="text"></span>
</span>
</span>
Imagine the #item3 extends .container, but overflow is hidden. How can I achieve that the elements inside are still visible and will continue in the following row?
I tried the following (in Sass-syntax):
.container
display: flex
justify-content: flex-start
flex-wrap: wrap
But #item3 will just appear on the next row.
I tried making everything display: inline, but then I can not assign any height-properties.
I attached an image of what I want to achieve.
This is what the layout should look like. #item3 continues in the next row:
What you are asking is not technically possible unless you use the natural wrapping of text as in this example:
.item {
display: inline;
background: yellow;
margin-right: 5px;
border: 2px solid green;
line-height: 2;
}
Fiddle:
https://jsfiddle.net/658tdurx/1/
I has this code
.cont {
width: 150px;
overflow: hidden;
resize: both;
border: solid;
}
.wrap:after {
content: 'A';
background: #ccc;
display: inline;
}
<div class="cont">
<span class="wrap">
<span class="inner">
Hello, my name is Mao
</span>
<span class="emptyornot">
</span>
</span>
</div>
http://jsfiddle.net/rcsd7L74/
I need that :after always stay with last word in .wrap.
And if container too small - break line before last word.
The CSS you have will do this perfectly well; the problem you're having is that new-lines, in HTML, collapse to a single white-space character; remove those and it works (leading to this, admittedly ugly, HTML):
<div class="cont">
<span class="wrap">
<span class="inner">
Hello, my name is Mao</span><span class="emptyornot"></span></span>
</div>
To allow for slightly prettier HTML (though, in fairness, HTML should be minimsed when sent to the client anyway), such as:
<div class="cont">
<span class="wrap">
<span class="inner">
Hello, my name is Mao</span>
<span class="emptyornot"></span>
</span>
</div>
JS Fiddle demo.
The following CSS can be used:
.wrap {
/* sets the wrapping element's font-size to 0, to hide the collapsed white-spaces: */
font-size: 0;
}
.inner {
/* overrides the parent's font-size:
font-size: 16px;
}
.wrap:after {
/* as above, to make the text of the pseudo element visible */
/* no other changes */
font-size: 16px;
}
JS Fiddle demo.
Change width:
.cont { width: 160px }
I have this code below. As you can see the width of the div container is 40%. When I reduce the width, the green div goes down keeping foobar's in the same line. I expected the words (foobar2, foobar3) go down below foobar1 instead. Why this behaviour?
This is the jsfiddle.
<div style="width: 40%; background-color: blue">
<div style="display: inline-block; background-color: red">hello</div>
<div style="display: inline-block; background-color: green">foobar1 foobar2 foobar3 </div>
</div>
It's the use of inline-block. For this purpose you might be better using a <span> element (the equivalent of setting it to display: inline).
<div style="width: 40%; background-color: blue">
<span style="background-color: red">hello</div>
<span style="background-color: green">foobar1 foobar2 foobar3 </div>
</div>
Because you are using style="display: inline-block; This displays the div in the same line.
It's because foobar1, foobar2, foobar3 are inside the same div. So they will be on the same line. If you do something like this, you'll get the desired results.
<div style="width: 40%; background-color: blue">
<div style="display: inline-block; background-color: red">hello</div>
<div style="display: inline-block; background-color: green">foobar1</div>
<div style="display: inline-block; background-color: green">foobar2</div>
<div style="display: inline-block; background-color: green">foobar3 </div>
</div>
PS. There are better ways to do this. I am just modifying your question to help you understand better.
A fiddle to demonstrate this FIDDLE
I am trying to create a form with multiple rows. Each row has an optional input field followed by a mandatory button. The buttons should line up vertically - something like this:
_____________ _______________
| input 1 | | button 1 |
|___________| |_____________|
_______________
| button 2 |
|_____________|
I tried to float the button left with a fixed left margin, but doing so moves the input field to the right of the button - even though the input field appears first in the markup:
<div>
<input type="text">
<button>Action 1</button>
</div>
Please see my jsfiddle here. Why is this happening and what's the correct solution?
You need thee div container to do this as shown in this jsFiddle.
HTML Code
<div class="container">
<div class="left">
<button>
</div>
<div class="right">
<button>
</div>
</div>
CSS Code
.container {
width: 190px;
height: 22px;
margin: 0;
}
.left {
float: left;
width: 95px;
height: 22px;
}
.right {
float: right;
width: 95px;
height: 22px;
}
Use rows.
<div class="row-rap">
<div class="right">
<input type="text">
</div>
<div class="left">
<input type="button" value="Action 1">
</div>
</div>
<div class="row-rap">
<div class="right">
<input type="text">
</div>
<div class="left">
<input type="button" value="Action 2">
</div>
</div>
With the following styling.
div.row-rap {
width: 100%;
}
div.row-rap .right, div.row-rap .left {
width: 50%;
float: left;
}
Here's an alternative, the margins and colors may need modification. See jsfiddle link for sample result.
It has a left-aligned label and right-aligned input (button style) in a div, for each line. The non-breaking space is needed as a placeholder in the span element that represents an "empty label".
http://jsfiddle.net/qallar/kfgCb/5/
The html is:
<div class='line'>
<span class='formlabel'>label 1</span>
<input class='formbutton' type='button' value='button 1 text ' />
</div>
<div class='line'>
<span class='formlabel'> </span>
<input class='formbutton' type='button' value='button 2 text' />
</div>
and the css:
.line
{
display: block;
background-color: #ddd; /* also try #fff */
margin: 0px;
padding: 2px;
height: 30px;
width: 200px;
}
.formlabel
{
float: left;
background-color: #eee; /* also try #fff */
margin: 0px;
padding: 2px;
width: 75px;
height: 100%;
clear: both;
}
.formbutton
{
float: right;
background-color: #0f0;
margin: 0px;
padding: 0px;
width: 100px;
height: 100%;
}
The input field is flying to the right of the button because it is an inline element. Float works on block elements only, inline elements will always flow around the floated elements. This explains the behavior in the original jsFiddle.
Having said that, even if I put display:block on the input element it still behaves like inline. I was able to make the basic concept work for a div though, which is a true block element. See the jsFiddle here.
<div class="row">
<button>Action 1</button>
<div class="in"></div>
</div>
.row {
clear: both;
}
.in {
background-color: green;
height: 24px;
width: 100px;
}
button {
float: left;
margin-left: 110px;
width: 150px;
}
The only workaround seems to be the one offered by Musa (see this jsFiddle) where he aligns the buttons to the right using text-align and limiting the width of the div.
I am not a CSS expert and usually this task works for me using table
<table>
<tr><td>Optional Input</td><td>Button</td></tr>
<tr><td>Optional Input</td><td>Button</td></tr>
</table>
if table by some reason is not an option you can use div/span
<div style="display: table-row">
<span style="display: table-cell">Optional Input</span>
<span style="display: table-cell">Button</span>
</div>
It will about like this
using Block formatting context https://developer.mozilla.org/en-US/docs/CSS/Block_formatting_context
jsfiddle code: http://jsfiddle.net/EeNFH/9/
the html code:
<div class="inp">
<input type="text">
</div>
<div class="btns">
<p><button>Action 1</button></p>
<p><button>Action 2</button></p>
</div>
and the styles:
input {
width: 100px;
}
button {
width: 150px;
}
.inp{
float:left;
}
.btns{
overflow:hidden;
}