We Keep Coding

i want to place the text near the image inside the round box

I want the icon to be near the text inside the round box but its appearing down, here's my code.
HTML:
<div className="RoundBox">
<div className="DashImages"><img src={PDF} alt="PDF"></img>
<div className="IconText">PDF File</div>
</div>
CSS:
img {
width: 3vw;
height: 3vw;
margin-left: 1vw;
}
.IconText {
}
.RoundBox {
border-radius: 0.5vw;
border: 1.5px solid grey;
box-shadow: #e3eaf6;
width: 20vw;
height: 3vw;
float: left;
}

This should do the trick.
Div elements are block items so they will always try to fill the whole horizontal space if the display or width properties are not changed or the parent item overrides that behavior (eg. using FlexBox)
HTML
<div className="RoundBox">
<div className="DashImages"><img src={PDF} alt="PDF" /></div>
<div className="IconText">PDF File</div>
</div>
CSS
img {
width: 3vw;
height: 3vw;
margin-left: 1vw;
}
.IconText {
padding-left: 10px
}
.RoundBox {
border-radius: 0.5vw;
border: 1.5px solid grey;
box-shadow: #e3eaf6;
width: 20vw;
height: 3vw;
float: left;
display: flex;
align-items: center;
}

Your html is invalid with the image tag and you're missing a div. You would want to fix that first.
<div className="DashImages"><img src={PDF} alt="PDF" /></div>
You then have a couple options. Here are a two examples:
You can simply add float: left to the img css. I might recommend using a class rather than a selector which targets all img tags. Example
img {
width: 3vw;
height: 3vw;
margin-left: 1vw;
float: left;
}
You can also explore using flexbox adding display: flex; to your .RoundBox class. Note there are different alignment attributes that you can use to position elements using flex.
.RoundBox {
border-radius: 0.5vw;
border: 1.5px solid grey;
box-shadow: #e3eaf6;
width: 20vw;
height: 3vw;
float: left;
display: flex;
}

Changing contents of <span> is affecting placement of other elements in line [duplicate]

When two inline-block divs have different heights, why does the shorter of the two not align to the top of the container? (DEMO):
.container {
border: 1px black solid;
width: 320px;
height: 120px;
}
.small {
display: inline-block;
width: 40%;
height: 30%;
border: 1px black solid;
background: aliceblue;
}
.big {
display: inline-block;
border: 1px black solid;
width: 40%;
height: 50%;
background: beige;
}
<div class="container">
<div class="small"></div>
<div class="big"></div>
</div>
How can I align the small div at the top of its container?

Because the vertical-align is set at baseline as default.
Use vertical-align:top instead:
.small{
display: inline-block;
width: 40%;
height: 30%;
border: 1px black solid;
background: aliceblue;
vertical-align:top; /* <---- this */
}
http://jsfiddle.net/Lighty_46/RHM5L/9/
Or as #f00644 said you could apply float to the child elements as well.

You need to add a vertical-align property to your two child div's.
If .small is always shorter, you need only apply the property to .small.
However, if either could be tallest then you should apply the property to both .small and .big.
.container{
border: 1px black solid;
width: 320px;
height: 120px;
}
.small{
display: inline-block;
width: 40%;
height: 30%;
border: 1px black solid;
background: aliceblue;
vertical-align: top;
}
.big {
display: inline-block;
border: 1px black solid;
width: 40%;
height: 50%;
background: beige;
vertical-align: top;
}
Vertical align affects inline or table-cell box's, and there are a large nubmer of different values for this property. Please see https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align for more details.

Use display: flex property for the parent div
The flexbox items are aligned at the start of the cross-axis.
By default, the cross-axis is vertical. This means the flexbox items will be aligned vertically at the top.
So when you apply the display: flex property to the parent div, it sets its child elements with vertical-align: top.
See the following code:
.container {
border: 1px black solid;
width: 320px;
height: 120px;
display: flex;
/** CSS flex */
}
.small {
display: inline-block;
width: 40%;
height: 30%;
border: 1px black solid;
background: aliceblue;
}
.big {
display: inline-block;
border: 1px black solid;
width: 40%;
height: 50%;
background: beige;
}
<div class="container">
<div class="small"></div>
<div class="big"></div>
</div>
Browser Compatibility: Flexbox is very well supported across modern browsers.

