I wrote CSS with vertical-align applied to one of these boxes.
Then, vertical-align, which is specified for only one side, is applied to the other element.
.a {
height: 75px;
width: 75px;
background-color: red;
}
.a,
.b {
display: inline-block;
}
.a {
vertical-align: middle; /* vertical-align applied to .a also affects .b */
}
<div class="a"></div>
<div class="b">
<p>texttttt</p>
</div>
Why does setting the vertical-align on one side affect the other side?
vertical align for inline elements works for aligning inline elements based on each other as your example says a will be centered in the middle with the element b not based to their parents height.
if you want to align b vertically based on a position you have to add a vertical align property to b
.b{
vertical-align: top;
}
for a side note to see a proper results and understand it better you should reset the default margins on the p tag
p{
margin:0;
}
Related
I'm very confuses about float.
.two should be on the right of .one
but .two just below .one
div {
width: 100px;
background: #FF9;
}
;
.theone {
float: left;
font-size: 20px;
}
<div class="theone">one</div>
<div class="theright">two</div>
into div css add display:inline-block;
div{
display: inline-block;
}
.theright {
float: left;
font-size: 20px;
}
add that in, if you want 2 divs to be next to eachother it is best to have them both float right.
additionally you could replace .theone with .theone,.theright
A div has display: block by default.
You probably want to set another display type to your divs.
div { width: 100px; background: #FF9; display: inline; }
.theone { float: left; font-size: 20px; }
See jsFiddle
I'll try and make a detailled and explained answer. A floating element floats from its initial position in the flow. Basically, the floating effect affects only elements declared after it on the HTML structure.
In your case, the right-floating element is declared after the non-floating one. So it is normal theright appears below theone and you don't see the floating effect.
To make an element float on the right of another, you must declare it before this another. Like this :
<div class="theright">two</div>
<div class="theone">one</div>
<style>
.theright {
float: right;
}
</style>
Note that for this to work, theright element needs to be larger than theone. Otherwise, theone will mask entirely theright pushing its content out of the box. It is so because a floating element gets out of the flow and hovers over the other elements, which contents "avoid" the floating blocks.
There are many other ways to obtain the same result with a different approch :
make theone float on the left instead (leaving theright as a basic block element)
make both elements inline-blocks and give them appropriate widths
for two elements only, it is not necessary, but if you need 3 or more elements side by side, you can make them all float on the left (or on the right declaring them in reverse order, depending on the final layout you want)
etc.
div {
width: 100px;
background: #FF9;
display: inline-block;
}
;
.theone {
float: left;
font-size: 20px;
}
<div class="theone">one</div>
<div class="theright">two</div>
By default div's have display value set to "block" which means they "begin from next line".
If you add display: inline-block property for all divs, then you can add float: left for any div to make it first.
I am trying to vertical align middle for my input and a tag element inside a div.
I have
<div id='title-container'>
<img id='logo' src='images/topLogo.png'>
<div id='search'><input type='text'><a id='btn' href='#'>test button</a></div>
</div>
I want to display something like
--------------------------------------------------------------------
| ---------------------------
| | topologic.png | my input box test button
| ---------------------------
|____________________________________________________________________
CSS
#title-container{
height: 80px;
vertical-align: middle;
background-color: yellow;
}
#search{
display: inline-block;
vertical-align: middle;
}
I want to vertical align my input box and test button inside my title-container div and float these two items to the right.
I have tried adding
#search{
display: inline-block;
vertical-align: middle;
float:right;
}
but those element will be on top of the title-container div instead of middle.. Can someone help me about it? Thanks.
The vertical-align property in CSS doesn't do what you'd expect. Typically, inline elements can be vertically aligned in their context via vertical-align: middle. But the context is the height of the text line they’re in, not the parent.
See http://phrogz.net/CSS/vertical-align/index.html
This should do the trick.
HTML:
<div id='title-container'>
<div id='logo'><img src='http://placehold.it/60x40' /></div>
<div id='search'>
<input type='text' />
<a id='btn' href='#'>test button</a>
</div>
</div>
CSS:
#title-container{
height: 80px;
}
#logo, #search {
display: inline-block;
height: 100%;
position: relative;
line-height: 80px;
float: right;
}
#logo {
float: left;
}
#logo img {
vertical-align: middle;
}
See the example.
When you want to play with vertical-align, you need to be aware that stuff like images have default vertical-align values set. This means, even though you set it to be middle for your parent container, it is being set as text-bottom on the image itself, by default.
You need to force it for all your elements inside that you want to act the same way:
http://jsfiddle.net/H9XBA/
#title-container img#logo,
#title-container #search { vertical-align: middle; }
... and it will vertically align :)
Generally, for logo's, I like wrapping them in a DIV and then adding an id to that DIV.
Another way you can vertically-align them to the middle is by using
display: table
for the parent div... and for the children that you want to align middle you put:
display: table-cell;
vertically-align: middle
You can check out an example here:
http://jsfiddle.net/combizs/QGg6P/
I am trying to set a div element on the right top of a web-page which contains a span, a label and a button. I want to bring all the elements in alignment regarding the vertical high (preferably at the middle of the div element). However vertical-align: middle does not work as the elements are cling to the top of the div. They are probably influenced by an external div or Panel (since I use gwt). Should I interfere in the default attributes of the gwt widgets? What other solution can you suggest?
The code:
<div class="{style.topRightDisplay}">
<span style="float:left;">Eingeloggt als: </span>
<g:HTML ui:field="loginHTML" addStyleNames="{style.loginHTML}"></g:HTML>
<g:Button ui:field="logoutButton" addStyleNames="{style.button}">Logout</g:Button>
</div>
.button {
float: right;
margin-right: 15px;
}
.loginHTML {
float: left;
}
.topRightDisplay {
float: right;
height: 20px;
width: 200px;
vertical-align: middle;
}
You misunderstand the purpose of vertical-align. See the explanation of vertical-align on MDN
You need to apply vertical-align to the child elements, not the parent.
Without knowing what your markup looks like, I suggest this:
.topRightDisplay input,
.topRightDisplay button,
.topRightDisplay span{
vertical-align: middle;
display: inline-block;
}
You should also remove the floats. Floats make an item render as a block-level element, which means vertical-align won't work.
Instead you can use display: inline-block. You may need to change the order of the elements in hmtl to get the result you want.
As I have an element with a percentage height I can't use the line-height hack. Does anyone have any ideas on how to solve this?
<div height="100%">
I want to be vertically aligned in the middle
</div>
Here's what you want: http://www.jakpsatweb.cz/css/priklady/vertical-align-valid-solution-en.html
You have to set the height value of div, then set line-height: value_of_div_height. line-height 100% won't work because it will take value of text, not div element. It works with or without vertical-align, as long as height=line-height
div {
height: 200px;
line-height: 200px;
display: block;
}
Alternative method if you want to do with a paragraph inside a div element: http://www.w3.org/Style/Examples/007/center
DIV.container {
min-height: 10em;
display: table-cell;
vertical-align: middle }
...
<DIV class="container">
<P>This small paragraph...
</DIV>
If you set the font-size, and you know the number of lines of text you have.
You can wrap the text in a span. And use the following CSS on the span.
span {
font-size:20px;
margin-top:-10px; //half the font-size (or (font-size*number of lines)/2)
position: relative;
top: 50%;
}
Can you force a container DIV height to accomodate two floated div children? Is there a fancy trick I can use to do that? I am trying to make two equally sized divs inside the parent div. I would like them to appear side by side with a little whitespace between them. Child2 tends to pop out and go below Child1. Note Child2 contains a table. Should I be floating?
HTML:
<div id="parent">
<div id="child1"></div>
<div id="child2">
<table><tr><td>content</td></tr></table>
</div>
</div>
CSS:
div#parent
{
background-color: #C6E4E0;
border: solid 3px #017E6F;
font-family: Arial;
font-size: 10pt;
font-weight: bold;
padding-left: 5px;
padding-right: 5px;
width:99%;
}
div#parent div
{
width:49%;
float:right;
padding:3px;
}
div#parent div:first-child
{
float:left;
}
This is not a clearfix issue guys, his problem is that his two floated divs are not appearing side by side.
First of all, you do not need to set the width of the parent div, divs are block elements which means they automatically adjust their width to take up the full width of their parent (in this case, presumably the parent of div#parent is the body).
Because you are setting the width explicitly AND giving it padding, it can potentially extend BEYOND the body. That doesn't really matter, but if you apply this same knowledge to the child floated divs and you can see why the right one might get bumped down to the bottom.
First, if you are explicitly setting the widths of the divs to a percentage, you do not need to add padding. Because you are dealing with percentage widths, it is better to add padding to the content of the divs rather than the divs themselves, because padding is ADDED to the width. Therefore, if you added 10px padding to a div that had a 49% width in a 100px parent, it would have a width of 49px + 10px + 10px (2 sides) for a total calculated width of 69px.
Since you didn't post your markup and content or which browser you are testing in, I can't say exactly why the div is being bumped down. There are two likely possibilities.
You are using IE, which allows tables to extend beyond its parent div which will cause breakage. Try explicitly setting the table width to a percentage of its parent or something like that.
The 49% width + padding = greater than [parent-width] - [left-div-width]. This will cause it to get bumped down because the left div and right div are too wide for the parent width.
I use the clearfix class.
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
display: inline-block;
}
/* Hides from IE-mac \*/
/** html .clearfix {height: 1%;}*/
.clearfix {
display: block;
}
/* End hide from IE-mac */
then just use the class in every floated-element container.
#container { width:200px; }
.floated { width:100px; float:left; }
.clear { clear:both; }
<div id="container">
<div class="floated">A</div>
<div class="floated">B</div>
<div class="clear"></div>
</div>
I am not a fan of clear: both;, I rather do this in Jonathan Sampsons example:
#container { width:200px; overflow: hidden; }
.floated { width:100px; float:left; }
<div id="container">
<div class="floated">A</div>
<div class="floated">B</div>
</div>
By the way, you want
div#parent > div { float:left; }
instead of
div#parent div:first-child { float:left; }
which is still not IE6 friendly, but it will float both child DIVs.