Can't get my head around on why <img> inside <div style="display: inline-block"> pushes that div lower from top?
HTML
<div id="wrapper">
<div id="a1">
<img src='...' alt=""/>
</div>
<div id="a2">
</div>
<div id="a3">
</div>
<div id="a4">
</div>
<div id="a5">
</div>
<div id="a6">
</div>
<div id="a7">
</div>
<div id="a8">
</div>
</div>
CSS
div > div {
background: red;
height: 200px;
width: 19%;
text-align: center;
margin: 0 5% 5% 0;
display: inline-block;
}
img {
height: 128px;
width: 128px;
display: /* "BLOCK" FIXES THE ISSUE */;
}
EDIT
Setting img to display: block fixes the issue. But could anyone explain me why there is such a behaviour without that display: block?
The default vertical-align value is baseline, it can be the bottom line of the text or the bottom line of an image (img element is a replaced element, inline* level), which causes the offset in the first row of your demo.
In order to fix it, you can set vertical-align to top, or like you said set img to display: block also works.
The img tag behaves like a inline and bock element, basead on this answer: Is <img> element block level or inline level?
That's why you have to display block on the img inside a div with inline-block.
You can fix this by either adding a float: left or vertical-align:top
https://jsfiddle.net/foxhh0av/
div > div {
background: red;
height: 200px;
width: 19%;
text-align: center;
margin: 0 5% 5% 0;
display: inline-block;
float: left;
}
img {
height: 128px;
width: 128px;
display: /* "BLOCK" FIXES THE ISSUE */;
}
<div id="wrapper">
<div id="a1">
<img src='http://dfsm9194vna0o.cloudfront.net/1471693-0-Washingmachineforlaundry128.png' alt=""/>
</div>
<div id="a2">
</div>
<div id="a3">
</div>
<div id="a4">
</div>
<div id="a5">
</div>
<div id="a6">
</div>
<div id="a7">
</div>
<div id="a8">
</div>
</div>
Just change this in your css:
img {
height: 128px;
width: 128px;
display: block;
}
That should fix it.
You could set vertical-align: top; to your child divs (div > div).
Related
I want to align the image to left, then its title then the text below it.
Here is the screenshot of what I want to make.
I have made DIV for each content. I dont know if its okay to do that.
I made it, because I ll have more control for individual content.
But I havent ben able to do so.
.howtocontainer {
height: 1985px;
width: 1121px;
background-image: url("//azlily.bex.jp/eccube_1/html/template/default/img/howto/background.png");
}
.firstsection {
/*background: rgb(255,255,255,0.3);*/
background: grey;
height: 200px;
position: relative;
top: 300px;
margin: 0 40px 0 40px ;
}
.firstpic {
padding-top: 20px;
}
.firstsecbanner {
float: right;
margin-right: 500px;
margin-top: -15px;
}
<div class ="howtocontainer">
<div class="firstsection">
<div class="firstpic">
<img src="https://images.pexels.com/photos/462118/pexels-photo-462118.jpeg?auto=compress&cs=tinysrgb&h=350">
</div>
<div class="firstsecbanner">
<img src="https://images.pexels.com/photos/462118/pexels-photo-462118.jpeg?auto=compress&cs=tinysrgb&h=350">
</div>
<div class="firstsectext">
お好みの量（目安はピンポン玉大です）を手に取って、パートナーの性感帯を指の腹や手のひらで優しくマッサージ<br>
してください。<br>
最初は背中や首筋、そして胸などと、段々と敏感な部分へ伸ばしていくと、ヌルヌルと滑る感覚が気持ちよく、エロ<br>
ティックな気分を高めることができます。<br><br>
性感帯は塗った部分が敏感になり、ただ触れるだけでも極上の気持ち良さ。<br>
シュチュエーションに合わせてラブローションの香りを変えたりしながら楽しみ方を<br>
見つけてください。
</div>
</div>
<div class="secondsection"></div>
<div class="thirdsection"></div>
</div>
All I did was Included image and text in one DIV
But gave a class to image by <img class="class" src"path" >
Then I did float:left to .img class.
There are 2 key points that you should notice about using float:
Float container should be set a specific width (absolute or relative width)
clear all floating items
You should change your HTML structure a little bit, and add some CSS styles:
.firstpic {
float: left;
width: 300px; /*this width is equal with its image's width */
}
.description {
float: left;
width: calc(100% - 300px);
}
/* Clear floating item */
.firstsection::after {
display: table;
content: "";
clear: both;
}
<div class="firstsection">
<div class="firstpic">
<img src="the-image-on-left-side">
</div>
<div class="description">
<div class="firstsecbanner">
<img src="the-title-image-on-top">
</div>
<div class="firstsectext">
お好みの量（目安はピンポン玉大です）を手に取って、パートナーの性感帯を指の腹や手のひらで優しくマッサージ<br>
してください。<br>
最初は背中や首筋、そして胸などと、段々と敏感な部分へ伸ばしていくと、ヌルヌルと滑る感覚が気持ちよく、エロ<br>
ティックな気分を高めることができます。<br><br>
性感帯は塗った部分が敏感になり、ただ触れるだけでも極上の気持ち良さ。<br>
シュチュエーションに合わせてラブローションの香りを変えたりしながら楽しみ方を<br>
見つけてください。
</div>
</div>
</div>
Please add absolute URL instead of relative URL to see your pictures.
Hope this helps.
A disadvantage of using floats is that it disturbs the natural document flow. You may want to consider an alternative using flexbox.
.firstsection {
display: flex;
}
.firstpic {
width: 300px;
/*this width is equal with its image's width */
}
.description {
width: calc(100% - 300px);
}
<div class="howtocontainer">
<div class="firstsection">
<div class="firstpic">
<img src="//azlily.bex.jp/eccube_1/html/template/default/img/howto/01.jpg">
</div>
<div class="description">
<div class="firstsecbanner">
<img src="//azlily.bex.jp/eccube_1/html/template/default/img/howto/firstsecbanner.png">
</div>
<div class="firstsectext">
お好みの量（目安はピンポン玉大です）を手に取って、パートナーの性感帯を指の腹や手のひらで優しくマッサージ<br> してください。
<br> 最初は背中や首筋、そして胸などと、段々と敏感な部分へ伸ばしていくと、ヌルヌルと滑る感覚が気持ちよく、エロ
<br> ティックな気分を高めることができます。
<br><br> 性感帯は塗った部分が敏感になり、ただ触れるだけでも極上の気持ち良さ。
<br> シュチュエーションに合わせてラブローションの香りを変えたりしながら楽しみ方を
<br> 見つけてください。
</div>
</div>
</div>
<div class="secondsection"></div>
<div class="thirdsection"></div>
</div>
UPDATE: The answers have got me close, but they still don't align vertically as the text div is larger, how can I make them both the same height and therefore align?
I would like to have two DIVs next to each other, one containing an image and one containing text, both sitting in a container DIV.
The image should be 15% of the width of the container div, with the text using the remaining 85%
The image and text should be aligned vertically within their respective DIVs, so it looks like they are aligned with each other.
I've tried to work this out but can't seem to do it! Can anyone help?
#picture {
float: left;
width: 15%;
line-height: auto;
}
#text {
width: auto;
padding-left: 16%;
line-height: auto;
vertical-align: middle;
margin-top: auto;
margin-bottom: auto;
}
#text p {
display: inline-block;
vertical-align: middle;
line-height: normal;
}
and
<div id="quotes">
<div id="picture">
<img style="width: 100%; vertical-align: middle" src="tom.jpg" >
</div>
<div id="text">
<p>"Christiaan was one of the stand out candidates throughout, therefore there was no hesitation in offering him a place on this highly sort after scheme..."</p>
</div>
</div>
Here's a fiddle with your code in it: http://jsfiddle.net/hQ6Vw/1/
The only changes I made was to assign matching top/bottom margins to the img and p tags. I think that will give you the effect you're looking for.
If you use float and verticl-align, those two won'nt work together.
Float extract itself from regular flow and go slide on one side or the other on top of next line right after any content within the regular flow.
Vertical-align works:
in betweem inline-boxes (inline-block-level element or displayed so with display:inline-block;)
inside td or it's CSS default display : display:table-cell;
here jsfiddle #TXChetG updated
Using display:inline-block; http://jsfiddle.net/GCyrillus/hQ6Vw/2/
Using display:table/* table-cell*/;
http://jsfiddle.net/GCyrillus/hQ6Vw/3/
This should get you close:
<div>
<div style="background: grey; width: 15%; float:left"></div>
<div style="background: blue; width: 85%; float:left"></div>
</div>
Replace the grey background div with your image and the blue with your text.
Check this out
HTML:
<section>
<div id="one"></div>
<div id="two"></div>
</section>
CSS:
section {
width: 80%;
height: 200px;
background: aqua;
margin: auto;
padding: 10px;
}
div#one {
width: 15%;
height: 200px;
background: red;
float: left;
}
div#two {
margin-left: 15%;
height: 200px;
background: black;
}
Is this what you mean?
html
<div class="container">
<div class="images">
<img src="http://jsfiddle.net/img/logo.png" style="background-color:black">
</div>
<div class="text">
Example
</div>
</div>
<div class="container">
<div class="images">
<img src="http://jsfiddle.net/img/logo.png" style="background-color:black">
</div>
<div class="text">
Example
</div>
</div>
css
.container {
clear: both;
}
.images {
width: 15%;
float: left;
vertical-align: text-top;
}
.text {
width: 85%;
float: right;
vertical-align:text-top;
}
Why not just set the #text p display to display: inline or display:block; or use margins to align them?
<div id="quotes">
<div id="picture">
<img src="tom.jpg" />
</div>
<div id="text">
<p>"Christiaan was one of the stand out candidates throughout, therefore there was no hesitation in offering him a place on this highly sort after scheme..."</p>
</div>
</div>
Display the container div as table and the text and image divs as table-cell to make them the same heights. You can then centre the image vertically through vertical-align:middle.
#quotes {
display:table;
}
#picture {
width: 15%;
display:table-cell;
vertical-align: middle;
}
#text {
display:table-cell;
width:85%;
padding-left: 16%;
}
#picture img {
width: 100%;
}
http://jsfiddle.net/X3WsV/1/
I have a div which has display: block. Inside of it, I have another div with display: inline-block. When I measure the size of the containing div, children bounds aren't taken into account. It's readily visible in a browser's inspector. Is there a way to stretch the containing div so that its bounds contain bounds on inline block?
Here is code which demonstrates the problem:
<div style="display: inline">
<div style="display: inline">aaa</div>
<div style="display: inline-block; width: 100px; height: 100px; background: red"></div>
</div>
P.S. I can't change inline on the container to the inline block. The only thing I can change is inline-block div's attributes.
You can apply display: table; on the container div. Here's a working fiddle.
Set height and width to auto
<div style="display: inline-block; background-color:green;width:auto; height:auto;">
<div>aaa</div> ^^^^^^^^^^^^^^^^^^^^^^^^
<div style="width: 100px; height: 100px; background: red;opacity:0.5;"></div>
</div>
You could wrap the contents within a div and give it a value of display: block;
DEMO http://jsfiddle.net/kevinPHPkevin/649EB/
CSS
.container {
background: #ccc;
}
.inner {
display: block;
background: #000;
}
HTML
<div class="container" style="display: inline">
<div class="inner">
<div style="display: inline">aaa</div>
<div style="display: inline-block; width: 100px; height: 100px; background: red"></div>
</div>
</div>
EDITED
If you can use display: block; then I would set it to height: auto;
[updated] DEMO http://jsfiddle.net/kevinPHPkevin/649EB/1/
i'm attempting to create an header which is divided into 3 divs
they will all be set to display: inline-block
the left header part will contain a slogan and a logo which i wan't the slogan to be at
the right of the logo
the problem is my logo div and my slogan div are always placed one on top of the other .
to my understanding an inline element would be placed next to the last inline element
with in the same block , notice that the header-left div has 250px width and each of the
child div's have 100px width so why are they not placed one next to the other ?
my markup :
<div id="header">
<div id="header-left">
<div id="logo" />
<div id="slogan">
<span> Buy For U</span>
</div>
</div>
</div>
my css :
div#header
{
border: 1px solid black ;
height: 200px;
}
div#header div#header-left
{
display: inline-block;
height: 100%;
width: 250px;
}
div#header div#header-left div#logo
{
display: inline-block;
background: url("Google-Desktop-64.png") no-repeat center;
background-size: 25%;
height: inherit;
width: 100px;
}
div#header div#header-left div#slogan
{
display: inline-block;
height: inherit;
width:100px;
}
everything's fine. just close the logo's <div> properly. "self-closing" tags.
<div id="header">
<div id="header-left">
<div id="logo"></div>
<div id="slogan">
<span> Buy For U</span>
</div>
</div>
</div>
i also suggest using an <img> for the logo (and make it a link to homepage) rather than just a background. empty <div> tags are prone to errors during validation.
It is stange that your #header has a width of 200 pixels and the child #header-left 250 pixels, but apart from that I think it's better to use a float. This means that the two divs are next to each other:
div#header div#header-left div#logo
{
float: left;
background: url("Google-Desktop-64.png") no-repeat center;
background-size: 25%;
height: inherit;
width: 100px;
}
div#header div#header-left div#slogan
{
float: left;
height: inherit;
width:100px;
}
And you nead a clear in your html/css:
.clear_left { clear: left; }
And the html:
<div id="header">
<div id="header-left">
<div id="logo" />
<div id="slogan"><span> Buy For U</span></div>
<div class="clear_left"></div>
</div>
</div>
How to align the second div(display_bar) to the center
<div id="display" style="display:inline;font-size:150%;" > </div>
<div name="display_bar" id="display_bar"
style="margin-left: auto;margin-right: auto;width:125em;text-align:center;visibility=visible;display:inline;">
<img class="view_prev" src="first.png">
<img class="view_prev" src="2.png" >
<img class="view_prev" src="3.png" >
<img class="view_prev" src="4.png" >
<img class="view_prev" src="5.png" >
</div>
Also the second div should be inline with the first div
Thanks.
Since it is display: inline, set text-align: center on its parent element and ask yourself if it should be a span instead of a div.
(NB: CSS uses :, not = and the alt attribute is mandatory for img elements)
Try this css:
#display_bar
{
margin:0 auto;
width:300px; /* or whatever width */
}
You can also center an element with display: inline-block or display: inline by using text-align: center on the parent element. This will center the text inside as well. I think this may be what you want, since you said you wanted to align everything to the center. Just put it all into the div.
For example:
<div class="wraper">
<div class="inwrap">
Lorem ipsum dolor text...
</div>
</div>
CSS:
.wraper {
}
.inwrap {
width: 50%;
margin: 0 auto;
}
OR:
.wraper {
text-align: center;
}
.inwrap {
display: inline-block; /*or inline*/
width: 50%;
}