Develop Reference

How to get the text in the left-hand div flowing around the close button on the right (to work in IE8 as well!)

I really thought I knew how to do this, and I know there are a LOT of questions about this, but I haven't seen an answer that matches my ludicrously simple case.
Here's the html:
<div id="examined-evidence">
<div id="examined-evidence-details">
<div class="heading"><p>I would like this text to float left and, if necessary, flow AROUND the close button which, ideally, would stay put in the top right corner, where most reasonable people would expect a close button to sit. Surely this should be more straight forward.</p></div>
<div id="examined-evidence-close-button" class="button"></div>
<div class="clear"></div>
</div>
</div>
And here's the css:
#examined-evidence {
z-index: 1000;
display: none;
position: absolute;
left: 25%;
top: 10%;
width: 50%;
height: 80%;
background-image: url('../assets/images/transparent_grey_tint.png');
border: 1px solid #33ffff;
padding: 0px;
margin: 0px;
}
#examined-evidence.active {
display: inline-block;
}
#examined-evidence #examined-evidence-details {
background-color: #333333;
}
#examined-evidence #examined-evidence-details .heading {
padding: 0px;
float: left;
display: inline-block;
}
#examined-evidence #examined-evidence-details .heading p {
text-align: center;
padding: 3px 12px 3px 12px;
display: inline-block;
font-size: 0.75em;
color: white;
margin: 0px;
}
#examined-evidence #examined-evidence-image {
text-align: center;
margin: 0px auto;
height: 80%;
width: auto;
}
#examined-evidence #examined-evidence-image img {
height: 80%;
}
#examined-evidence-close-button {
background-color: red;
display: inline-block;
float: right;
height: 34px;
width: 34px;
margin: 0px;
padding: 0px;
}
.clear {
clear: both;
}
...but, despite setting almost everything to inline-block, the close button div still displays BELOW the text div, in IE and in Chrome.
(And just FYI, the img src gets set from javascript, so please don't worry about that.)
If anyone has any ideas, I'm dying to show this web page who's boss. What did I screw up this time?

Drop your close button into an inline-span inside the p element, adjust your margins, and you should be all set:
#examined-evidence {
z-index: 1000;
position: absolute;
left: 25%;
top: 10%;
width: 50%;
height: 80%;
background: dimGray;
border: 1px solid #33ffff;
padding: 0px;
margin: 0px;
}
#examined-evidence.active {
display: inline-block;
}
#examined-evidence #examined-evidence-details {
background-color: #333333;
}
#examined-evidence #examined-evidence-details .heading {
padding: 0px;
float: left;
display: inline-block;
}
#examined-evidence #examined-evidence-details .heading p {
text-align: justify;
padding: 3px 12px 3px 12px;
display: inline-block;
font-size: 0.75em;
position: relative;
width: 100%;
color: white;
margin: 0px;
}
#examined-evidence #examined-evidence-image {
text-align: center;
margin: 0px auto;
height: 80%;
width: auto;
}
#examined-evidence #examined-evidence-image img {
height: 80%;
}
#examined-evidence-close-button {
background-color: red;
display: inline-block;
float: right;
height: 34px;
width: 34px;
padding: 0px;
position: relative;
margin: 0px 15px 10px 10px;
}
.clear {
clear: both;
}
<div id="examined-evidence">
<div id="examined-evidence-details">
<div class="heading"><p><span id="examined-evidence-close-button" class="button"></span>I would like this text to float left and, if necessary, flow AROUND the close button which, ideally, would stay put in the top right corner, where most reasonable people would expect a close button to sit. Surely this should be more straight forward.I would like this text to float left and, if necessary, flow AROUND the close button which, ideally, would stay put in the top right corner, where most reasonable people would expect a close button to sit. Surely this should be more straight forward.I would like this text to float left and, if necessary, flow AROUND the close button which, ideally, would stay put in the top right corner, where most reasonable people would expect a close button to sit. Surely this should be more straight forward.</p></div>
<div class="clear"></div>
</div>
</div>

Bringing a div out of a wrapper div having a fixed height