<style type="text/css">
div {
text-align: center;
}
.img1{
width: 150px;
height: 150px;
border-radius: 50%;
}
span{
display: block;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<input type='password' class='secondInput mt-4 mr-1' placeholder="Password">
<span class='dif'></span>
<br>
<button>ADD</button>
</div>
<script type="text/javascript">
$('button').click(function() {
$('.dif').html("<img/>");
})

Add overflow: auto to the container div.
http://www.quirksmode.org/css/clearing.html This website shows a few options when having this issue.

Inherit padding width without position absolute? Is it possible?

Not sure, but I am currently not able to figure out. I'm trying to center the inner div (blue transparent one) from the parent (with the red background) inside the background. As an example, they're technically in each other perfectly at the first example in the snippet.
At the second example however I've added padding: 5px; to both of them to the red and blue one. To the blue one because I wanted to inherit the width some how.
https://jsfiddle.net/L8enbcy3/
.box-1-1 {
width: 50px;
height: 50px;
background: red;
position: relative;
display: block;
}
.box-1-2 {
width: 50px;
height: 50px;
background: #0000ffb0;
position: relative;
}
.box1 {
width: 50px;
height: 50px;
background: red;
padding: 5px;
position: relative;
display: block;
}
.box2 {
width: 50px;
height: 50px;
background: #0000ffb0;
padding: 5px;
}
<div class="box-1-1">
<div class="box-1-2"></div>
</div>
<pre>
</pre>
<div class="box1">
<div class="box2"></div>
</div>
What I'm trying is to get "box2" centered into "box1" like example 1 but with its padding, so that's covered by blue. without having to position: absolute it, if possible. What I'm thinking I have to do is to create and invisibile box absolute it, "center it with top: 0 and left: 0 when the parent has position: relative. Then as I mentioned with it being absolute it would go to the corners of the parents padding too and then in the absolute box, I would create a relative one with display: table and put in all the content.
My question now though is, is there another way to do that?

Solution 1: transform: translate()
You could use transform: translate() with variables to achieve what you want, without weird margins (next solution). Here's some MDN about translate().
:root {
--padding: 5px;
}
.box1 {
height: 50px;
width: 50px;
background-color: red;
padding: var(--padding);
}
.box2 {
height: calc(50px + var(--padding)*2);
width: calc(50px + var(--padding)*2);
background-color: #0000ffb0;
transform: translate(calc(0px - var(--padding)), calc(0px - var(--padding)))
}
<div class="box1">
<div class="box2"></div>
</div>
As you can see, the box is brought up and left with translate, and the height is lengthened by adding the needed padding to it. Thisachieves the desired cover effect.
Solution 2: Positive padding, negative margin
You could also use positive paddings and negative margins. Info below code snippet.
:root {
--padding: 5px;
}
.box1 {
height: 50px;
width: 50px;
background-color: red;
padding: var(--padding);
position: relative;
display: block;
}
.box2 {
height: 50px;
width: 50px;
background-color: #0000ffb0;
padding: var(--padding);
margin: calc(0px - var(--padding));
}
<div class="box1">
<div class="box2"></div>
</div>
What's happening here is following the CSS box model, found on MDN and w3schools. We're simply pushing out with margin and sucking in with padding.
Then, as per request in the comments, --padding is a CSS variable that stores the amount of padding that you want.
Hope I helped!
Cheers, Bobbay

You can add a negative margin if you insist on keeping the padding in place.
.box-1-1 {
width: 50px;
height: 50px;
background: red;
position: relative;
display: block;
}
.box-1-2 {
width: 50px;
height: 50px;
background: #0000ffb0;
position: relative;
}
.box1 {
width: 50px;
height: 50px;
background: red;
padding: 5px;
position: relative;
display: block;
}
.box2 {
width: 50px;
height: 50px;
background: #0000ffb0;
padding: 5px;
margin: -5px;
}
<div class="box-1-1">
<div class="box-1-2"></div>
</div>
<pre>
</pre>
<div class="box1">
<div class="box2"></div>
</div>

To center box2 within box1 without absolute position, you can use following css:
.box1 {
display: flex;
align-items: center;
justify-content: center;
}

Edit: example 2 illustrate your need. just remove padding from both boxes and settop: 0; and 'left: 0' with position: relative on box 2. I hope this is the required solution
to center box 2 you need to make its dimension less than box 1. consider the extra pixels added with padding. so the inner box width and height should be 10px less than the outer box.
Example:
.box1 {
width: 50px;
height: 50px;
background: red;
padding: 5px;
position: relative;
display: block;
}
.box2 {
width: 40px;
height: 40px;
background: #0000ffb0;
padding: 5px;
}
.box1-1 {
border: 2px solid yellow;
width: 50px;
height: 50px;
background: red;
position: relative;
display: block;
}
.box2-2 {
position:relative;
top: 0px;
left: 0px;
width: 50px;
height: 50px;
background: #0000ffb0;
}
<div class="box1">
<div class="box2"></div>
</div>
<br>
<div class="box1-1">
<div class="box2-2"></div>
</div>

How browser renders HTML

I am trying to create a structure similar to panels. This is what i have tried:
FIDDLE
<div id='main'>
<div id='firstp'>Panel 1</div>
<div id='secondp'>Panel 2
<div id='slide'>Panel 3</div>
</div>
</div>
and CSS is
#main{
width: 300px;
height: 300px;
border: 1px solid black;
}
#firstp{
width: 20%;
height: 100%;
border: 1px solid blue;
display: inline-block;
}
#secondp{
width: 20%;
height: 100%;
border: 1px solid red;
display: inline-block;
position: relative;
background-color: red;
}
#slide{
width: 100%;
height: 100%;
position: absolute;
border: 1px solid green;
background-color: green;
}
I am curious to know how browser renders HTML while parsing. As we can see there are three panels, Panel 3 being child of Panel 2, is seen on top of Panel 2. Whereas as per requirement , Panel 2 should be on top of Panel 3 and say when i click on some button in panel 2, panel 3 should slide behind panel 2 and comes forward on right side of panel 2. Hope i made myself clear. Please help.

