I have this issue where my float: right element is indeed floated right but it's above other elements and sometimes it even goes offscreen
My CSS:
html, body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
header {
background-color: black;
}
#header-limiter * {
display: inline-block;
color: white;
}
header span {
font-weight: 700;
font-size: 18px;
}
#header-limiter {
padding: 10px;
width: 100%;
display: block;
}
#logoText {
font-size: 16px;
}
#logout-btn {
float: right;
}
Jsfiddle: http://jsfiddle.net/wLftd9ph/3/
Your logout text doesn't have the same default margin as the p text (logoText).
Simply add margin: 1em 0 to #logout-btn.
http://jsfiddle.net/wLftd9ph/5/
A quick way to fix alignment would be to use display: inline-block with vertical-align: middle instead of floats as you can see in this fiddle http://jsfiddle.net/exmubg5m/
#logout-btn {
display: inline-block;
vertical-align: middle;
}
textarea {
display: inline-block;
vertical-align: middle;
}
Add this to logo text.
float: left;
z-index: 0;
Also remove the <p> tag from the Logo 'text' as this adds a new paragraph.
<span>LogoText</span>
Related
I have the following HTML/CSS code:
p {
background: lightgray;
}
p#h {
height: 1em;
}
span {
display: inline-block;
margin-left: .5em;
height: 1em;
width: 1em;
background: red;
}
<p>Ay<span></span></p>
<p id="h">Ay<span></span></p>
image
https://jsfiddle.net/e82gzayt/2/
How to get the inline-block having the same height as its parent?
or
How to get the font to be centered vertically with the span block?
You should add that text inside span to be inline. Also, in second case you are restricting the height of p element to be 1 em.
p {
background: lightgray;
}
p#h {
height: 1em;
}
span {
display: inline-block;
margin-left: .5em;
height: 1em;
width: 1em;
}
<p><span>Ay</span></p>
<p id="h"><span>Ay</span></p>
Check the first element. It is aligned fine now.
Fiddle - https://jsfiddle.net/e82gzayt/3/
EDIT: Removing the height and width restriction of span the text fits well inside the p block.
Demo : https://jsfiddle.net/e82gzayt/4/
You could do this with display: table-cell; and vertical-align: middle; and then wrap the two <p> tags in a <div> like this:
p#h { height: 2em; }
span {
display: inline-block;
margin-left: .5em;
height: 1em;
width: 1em;
background: red;
}
.vertical-center {
text-align: center;
display: table-cell;
vertical-align: middle;
height: 2em;
background-color: #dddddd;
width: 400px;
}
<div class="vertical-center">
<p>Ay<span></span></p>
<p id="h">Ay<span></span></p>
</div>
You can use flex value to center vertically. Advanced css class.
Try this
p { display:flex;align-items:center;background: lightgray; height: 2em;}
p#h { display:flex;align-items:center;height: 1em; }
span { display: inline-block; margin-left: .5em; height: 1em; width: 1em; background: red; }
<p>Ay<span></span></p>
<p id="h">Ay<span></span></p>
Or you can try with flex box
p { background: lightgray;
display:flex;
align-items: center;
}
p#h { height: 1em; }
span { display: inline-block; margin-left: .5em; height: 1em; width: 1em; background: red; }
https://jsfiddle.net/e82gzayt/5/
I have a <span> element followed by a horizontal <ul> element. Why is there a left and bottom margin on the <ul>? How can I remove this space?
jsfiddle
HTML
<span>AAAAA</span>
<ul>
<li>BBBBB</li>
<li>CCCC</li>
</ul>
CSS
body {
background-color: #000;
margin: 0;
padding: 0;
}
span {
background-color: #f00;
}
ul {
background-color: #0f0;
display: inline-block;
list-style: none;
margin: 0;
padding: 0;
}
ul > li {
float: left;
padding-right: 1em;
}
Check this out!
Added inline-block to the span and vertical-align too.
The span has a visual margin / space because it is not inline-block and the ul next to it but is inline-block
Is this what you expected? Please let me know your feedback on this. Thanks!
body {
background-color: #000;
margin: 0;
padding: 0;
}
span {
background-color: #f00;
display: inline-block;
vertical-align: top;
}
ul {
background-color: #0f0;
display: inline-block;
vertical-align: top;
list-style: none;
margin: 0;
padding: 0;
}
ul > li {
float: left;
padding-right: 1em;
}
<span>AAAAA</span>
<ul>
<li>BBBBB</li>
<li>CCCC</li>
</ul>
As the other users already stated, display: inline-block; should do the trick, but your fiddle seems like you already got that right. To find out where unexpected margins, borders or other css stuff come from, I rely on firebug (Firefox Plugin for web developers).
while you are using display inline-block give font-size: 0; to the parent element.
Try this code...
body {
background-color: #000;
margin: 0;
padding: 0;
font-size: 0;
}
span {
background-color: #f00;
font-size: 14px;
display: inline-block;
vertical-align: top;
}
ul {
background-color: #0f0;
display: inline-block;
list-style: none;
margin: 0;
padding: 0;
}
ul > li {
float: left;
padding-right: 1em;
font-size: 14px;
}
I have a little problem with my css, I can't align an image with a text input field. The site is live at http://jocolina.com/picemon/pokelocator.php
The CSS I have for the text input and image is:
#loginUTC{
width:30%;
height: 60px;
font-family: Verdana;
font-size: 30px;
text-align:center;
font-weight: bold;
/*margin: 0 auto;*/
border-color: #336688;
}
#magniIMG{
display: inline;
height: 60px;
cursor: pointer;
}
#locator{
margin: 0 auto;
text-align:center;
height:60px;
}
Where loginUTC is the text input, magniIMG is the image I want to algin with the input, and locator is the div in which both of the elements are.
You can set both elements to vertical-align: bottom;.
#loginUTC{
vertical-align: bottom;
}
#magniIMG{
vertical-align: bottom;
}
You can use margin-bottom in negative at image that will fix it
#magniIMG {
display: inline;
cursor: pointer;
height: 60px;
margin-bottom: -18px;
}
You could use floats to align the form elements with images like you are trying to achieve here. You'll also need to add some widths to the containing element and the input to align everything. Try -
#locator {
margin: 0 auto;
text-align: center;
height: 60px;
width: 545px;
}
#loginUTC {
height: 60px;
font-family: Verdana;
font-size: 30px;
text-align: center;
font-weight: bold;
/* margin: 0 auto; */
border-color: #336688;
float: left;
}
#magniIMG {
/* display: inline; */
height: 60px;
cursor: pointer;
float: left;
}
I have the following simple code snippet. It is taken out from my application where .a1 is a container button, which has an icon. The icon should be vertically middle aligned to the parents line-height/height, but it is shifted with 1px from top. Could you explain me why this is the behavior? Is there any solution?
.a1 {
display: inline-block;
width: 28px;
line-height: 28px;
background-color: #000;
text-align: center;
vertical-align: middle;
}
.i {
display: inline-block;
width: 16px;
height: 16px;
background-color: #f00;
vertical-align: middle;
}
<div class="a1"><i class="i"></i>
</div>
Why?
Because inline-block elements render with "white-space". You can see this in this demo where no height/width is set on the parent element.
When you use vertical-align:middle; the "white space" is rendered before the element (on top) (black line in the demo). This space moves the child element down and therefore it doesn't appear verticaly centered.
how to fix :
You can use display:block; and calculate the margin to apply to the child element so it centers verticaly and horzontaly.
You can also take a look at this question which talks about white space and ways to avoid them.
Well, it seems like font-size:0; for .a1 seems also a fix for such issue.
.a1 {
display: inline-block;
width: 28px;
line-height: 28px;
background-color: #000;
text-align: center;
vertical-align: middle;
font-size: 0;
}
.i {
display: inline-block;
width: 16px;
height: 16px;
background-color: #f00;
vertical-align: middle;
}
<div class="a1"><i class="i"></i>
</div>
.a1 {
display: inline-block;
background-color: #000;
}
.i {
display: block;
width: 16px;
height: 16px;
margin: 6px 6px;
background-color: #f00;
}
<div class="a1"><i class="i"></i>
</div>
.a1 {
display: inline-block;
background-color: #000;
}
.i {
display: block;
width: 16px;
height: 16px;
margin: 6px 6px;
background-color: #f00
I have a small issue with a title where I would like text to display on a single line rather than split onto two as im trying to arrange these blocks as a grid
jsFiddle
html
<div class="garage-row">
<a class="garage-row-title" href="/board/garage_vehicle.php?mode=view_vehicle&VID=4">
<div class="garage-title">1996 Land Rover Defender</div>
<div class="garage-image"><img src="http://enthst.com/board/garage/upload/garage_vehicle-4-1373916262.jpg"></div>
</a>
<div class="user-meta">
<b>
Hobbs92
</b>
</div>
</div>
css
#import url(http://fonts.googleapis.com/css?family=Open+Sans);
.garage-row {
border: 1px solid #FFFFFF;
float: left;
margin-right: 5px;
padding: 12px;
position: relative;
width: 204px;
}
.garage-row img{}
.garage-image {
background-position: center center;
display: block;
float: left;
max-height: 150px;
max-width: 204px;
overflow: hidden;
position: relative;
}
.user-meta {
background: none repeat scroll 0 0 #2C3539;
color: #FFFFFF;
float: left;
padding: 10px;
position: relative;
width: 184px;
}
img {
border-width: 0;
height: auto;
max-width: 100%;
vertical-align: middle;
}
.garage-title {
clear: both;
display: inline-block;
overflow: hidden;
}
.garage-row-title {
font-size: 22px;
font-weight: bold;
}
a:link {
color: #43A6DF;
}
font-family: 'Open Sans',sans-serif;
I would greatly appreciate if someone were able to help me get the title into one line rather than two or even fix it so if the title exceeds the width then it gets ellipses.
Add white-space: nowrap;:
.garage-title {
clear: both;
display: inline-block;
overflow: hidden;
white-space: nowrap;
}
jsFiddle
The best way to use is white-space: nowrap; This will align the text to one line.