I have a div2 inside another div1. The div1 has a fixed height and an overflow. Here is the scenario:
Where the outer dark yellow div is the div1 (having a scroll which you can see on the right side), and the div.box1-large(light yellow border) is the div2. As you can see, the div2's extra content is hidden inside the div1 which I can see only when I scroll the div1. How can I bring the div2 out of div1? Please note that div1 has many other divs too inside it.
Here are the corresponding css:
.div1 {
background: #2a2a2a;
border-style: solid;
border-width: 0 1px 1px 1px;
padding: 10px;
min-height: 350px;
height: 350px;
overflow: auto;
}
.div2 {
border: solid 10px;
font-size: 13px;
text-align: left;
width: 420px;
height: 270px;
background: green;
position: absolute;
left: 0px;
z-index: 9;
top: 62px;
}
EDIT
Here is the initial div:
I tried to change div1 css to
.div1 {
background: #2a2a2a;
border-style: solid;
border-width: 0 1px 1px 1px;
padding: 10px;
min-height: 350px;
height: 350px;
overflow: visible;
}
But this removes the scroll in div1 and shows:
What I want is the above secenario but with scroll in div1.

ok. The way i understand it.
You want the .div2 to be detached from the div1 . But div1 should remain scroll-able because of others div..ns inside it.
i guess position:absolute should do it.
Made a small fiddle, have a look see. Better view in full screen
body {
font-family: Arial, sans-serif;
font-size: 14px;
}
.div1 {
background: #2a2a2a;
border-style: solid;
border-width: 0 1px 1px 1px;
padding: 10px;
min-height: 350px;
height: 350px;
overflow: auto;
}
.inter {
border: solid 10px;
background-color: blue;
height: 100px;
width: 100px;
}
.div2 {
border: solid 10px;
font-size: 13px;
text-align: center;
width: 420px;
height: 270px;
background: green;
z-index: 9;
}
.abs {
position: absolute;
background-color: red;
}
<div class="div1">
<div class="inter">Something</div>
<div class="div2 abs">Stuff Man</div>
<div class="div2">What??</div>
<div class="div2">What??</div>
</div>
Let me know if this helps, or if it missed the mark completely !

maybe you are looking for this?
$(".div2").appendTo($(".div1").parent);

Creating a popup with responsive styling

I'm trying to create a popup with 2 inner divs with responsive sizing.
I thought I could achieve this by setting their width and height as percentages of the parent div but it doesn't seem to work. If you resize your browser window, the leftArea div in my jsfiddle falls out of the popup div.
How can I fix this?
jsfiddle

Use box-sizing: border-box; property to set the padding and border inner the box width.
Check more docs here: box-sizing - CSS
body {
background-color: black;
}
.popup {
position: absolute;
margin: 0 auto;
width: 80vw;
height: 10vh;
left: 0%;
right: 0%;
top: 50%;
display: block;
background-color: orange;
border: 2px solid white;
border-radius: 15px;
}
.leftArea {
position: relative;
float: left;
width: 85%;
height: 98%;
margin: 0px;
background-color: red;
border-radius: 14px 0px 0px 14px;
border: 0px;
padding-left: 10px;
padding-right: 10px;
box-sizing: border-box; /* Use this property to set the padding inner */
display: inline-block;
text-align: left;
}
.rightArea {
position: relative;
float: right;
width: 12.25%;
height: 100%;
background-color: #123456;
margin: 0px;
display: inline-block;
border-radius: 0px 14px 14px 0px;
border: 0px;
}
<div class="popup">
<div class="leftArea"></div>
<div class="rightArea"></div>
</div>

how to force display all fixed width elements inside a div in a single line

I have fixed width elements inside a div and i need to force all the elements to be displayed on a single line with horizontal scroll bar to 'grid-content'. I have tried many things but stuck.
Here is the fiddle - https://jsfiddle.net/29pobkzf/
Here is my CSS and HTML
.grid-container {
width: 100%;
margin-top: 20px;
overflow: auto;
}
.grid-content {
width: 100%;
height: 400px;
float: left;
}
.grid-content .grid-row {
width: 100%;
overflow-x:scroll;
border-right: 1px solid #ccc;
}
.grid-content .grid-row .grid-column {
border: 1px solid #cccccc;
display: inline-block;
border-top: 0;
border-right: 0;
padding: 10px;
height: 60px;
width: 400px;
}
<div class='grid-container'>
<div class="grid-content">
<div class='grid-row'>
<div class='grid-column'>a1</div>
<div class='grid-column'>a2</div>
<div class='grid-column'>a3</div>
<div class='grid-column'>a4</div>
</div>
</div>
</div>
My intention is grid-content to have a scrollbar and all its contents occupy a single line/horizontally aligned. The problem i am facing is some elements like a3 and a4 are getting rendered below a1 and a2.