If you want panel 2 to be on top of panel 3 then you will need to apply something like z-index:-1;.
I have modified your fiddle to show this working.
Panel 3 is behind panel 2 as you requested and there is a button that when clicked transforms the panel to the right. You can easily neaten this up to hide the entire panel and do some cool jQuery stuff to make the slide transition nicer.
Just try to remember that unless you say otherwise, children will usually appear in front of their parent.

This isn't about browser rendering, it's your CSS that's making the children exceed the height of the parent.
Because you've fixed the height of the parent, yet you've said that #slide is 100% in height, but there's another child of #secondp, which is the text node Panel 2. So technically, #secondp has a height of 100% + height of Panel 2, hence the overflow.
To remedy this, put the text node Panel 2 inside an element, then set the height of that element (I've used 10%) and then adjust the height of #slide to be 100% - specified height of the new element.
Here's an example:
Fiddle
HTML:
<div id='main'>
<div id='firstp'>Panel 1</div>
<div id='secondp'>
<div id="slide1">Panel 2</div>
<div id='slide'>Panel 3</div>
</div>
</div>
CSS:
#main{
width: 300px;
height: 300px;
border: 1px solid black;
}
#firstp{
width: 20%;
height: 100%;
border: 1px solid blue;
display: inline-block;
vertical-align: top;
box-sizing: border-box;
}
#secondp{
width: 20%;
height: 100%;
border: 1px solid red;
display: inline-block;
position: relative;
background-color: red;
box-sizing: border-box;
}
#slide{
width: 100%;
height: 90%;
position: relative;
border: 1px solid green;
background-color: green;
box-sizing: border-box;
}
#slide1 {
height: 10%;
}
You'll also notice I've added vertical-align: top to firstp aswell, otherwise it'll be off the top.
Also, I've added box-sizing: border-box to prevent the border overlapping the parent.

#main{
width: 300px;
height: 300px;
border: 1px solid black;
}
#main>div{
width: 20%;
height: 100%;
border: 1px solid blue;
display: inline-block;
}
#main>div{
width: 20%;
height: 100%;
border: 1px solid red;
display: inline-block;
position: relative;
background-color: red;
}
#slide{
width: 100%;
height: 100%;
position: absolute;
border: 1px solid green;
background-color: green;
}

Loading an Image in `<div>` overrides html text

I'm writing an html page that should have the following behavior:
When loaded it contains an empty <div> with a link inside it.
Once pressed the link runs the script StartTrial.js which is supposed to load an image from a directory, visualize it, and give some instructions on what to do.
However, as you can see, once the image is loaded it covers the instructions. This is cause the instructions are written in a <div> that has a margin of 30px from the container <div> with its size before loading the image. How can I fix my code so that the text is always shown with a 30px margin from the bottom of the image?
Here are my code snippets:
Html
<div id="container">
Start Trial
<img class="displays" id="t1_img" src="./images/immi.jpg">
</div>
<div class="instruction" id="instr_1">
<p><b>Instruction:</b><p>
<p>Some text here.</p>
</div>
CSS
#container {
position: relative;
background: gray;
width: 300px;
height: 300px;
margin: 30px;
}
.displays {
position: absolute;
display: none;
top: 0px;
left: 0px;
}
JavaScript
function StartTrial() {
$('#startTrial').hide();
$('#t1_img').show();
$('#instr_1').show();
}

