This is probably a very easy question, but I can't figure out how to make parent div element's height the same as the child image height.
Here is a plunkr example
<div id="parent">
<img src="http://pad1.whstatic.com/images/thumb/3/3d/Become-a-Ghost-Step-5.jpg/aid2076316-728px-Become-a-Ghost-Step-5.jpg">
</div>
CSS
img {
width: 100%;
}
If you inspect parent div, then you'll find that it's height is bigger than the child image's. Thanks in advance.
You need to give the image a style of display:block otherwise you will get the gap at the bottom:
#parent {
border: 1px solid black
}
#parent > img {
display: block;
width:100%;
}
<div id="parent">
<img src="http://pad1.whstatic.com/images/thumb/3/3d/Become-a-Ghost-Step-5.jpg/aid2076316-728px-Become-a-Ghost-Step-5.jpg">
</div>
Just like Pete said. Add display:block to your #parent > img. Img is an inline-block element by default.
Alternative 1
Set display: block on your <img>, like #Pete demonstrates. This is probably the preferred solution.
#parent {
border: 1px solid black
}
#parent > img {
display: block;
width:100%;
}
<div id="parent">
<img src="http://pad1.whstatic.com/images/thumb/3/3d/Become-a-Ghost-Step-5.jpg/aid2076316-728px-Become-a-Ghost-Step-5.jpg">
</div>
Alternative 2
Remove white-spacing on your #parent by either setting line-height: 0 or font-size:0.
#parent {
border: 1px solid black;
line-height: 0;
}
<div id="parent">
<img src="http://pad1.whstatic.com/images/thumb/3/3d/Become-a-Ghost-Step-5.jpg/aid2076316-728px-Become-a-Ghost-Step-5.jpg">
</div>
Alternative 3
Add a negative margin. This is a rather poor solution, but I believe it's worth mentioning.
#parent {
border: 1px solid black;
}
#parent > img {
width:100%;
margin-bottom: -4px;
}
<div id="parent">
<img src="http://pad1.whstatic.com/images/thumb/3/3d/Become-a-Ghost-Step-5.jpg/aid2076316-728px-Become-a-Ghost-Step-5.jpg">
</div>
Related
I have these 3 div's. they are set to display inline-block in a wrapper with a width of 1000px. each div is 330px. I have some issues getting them to line up but i dont want to use float left.
How do i display them inline block?
image of my issue
All you need to do is add vertical-align to your elements. The value depends on how you want the elements to align, but you're probably looking for vertical-align: top.
Without vertical-align:
body {
width: 1000px;
}
div {
background: red;
width: 330px;
height: 100px;
display: inline-block;
}
<div>ASDASD</div>
<div>ASD</div>
<div></div>
With vertical-align:
body {
width: 1000px;
}
div {
background: red;
width: 330px;
height: 100px;
display: inline-block;
vertical-align: top;
}
<div>ASDASD</div>
<div>ASD</div>
<div></div>
Hope this helps! :)
Can you share a fiddle with your code, otherwise this seems to work
<div style="width:1000px;background:#aaa">
<div style="width:330px;display:inline-block;background:#f00">
a
</div>
<div style="width:330px;display:inline-block;background:#0f0">
b
</div>
<div style="width:330px;display:inline-block;background:#00f">
c
</div>
</div>
See https://jsfiddle.net/ptornhult/xoqLgtq1/
they should automatically line up if they have space. There is something else pushing it down, see below as long as you have width they should auto line up.
.wrapper {
width: 1060px;
border: 10px solid green;
}
.inline {
border: 10px solid red;
height: 500px;
width: 330px;
display: inline-block;
}
borders have a impact on size as well so you need to have the wrapper fit borders as well (hence why my wrapper is slightly larger).
https://codepen.io/Zuriel/pen/VMmdbw
Here is a JSFiddle trying to replicate your issue.
https://jsfiddle.net/4pvebp05/
It may be that you have not set your container to be display: block?
In that case, try vertical-align: middle
We can do two different ways
Display inline-block.
<div class="inline">
<div>
First
</div>
<div>
Second
</div>
<div>
Third
</div>
</div>
CSS
.inline{
width:1000px;
}
.inline div{
display:inline-block;
width:330px;
}
https://jsfiddle.net/md25je2g/
Display flex divide three equal column
<div class="flex">
<div>
First
</div>
<div>
Second
</div>
<div>
Third
</div>
</div>
CSS
.flex{
display:flex;
width:1000px;
}
.flex div{
flex:1;
border:1px solid red;
}
https://jsfiddle.net/mL3eqvoe/
I am a rookie for front-end development. Recently, I wrote codes like:
<div style="background-color:red">
<img src='https://www.logaster.com/blog/wp-content/uploads/2013/06/jpg.png'>
</div>
The height of image(logo.jpg) is 80px, but the height of div is 82px. Why?
You can show image like a block to fix that,
<div>
<img style="display:block" src='logo.jpg'>
</div>
<div style="height:your height; width:your witdh;">
<img src='logo.jpg'>
</div>
To change the height or width you can do what i did above with inline style. or give the div a class or give the div an id and style it in an external stylesheet.
You need to write proper css to achieve this.
<div class="wrap">
<div class="box1">
<img src="http://www.placekitten.com/500/500">
</div>
</div>
.box1 {
width:auto;
height: auto;
max-width: 600px;
max-height: 300px;
background-color:chocolate;
padding:5px;
display: inline-block;
}
.box1 img {
vertical-align: top;
max-width: inherit;
max-height: inherit;
}
.wrap {
border: 1px dotted gray;
margin: 1.00em 0;
text-align: center;
}
JsFiddle : https://jsfiddle.net/nikdtu/75nu1a4m/
Sorry for the title, this is hard to explain in one sentence. Basically, I have a div container with two divs: 1 image that is float:left(ed) and another one with text. Here is what it looks like:
<div id="container">
<img src="http://boxedinfinity.com/wp-content/uploads/2013/12/Halo3.jpg" alt="Game Image" id="gameImage">
<div id="second">
<h2>Genre:</h2>
<p>First Person Shooter</p>
</div>
</div>
And here is a fiddle of what I am doing:
http://jsfiddle.net/qMQL5/880/
I want to add padding to the p part of the div with the text. As you see, I added margin-left:50px to #second p but it doesn't do anything. Basically, I want to "indent" the text "First Person Shooter" but I am having trouble doing this. Any ideas?
Update:
This is the result of your actual code now:
So, as you can see it is applying, but you have to know a few things:
img tag is an inline element
The IMG element embeds an image in the current document at the
location of the element's definition. The IMG element has no content;
it is usually replaced inline by the image designated by the src
attribute, the exception being for left or right-aligned images that
are "floated" out of line.
since you are floating the img tag it will start behaving like an inline-block element
Floating an inline or block level element will make the element behave
like an inline-block element (from here).
So, therefore, there is a few solutions to fix this issue:
Solution #1
(a quick fix [as you can see by adding a border to your #container]- I would advise to read the other solutions below)
only using you existing HTML markup and CSS:(which will make both <h1> and <p> indented)
make your img an block element by applying display:block (optional - to fix gap below img tag)
removing margin-left from p and adding margin-right to img
#container {
border:1px solid red
}
#gameImage {
width: 100px;
float: left;
height: auto;
display:block; /*new - optional*/
margin-right:10px /*new*/
}
#second {
background-color: green;
}
<div id="container">
<img src="http://boxedinfinity.com/wp-content/uploads/2013/12/Halo3.jpg" alt="Game Image" id="gameImage" />
<div id="second">
<h2>Genre:</h2>
<p>First Person Shooter</p>
</div>
</div>
Solution #2
Since you are using float already, let's go with clearfix
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
#container {
background-color: green;
border:1px solid red;
}
#second {
float:left;
/* background-color: green; /*choose what block will have the background*/ }
#gameImage {
width: 100px;
float: left;
height: auto;
}
#second > p {
padding-left: 10px;
box-sizing: border-box;
<div id="container" class="clearfix">
<img src="http://boxedinfinity.com/wp-content/uploads/2013/12/Halo3.jpg" alt="Game Image" id="gameImage" />
<div id="second">
<h2>Genre:</h2>
<p>First Person Shooter</p>
</div>
</div>
Solution #3
dropping the floats and using display:table/table-cell
#container {
display:table;
width:100%;
background-color:green;
border:1px solid red;
}
#container > div {
display:table-cell;
vertical-align:top;
}
#container > div:first-child, #container > div > img {
width:100px
}
#container > div > img {
display:block
}
#container > #second > p {
padding-left:10px
}
<div id="container">
<div>
<img src="http://boxedinfinity.com/wp-content/uploads/2013/12/Halo3.jpg" alt="Game Image" id="gameImage" />
</div>
<div id="second">
<h2>Genre:</h2>
<p>First Person Shooter</p>
</div>
</div>
Solution #4
using inline-block
#container {
width: 100%;
background-color: green;
font-size: 0;/* fix for inline-block elements gaps*/
border:1px solid red;
}
#container > div {
display: inline-block;
vertical-align: top;
font-size: 16px /* fix for inline-block elements gaps*/
}
#container > div:first-child,
#container > div > img {
width: 100px
}
#container > div > img {
display: block
}
#container > #second > p {
padding-left: 10px
}
<div id="container">
<div>
<img src="http://boxedinfinity.com/wp-content/uploads/2013/12/Halo3.jpg" alt="Game Image" id="gameImage" />
</div>
<div id="second">
<h2>Genre:</h2>
<p>First Person Shooter</p>
</div>
</div>
NOTE:
You may want to take a look at some articles regarding floats, here and here
Your margin on #second must be as large as your image (100px) + the padding you want. Try with margin-left: 150px you will see.
Just use the space well with giving width to each element. You can give width as px or in % . You can try this
#second {
background-color: green;
float:left;
width:80%;
}
The non-floating element actually takes the entire width of the frame.
img {
float: left;
opacity: .75;
}
div {
background: aqua;
padding-left: 50px; /*nothing happens visually*/
}
<img src="http://lorempixel.com/150/150" />
<div>Hello</div>
To fix it you could simply set overflow:auto on it.
img {
float: left;
opacity: .75;
}
div {
background: aqua;
overflow: auto;
padding-left: 50px;
}
<img src="http://lorempixel.com/150/150" />
<div>Hello</div>
I'm not exactly sure what you're trying to achieve with the green box, but If you're just looking to keep things as they are, you need to make the <p> element and inline-block element so that it respects the floating <img> element and doesn't just wrap around it.
#second p {
display: inline-block;
margin-left: 10px;
}
http://jsfiddle.net/0za19kcx/
I have trouble with textarea inside a div whose display style is table-cell. You can see the problem here. The last div has a textarea and somehow it causes an empty area below itself and above other divs.
BTW I am trying to have a structure like this. According to selection, cells will be displayed in a fixed height area with equal widths having a total 100%. Problem occurs when there is a textarea inside any div. If there is an existing component that behaves like this any recommendation will be appreciated.
HTML
<div class="panes">
<div id="pane1" class="pane">
<div class="pane-content"></div>
</div>
<div id="pane2" class="pane">
<div class="pane-content"></div>
</div>
<div id="pane3" class="pane">
<div class="pane-content">
<textarea></textarea>
</div>
</div>
</div>
CSS
.panes {
display: table;
table-layout: fixed;
width:100%;
height:100px;
}
.pane {
display: table-cell;
border: solid 1px;
}
.pane-content {
display: block;
overflow: auto;
height: 100px;
border: solid 1px red;
}
.pane-content textarea {
display: block; /*This fix the issue in IE but other browsers still broken*/
width: 100%;
height: 100px;
}
make it like this:
.pane {
display: table-cell;
border: solid 1px;
vertical-align: top;
}
Fiddle here: http://jsfiddle.net/csaltyj/mbnWm/
<style type="text/css">
#container {
border: 2px solid #000;
position: absolute;
width: 20em;
}
.box {
background: transparent;
position: absolute;
border: 1px solid #0f0;
}
</style>
<div id="container">
<div class="box">
<p>X</p>
<p>Taller than the other two.</p>
</div>
<div class="box">
<p> Y</p>
</div>
<div class="box">
<p> Z</p>
</div>
</div>
This is not working. They overlap fine, but there are issues. The goal is to:
Get the #container to properly wrap around the children divs.
Have the .box divs fill (width & height) the parent #container (so the green borders should reach all the way out to the thick black border).
This must be possible, I'm just having a hard time with positioning. (that and floats seem to be the toughest parts of CSS)
Thanks for any help.
The problem you have here is that anything that is position: absolute; is removed from flow. Thus, #container can never contain the .boxes. In this cause you will need to set height and width on #container and make sure the .boxes can never expand beyond it. You requested they fill the #container, so I've done that here: http://jsfiddle.net/X3EJ6/
Note though that because width and height are set to 100% the borders will not work correctly. You will need to set explicit values or use box-sizing and set it to border-box (this is not support in IE < 8).
<style type="text/css">
#container {
border: 2px solid #000;
position: absolute;
width: 20em;
height: 10ex;
overflow: hidden;
}
.box {
background: transparent;
position: absolute;
border: 1px solid #0f0;
width: 100%;
height: 100%;
}
</style>
<div id="container">
<div class="box">
<p>X</p>
<p>Taller than the other two.</p>
</div>
<div class="box">
<p> Y</p>
</div>
<div class="box">
<p> Z</p>
</div>
</div>
How to make children auto fit parent's width only with CSS?