I have two inline-block divs, each 50% width of its parent, and they are correctly shown next to each other. But, when I add a link to one of those divs, there's a gap on top of the second div
<div class="wrap">
<div class="resizable resizable1">
link1
link2
</div><!--
--><div class="resizable resizable2">second</div>
</div>
.wrap {
width: 100%;
font-size: 0;
}
.resizable {
width: 50%;
height: 120px;
background-color: coral;
display: inline-block;
}
.resizable2 {
background-color: lightblue;
}
.resizable a {
font-size: 12px;
}
Jsfiddle example http://jsfiddle.net/KyEr3/455/
How can align the two divs?
When using display: inline-block elements by default are set to baseline, instead set vertical-align: top
.resizable {
width: 50%;
height: 120px;
background-color: coral;
display: inline-block;
vertical-align: top;
}
FIDDLE
You can also float them both left, they will align next to each other in the wrapper.
.wrap {
width: 100%;
font-size: 0;
}
.resizable {
width: 50%;
height: 120px;
background-color: coral;
display: inline-block;
float:left;
}
.resizable2 {
background-color: lightblue;
float:left;
}
.resizable a {
font-size: 12px;
}
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 tried to vertically center an inline-block like this:
div {
width: 50px;
height: 50px;
background: red;
line-height: 50px;
}
span {
display: inline-block;
width: 20px;
height: 20px;
background: white;
}
<div>
<span></span>
</div>
But the span is not vertically centered. Why?
Because line-height sets the position of the baseline of your text (the bottom end of your span). Since your span is 20px high you must add half of that to line-height:
div {
width: 50px;
height: 50px;
background: red;
line-height: 60px;
}
span {
display: inline-block;
width: 20px;
height: 20px;
background: white;
}
<div>
<span></span>
</div>
I have this code and I want the css code with a max-width: 780px, the .second in a line alone because it is the logo, and the .first and .third on the line below. I don't know how to do it.
Normally, this elements are Ordered in one line with a wider width than 780px. The normal order: first, second, third
The order I want with a max-width: 780px:
.................second..............
........first........|.......third......
<header>
<div class="first">
</div>
<div class="second">
</div>
<div class="third">
</div>
</header>
header {
background: #FFF;
width: 100%;
height: 160px;
}
.SearchBar {
width: 30%;
height: 130px;
display: inline-block;
float: left;
text-align: center;
}
.SearchBar:before {
/* create a full-height inline block pseudo=element */
content: ' ';
display: inline-block;
vertical-align: middle;
/* vertical alignment of the inline element */
height: 100%;
}
.SearchBar>p {
padding-right: 0;
padding-left: 0;
display: inline-block;
}
.SearchBar>p>input {
background: url("../images/search_icon.png") no-repeat scroll 0 0 transparent;
background-position: 90% 50%;
width: 230px;
height: 50px;
border: 1px solid #c8c8c8;
font-family: FuturaLight;
text-indent: 20px;
font-size: 18px;
}
.SearchBar>p>input:enabled {
cursor: text;
}
.logo {
width: 40%;
height: 130px;
display: inline-block;
margin: auto;
text-align: center;
}
.logo:before {
/* create a full-height inline block pseudo=element */
content: ' ';
display: inline-block;
vertical-align: middle;
/* vertical alignment of the inline element */
height: 100%;
}
.logo a {
display: inline-block;
vertical-align: middle;
/* vertical alignment of the inline element */
}
.shoppingcar {
width: 30%;
height: 130px;
display: inline-block;
float: right;
text-align: center;
}
.shoppingcar:before {
content: ' ';
display: inline-block;
vertical-align: middle;
height: 100%;
}
.cartletter {
padding-right: 0;
padding-left: 0;
display: inline-block;
font-family: FuturaLight;
}
<header>
<div class="subheader"></div>
<div class="SearchBar">
<a> FIRST</a>
</div>
<div class="logo">
<a> SECOND</a>
</div>
<div class="shoppingcar">
<p class="cartletter">
<a> THIRD</a>
</p>
</div>
</header>
hmm, well since there's no css code and jsfiddle, I'm assuming this can do the trick ? try it on and let me know please ?
#media all and (max-width: 780px) {
.second {
display:inline-block;
}
.first {
display:inline;
float:left;
}
.third {
display:inline;
float:right;
}
}
I have three divs in a row, all with display: inline-block. The left one (green) contains an image. Because of that image, two other divs (blue and yellow) and the div below them (grey) are all positioned lower by height of the image.
Why does an image in one div affect positions of other divs in an inline-block row? How can I avoid it?
* {
margin: 0;
padding: 0;
border: 0;
}
body {
background: black;
}
div {
display: inline-block;
width: 300px;
height: 70px;
}
div.wrapper {
width: 900px;
height: 100px;
margin: 0 auto;
background: red;
display: block;
font-size: 0;
}
div.div1 {
background: green;
}
div.div2 {
background: blue;
}
div.div3 {
background: yellow;
}
div.div4 {
display: block;
width: 900px;
height: 30px;
background: grey;
}
<body>
<div class="wrapper">
<div class="div1">
<img src="" width="25px" height="25px">
</div>
<div class="div2">b</div>
<div class="div3">c</div>
<div class="div4">d</div>
</div>
</body>
Try float:left; display:block; instead of inline-block for div's: Demo
CSS:
.div1, .div2,.div3 {
display: block;
float:left;
width: 300px;
height: 70px;
}
There already is discussons about inline-block-elementes still have weird heights (like here): Why does inline-block cause this div to have height?
Honestly, instead of solving those, i would adress this issue with floats:
* {
margin: 0;
padding: 0;
border: 0;
}
body {
background: black;
}
div {
/*display: inline-block;*/ /* Not necessary when using floats! */
width: 300px;
height: 70px;
}
div.wrapper {
width: 900px;
height: 100px;
margin: 0 auto;
background: red;
display: block;
font-size: 0;
}
div.div1 {
background: green;
float: left; /* Added float left here */
}
div.div2 {
background: blue;
float: left; /* Added float left here */
}
div.div3 {
background: yellow;
float: left; /* Added float left here */
}
div.div4 {
display: block;
width: 900px;
height: 30px;
background: grey;
}
I have following HTML for a heading. The .left and .right are empty spans. I have specific width for the .left and but the .text width is not always same. I want to set the background for the .left (fixed width) and the .right. The .right should get all the remaining space in the parent element (h1). How that can be done?
<h1>
<span class="left"></span>
<span class="text">Text</span>
<span class="right"></span>
</h1>
I'm trying following CSS which does not work:
.left{
background: yellow;
width: 30px;
height: 20px;
display: inline-block;
}
.right{
display: inline-block;
background: blue;
}
Here's the JSFiddle link:
http://jsfiddle.net/jMR8u/
Here's what I'm trying to get:
The idea is to set a background image in h1 except the .text span and the problem is that I can not set the background for the .text, otherwise it would be easier.
This version will stretch to fit the contents of .text and should be cross-browser.
You can fake the blue (right) background by making it a border of .text:
.text { border-right: 1000px solid; }
Then, shift .right to the left by 1000px:
.right { margin-left: -1000px; }
Give a width to .left, make each element inline-block, hide the extra blue border on the right, and make sure .text and .right do not wrap to a new line:
.left { width: 200px; }
.left, .text, .right { display: inline-block; }
h1 { overflow: hidden; white-space: nowrap; }
And give it color!
body { background: green; }
.left { background: red; }
.text { border-color: blue; }
Here is a JSFiddle demonstration:
if i interpret your image correct .. this is the answer http://jsfiddle.net/jMR8u/4/
h1{
border: 1px solid red;
position: relative;
}
.left{
background: yellow;
width: 30px;
height: 20px;
display: inline-block;
}
.right{
display: inline-block;
background: blue;
position: absolute;
z-index: 99;
height: 20px;
width: 100%;
}
.text {
height: 20px;
width: 150px;
display: inline-block;
position: relative;
z-index; 101;
}
ok, then use layers .. with z-index and positioning
You could use flexbox (but use the new syntax). Sadly, it only works on Chrome and Opera for now, so this has limited usefulness:
h1 { display: -webkit-flex; display: flex; }
.left { width: 30px; }
.right { flex: 1; -webkit-flex: 1; } /* This makes it fluid. */
.left { background: yellow; }
.right { background: blue; }
Here is a JSFiddle demonstration: http://jsfiddle.net/FN7vQ/
if you can set width to the .text span and h1 element.
body{
background:green;
}
h1{
border: 1px solid red;
display:table;
width:100%;
}
.left{
background: yellow;
width: 30px;
display: table-cell;
}
.right{
display: table-cell;
background: blue;
}
.text {
display:table-cell;
width: 150px;
}
If I understood your requirement correctly. you should change your markup a little bit as below
h1 {
background: #660000;
padding-left: 30px;
line-height: 1.1;
}
h1 span {
background: #fff;
padding: 0 3px;
color: #600;
}
<h1>
<span>
Lorem, ipsum dolor. you are doing great
</span>
</h1>
and CSS goes here below