Change your css to use min-height and min-width
#container {
position: relative;
background: gray;
min-width: 300px;
min-height: 300px;
margin: 30px;
}
and remove the absolute positioning, as there is no real need for it.
.displays {
display: none;
top: 0px;
left: 0px;
}
Your image is larger than the container and hence it is overlapping the instructions.

No need to over-engineer it, you can have a css only solution or a simple JS one as follows:
CSS only solution
HTML:
<input type="checkbox" id="startCheckbox" class="start-checkbox"/>
<div id="container" class="container">
<label for="startCheckbox" class="start-trial center">Start Trial</label>
<div class="instruction center" id="instr_1">
<p><b>Instruction:</b></p>
<p>Some text here.</p>
</div>
</div>
CSS:
.center {
position: absolute;
top:0; right:0; bottom:0; left:0;
margin: auto;
}
.container {
border: 1px solid #ccc;
width: 400px;
height: 400px;
position: relative;
}
.container .instruction {
border: 1px dashed #333;
background: rgba(255,238,221,.9);
width: 250px;
height: 250px;
padding: 25px;
text-align: center;
display: none;
}
.container .start-trial {
position: absolute;
height: 20px;
width: 80px;
text-decoration: underline;
cursor: pointer;
}
.container .start-checkbox {
display: none;
}
.start-checkbox {
display: none;
}
.start-checkbox:checked ~ .container .start-trial {
display: none;
}
.start-checkbox:checked ~ .container .instruction {
display: block;
}
.start-checkbox:checked ~ .container {
background: url(http://www.ceritaspros.com/dev/images/dogs/FunnyPuppies/funny-puppies-sleeping-400x400.jpg);
}
Fiddle: http://jsfiddle.net/qobbkh6f/5/
CSS+JS Solution
HTML:
<div id="container" class="container">
Start Trial
<div class="instruction center" id="instr_1">
<p><b>Instruction:</b></p>
<p>Some text here.</p>
</div>
</div>
CSS:
.center {
position: absolute;
top:0; right:0; bottom:0; left:0;
margin: auto;
}
.container {
border: 1px solid #ccc;
width: 400px;
height: 400px;
position: relative;
}
.container .instruction {
border: 1px dashed #333;
background: rgba(255,238,221,.9);
width: 250px;
height: 250px;
padding: 25px;
text-align: center;
display: none;
}
.container.clicked {
background: url(http://www.ceritaspros.com/dev/images/dogs/FunnyPuppies/funny-puppies-sleeping-400x400.jpg);
}
.container.clicked .start-trial {
display: none;
}
.container.clicked .instruction {
display: block;
}
.copntainer.clicked .instruction {
display: block;
}
.container .start-trial {
position: absolute;
height: 20px;
width: 80px;
}
JS:
$("#container").on("click", "#startTrial", function(e) {
e.preventDefault();
$("#container").addClass("clicked");
});
Fiddle: http://jsfiddle.net/qobbkh6f/3/

Try this and let me know if it helps
HTML
<div id="container">
Start Trial
<img class="displays" id="t1_img" src="./images/immi.jpg">
</div>
<div class="instruction" id="instr_1">
<p><b>Instruction:</b><p>
<p>Some text here.</p>
</div>
CSS
#container {
position: relative;
background: grey;
width: 300px;
height: 300px;
margin: 30px;
overflow:hidden
}
.displays {
position: absolute;
top: 0px;
left: 0px;
max-height:100%;
}
Javascript
function StartTrial() {
$('#startTrial').hide();
$('#t1_img').show();
$('#instr_1').show();
}
http://jsfiddle.net/5jx3dn44/

Don't use absolute positioning on your image.
The whole concept of absolute positioning is to make an element overlap the other elements on the page. If you don't want something to overlap other elements then don't use it.
Also don't give a size to your container. It's not the container that's 300x300 and grey - it's your start trial block. If the container is invisible and flexible then it will look good with the image in it when you remove the start trial block. I forget how hide() works but just change to display:none if it doesn't actually remove the element from the layout.