This is because .grid-column are set to display: inline-block; and will wrap onto a new line by default. This behaviour can be changed by:
Adding white-space: nowrap; to .grid-content .grid-row
You may also want to remove the white space between the .grid-column elements by either writing them out in one line in HTML (as in the example below) or by putting comments in between them. This will stop the white space from adding gaps between each .grid-column element in the resultant HTML.
.grid-container {
margin-top: 20px;
width: 100%;
}
.grid-content {
float: left;
height: 400px;
width: 100%;
}
.grid-content .grid-row {
border-right: 1px solid #ccc;
overflow-x: scroll;
width: 100%;
white-space: nowrap;
}
.grid-content .grid-row .grid-column {
border: 1px solid #cccccc;
border-right: 0;
border-top: 0;
display: inline-block;
height: 60px;
padding: 10px;
width: 400px;
}
<div class='grid-container'>
<div class="grid-content">
<div class='grid-row'>
<div class='grid-column'>a1</div><div class='grid-column'>a2</div><div class='grid-column'>a3</div><div class='grid-column'>a4</div>
</div>
</div>
</div>

Use white-space: nowrap in .grid-content .grid-row class so that it suppresses line breaks and remove float: left from .grid-content
Read more about 'white-space' css property
Entire CSS can be replaced with the following:
.grid-container {
width: 100%;
margin-top: 20px;
overflow: auto;
}
.grid-content {
height: 400px;
width: 100%;
}
.grid-content .grid-row {
border-right: 1px solid #ccc;
overflow-x: scroll;
white-space: nowrap;
}
.grid-content .grid-row .grid-column {
border: 1px solid #cccccc;
border-top: 0;
border-right: 0;
padding: 10px;
height: 60px;
width: 400px;
display: inline-block;
}

There is space between <input type="text"> and its subsequent element <div>. Is there a way to make them visible inline [duplicate]

This question already has answers here:
Why is there an unexplainable gap between these inline-block div elements? [duplicate]
(6 answers)
Closed 7 years ago.
Kindly suggest the suitable modification to remove the space between the input type="text" and the subsequent div element. If i set width of input type="text" element to 180px and width of the following div to 20px; the div overflows and moves down. I would not want to use margin-left: -...px on the child div to make it appear inline (because it take -8px in firefox and -6px in chrome to make them appear inline) but I would still want both the elements to be displayed perfectly inline without any empty spaces between them and edge to edge of its parent element across all browsers.
Kindly suggest...
css:
#parentDiv {
display: block;
width: 200px;
height: 20px;
background-color: rgb(200,200,200);
border: dotted 2px;
border-radius: 0px 0px 0px 0px;
}
#parentDiv input[type="text"] {
display: inline-block;
width: 175px;
height: 90%;
border: none;
vertical-align: top;
}
#parentDiv div {
background-color: #57c274;
display: inline-block;
cursor: pointer;
color: #ffffff;
text-decoration: none;
height: 100%;
width: 20px;
/*margin-left: -6px;*/
text-align: center;
}
<div id=parentDiv>
<input type="text">
<div></div>
</div>

Change
<div id=parentDiv>
<input type="text">
<div></div>
</div>
to
<div id='parentDiv'>
<input type='text' value='' /><div></div>
</div>
In HTML either a single or multiple spaces or a line break will create a single white space. Since there is line break before <div> there is a text node there.

Simply float your elements
Than apply this styles to make it nice across all modern browsers:
#parentDiv {
width: 200px; /* 200- */
height: 20px;
background-color: rgb(200,200,200);
border: dotted 2px;
border-radius: 0px 0px 0px 0px;
}
#parentDiv input[type="text"] {
box-sizing:border-box; /* Respect the designer :) */
width: 180px; /* 180= */
height: 100%; /* Yey! finally 100% */
border: none;
float:left; /* Go left */
}
#parentDiv div {
background-color: #57c274;
float:right; /* Go right */
cursor: pointer;
color: #ffffff;
text-decoration: none;
height: 100%;
width: 20px; /* 20 */
text-align: center;
}
jsBin demo

here's a snippet extending PHPglue's answer
#parentDiv {
display: block;
width: 200px;
height: 20px;
background-color: rgb(200,200,200);
border: dotted 2px;
border-radius: 0px 0px 0px 0px;
}
#parentDiv input[type="text"] {
display: inline-block;
width: 180px;
height: 90%;
border: none;
vertical-align: top;
}
#parentDiv div {
background-color: #57c274;
display: inline-block;
cursor: pointer;
color: #ffffff;
text-decoration: none;
height: 100%;
width: 20px;
/*margin-left: -6px;*/
text-align: center;
}
<div id=parentDiv>
<input type="text"><div></div></div>