We Keep Coding

Positioning button element on image using CSS

I am working with this UI design, where I created an avatar image and also an upload button. My challenge is positioning the upload button on the image as shown below
expectation
but this is what I came up with
document.querySelector('#btnOpenFileDialog').addEventListener('click', function() {
document.querySelector('#fileLoader').click();
});
.image-cropper {
display: inline-block;
border-radius: 50%;
border: 1px solid #f2f2f2;
overflow: hidden;
}
img {
max-width: 100%;
height: auto;
}
.edit-img-btn {
position: absolute;
color: white;
font-size: .5rem;
width: 22px;
height: 22px;
padding: 5px;
border: 0;
border-radius: 50%;
background: #4169E2;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.21);
}
.edit-img-btn i {
font-size: 13px;
}
<span class="image-cropper" style=" width: 150px; height: 150px;">
<img src="assets/images/avatar.jpg" alt="">
</span>
<input type="file" id="fileLoader" style="display: none;" />
<button class="edit-img-btn" id="btnOpenFileDialog"><i class="material-icons">edit</i></button>

If you place all of it inside of an inline block element with position: relative you can adjust the position to fit your needs. Below is an example.
document.querySelector('#btnOpenFileDialog').addEventListener('click', function() {
document.querySelector('#fileLoader').click();
});
/*wrapper with position: relative */
.image-wrapper {
position: relative;
}
.image-cropper {
display: inline-block;
border-radius: 50%;
border: 1px solid #f2f2f2;
overflow: hidden;
}
img {
max-width: 100%;
height: auto;
}
.edit-img-btn {
position: absolute;
bottom: 5px; /* 5px up from the bottom */
right: 35px; /* 35px in from the right */
color: white;
font-size: .5rem;
width: 22px;
height: 22px;
padding: 5px;
border: 0;
border-radius: 50%;
background: #4169E2;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.21);
}
.edit-img-btn i {
font-size: 13px;
}
<span class="image-wrapper">
<span class="image-cropper" style=" width: 150px; height: 150px;">
<img src="https://via.placeholder.com/150" alt="">
</span>
<button class="edit-img-btn" id="btnOpenFileDialog"><i class="material-icons">edit</i></button>
<input type="file" id="fileLoader" style="display: none;" />
</span>

Add css properties top: 134px; and left: 134px; to class .edit-img-btn
document.querySelector('#btnOpenFileDialog').addEventListener('click', function() {
document.querySelector('#fileLoader').click();
});
.image-cropper {
display: inline-block;
border-radius: 50%;
border: 1px solid #f2f2f2;
overflow: hidden;
}
img {
max-width: 100%;
height: auto;
}
.edit-img-btn {
position: absolute;
top: 134px;
left: 134px;
color: white;
font-size: .5rem;
width: 22px;
height: 22px;
padding: 5px;
border: 0;
border-radius: 50%;
background: #4169E2;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.21);
}
.edit-img-btn i {
font-size: 13px;
}
<span class="image-cropper" style=" width: 150px; height: 150px;">
<img src="assets/images/avatar.jpg" alt="">
</span>
<input type="file" id="fileLoader" style="display: none;" />
<button class="edit-img-btn" id="btnOpenFileDialog"><i class="material-icons">edit</i></button>

Trouble with Jsfiddle

I'm trying to make this Jsfiddle to demonstrate an issue but I can not get it to function properly, can anybody advise?
This is the live demo site that I am recreating a Jsfiddle for.
Here is my progress on the Jsfiddle. As you can see the thumbnails in my fiddle are not expanding and help would be greatly appreciated.
/*
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-7243260-2']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
*/
/* default.css */
#import url(//fonts.googleapis.com/css?family=Lato:300,400,700);
html { height: 100%; }
*,
*:after,
*:before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 0;
margin: 0;
}
/* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
body {
font-family: 'Lato', Calibri, Arial, sans-serif;
background: #f9f9f9;
font-weight: 300;
font-size: 15px;
color: #333;
overflow: scroll;
overflow-x: hidden;
}
a {
color: #555;
text-decoration: none;
}
.container {
width: 100%;
position: relative;
}
.container > header {
width: 90%;
max-width: 1240px;
margin: 0 auto;
position: relative;
padding: 0 30px 50px 30px;
}
.container > header {
padding: 60px 30px 50px;
text-align: center;
}
.container > header h1 {
font-size: 34px;
line-height: 38px;
margin: 0 auto;
font-weight: 700;
color: #333;
}
.container > header h1 span {
display: block;
font-size: 20px;
font-weight: 300;
}
.main > p {
text-align: center;
padding: 50px 20px;
}
/* Header Style */
.codrops-top {
line-height: 24px;
font-size: 11px;
background: #fff;
background: rgba(255, 255, 255, 0.5);
text-transform: uppercase;
z-index: 9999;
position: relative;
box-shadow: 1px 0px 2px rgba(0,0,0,0.2);
}
.codrops-top a {
padding: 0px 10px;
letter-spacing: 1px;
color: #333;
display: inline-block;
}
.codrops-top a:hover {
background: rgba(255,255,255,0.8);
color: #000;
}
.codrops-top span.right {
float: right;
}
.codrops-top span.right a {
float: left;
display: block;
}
/* Component.css */
.og-grid {
list-style: none;
padding: 20px 0;
margin: 0 auto;
text-align: center;
width: 100%;
}
.og-grid li {
display: inline-block;
margin: 10px 5px 0 5px;
vertical-align: top;
height: 250px;
}
.og-grid li > a,
.og-grid li > a img {
border: none;
outline: none;
display: block;
position: relative;
}
.og-grid li.og-expanded > a::after {
top: auto;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-bottom-color: #ddd;
border-width: 15px;
left: 50%;
margin: -20px 0 0 -15px;
}
.og-expander {
position: absolute;
background: #ddd;
top: auto;
left: 0;
width: 100%;
margin-top: 10px;
text-align: left;
height: 0;
overflow: hidden;
}
.og-expander-inner {
padding: 50px 30px;
height: 100%;
}
.og-close {
position: absolute;
width: 40px;
height: 40px;
top: 20px;
right: 20px;
cursor: pointer;
}
.og-close::before,
.og-close::after {
content: '';
position: absolute;
width: 100%;
top: 50%;
height: 1px;
background: #888;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
transform: rotate(45deg);
}
.og-close::after {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.og-close:hover::before,
.og-close:hover::after {
background: #333;
}
.og-fullimg,
.og-details {
width: 50%;
float: left;
height: 100%;
overflow: hidden;
position: relative;
}
.og-details {
padding: 0 40px 0 20px;
}
.og-fullimg {
text-align: center;
}
.og-fullimg img {
display: inline-block;
max-height: 100%;
max-width: 100%;
}
.og-details h3 {
font-weight: 300;
font-size: 52px;
padding: 40px 0 10px;
margin-bottom: 10px;
}
.og-details p {
font-weight: 400;
font-size: 16px;
line-height: 22px;
color: #999;
}
.og-details a {
font-weight: 700;
font-size: 16px;
color: #333;
text-transform: uppercase;
letter-spacing: 2px;
padding: 10px 20px;
border: 3px solid #333;
display: inline-block;
margin: 30px 0 0;
outline: none;
}
.og-details a::before {
content: '\2192';
display: inline-block;
margin-right: 10px;
}
.og-details a:hover {
border-color: #999;
color: #999;
}
.og-loading {
width: 20px;
height: 20px;
border-radius: 50%;
background: #ddd;
box-shadow: 0 0 1px #ccc, 15px 30px 1px #ccc, -15px 30px 1px #ccc;
position: absolute;
top: 50%;
left: 50%;
margin: -25px 0 0 -25px;
-webkit-animation: loader 0.5s infinite ease-in-out both;
-moz-animation: loader 0.5s infinite ease-in-out both;
animation: loader 0.5s infinite ease-in-out both;
}
#-webkit-keyframes loader {
0% { background: #ddd; }
33% { background: #ccc; box-shadow: 0 0 1px #ccc, 15px 30px 1px #ccc, -15px 30px 1px #ddd; }
66% { background: #ccc; box-shadow: 0 0 1px #ccc, 15px 30px 1px #ddd, -15px 30px 1px #ccc; }
}
#-moz-keyframes loader {
0% { background: #ddd; }
33% { background: #ccc; box-shadow: 0 0 1px #ccc, 15px 30px 1px #ccc, -15px 30px 1px #ddd; }
66% { background: #ccc; box-shadow: 0 0 1px #ccc, 15px 30px 1px #ddd, -15px 30px 1px #ccc; }
}
#keyframes loader {
0% { background: #ddd; }
33% { background: #ccc; box-shadow: 0 0 1px #ccc, 15px 30px 1px #ccc, -15px 30px 1px #ddd; }
66% { background: #ccc; box-shadow: 0 0 1px #ccc, 15px 30px 1px #ddd, -15px 30px 1px #ccc; }
}
#media screen and (max-width: 830px) {
.og-expander h3 { font-size: 32px; }
.og-expander p { font-size: 13px; }
.og-expander a { font-size: 12px; }
}
#media screen and (max-width: 650px) {
.og-fullimg { display: none; }
.og-details { float: none; width: 100%; }
}
<div class="container">
<!--/ Codrops top bar -->
<header class="clearfix">
<h1>Thumbnail Grid <span>with Expanding Preview</span></h1>
</header>
<div class="main">
<ul id="og-grid" class="og-grid">
<li>
<a href="#" data-largesrc="https://tympanus.net/Tutorials/ThumbnailGridExpandingPreview/images/thumbs/1.jpg" data-title="Azuki bean" data-description="Swiss chard pumpkin bunya nuts maize plantain aubergine napa cabbage soko coriander sweet pepper water spinach winter purslane shallot tigernut lentil beetroot.">
<img src="https://tympanus.net/Tutorials/ThumbnailGridExpandingPreview/images/thumbs/1.jpg" alt="img01"/>
</a>
</li>
<li>
<a href="http://cargocollective.com/jaimemartinez/" data-largesrc="https://tympanus.net/Tutorials/ThumbnailGridExpandingPreview/images/thumbs/2.jpg" data-title="Veggies sunt bona vobis" data-description="Komatsuna prairie turnip wattle seed artichoke mustard horseradish taro rutabaga ricebean carrot black-eyed pea turnip greens beetroot yarrow watercress kombu.">
<img src="https://tympanus.net/Tutorials/ThumbnailGridExpandingPreview/images/thumbs/2.jpg" alt="img02"/>
</a>
</li>
<li>
<a href="http://cargocollective.com/jaimemartinez/" data-largesrc="https://tympanus.net/Tutorials/ThumbnailGridExpandingPreview/images/thumbs/3.jpg" data-title="Dandelion horseradish" data-description="Cabbage bamboo shoot broccoli rabe chickpea chard sea lettuce lettuce ricebean artichoke earthnut pea aubergine okra brussels sprout avocado tomato.">
<img src="https://tympanus.net/Tutorials/ThumbnailGridExpandingPreview/images/thumbs/3.jpg" alt="img03"/>
</a>
</li>
<li>
<a href="http://cargocollective.com/jaimemartinez/" data-largesrc="https://tympanus.net/Tutorials/ThumbnailGridExpandingPreview/images/thumbs/4.jpg" data-title="Sea lettuce" data-description="Bell pepper eggplant water spinach bell pepper radicchio kale artichoke earthnut pea beet greens carrot celtuce peanut radish mustard jícama tomato bamboo shoot quandong.">
<img src="https://tympanus.net/Tutorials/ThumbnailGridExpandingPreview/images/thumbs/4.jpg" alt="img04"/>
</a>
</li>
</ul>
<p>Filler text by Veggie Ipsum</p>
</div>
</div><!-- /container -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="js/grid.js"></script>
<script>
$(function() {
Grid.init();
});
</script>
<script src="//tympanus.net/codrops/adpacks/demoad.js"></script>

Meta Viewport Tag options does not work on iOS

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Fox News</title>
<link rel="icon" href="https://s2.googleusercontent.com/s2/favicons?domain_url=http://foxnews.com" type="image/gif" sizes="16x16">
<style>
body {
margin: auto;
}
.iframe-container {
position: relative;
height: 100%;
}
.iframe-container iframe,
.iframe-container object,
.iframe-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100vh;
margin: 0px;
border: 0;
}
.social-magnet {
position: fixed;
left: 10px;
font-family: 'Source Sans Pro', sans-serif;
}
.clx_iframe {
position: absolute;
display: block;
bottom: 30px;
left: 5%;
width: 100%;
height: 100px;
font-family: sans-serif;
}
.socialbar {
width: 87px;
height: 87px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
border: none;
pointer-events: fill;
box-shadow: none;
z-index: 101;
position: absolute;
top: 35%;
left: 147px;
border-radius: 50% !important;
}
.profilePhoto {
width: 87px;
height: 87px;
border-radius: 50%;
border: 3px dashed lightgray;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
object-fit: contain;
}
.messageContainer {
width: 390px;
height: auto;
line-height: 18px;
padding: 10px 15px 10px 15px;
font-size: 16px;
border: 2px solid white;
border-radius: 5px;
position: absolute;
text-align: center;
color: black;
background-color: white;
text-shadow: none;
pointer-events: fill;
box-shadow: none;
opacity: 1;
z-index: 100;
}
.circle-div {
background: #4C4E60;
height: 20px;
border-radius: 50% !important;
width: 20px;
float: right;
position: relative;
top: -20px;
right: -25px;
color: white;
}
#minimizeToggle {
color: white;
opacity: 0.75;
cursor: pointer;
font-weight: bolder;
font-size: 13px;
text-decoration: none;
}
#logosocial {
float: right;
text-decoration: none;
padding-right: 2.5px;
padding-left: 2.5px;
}
.logoImage {
width: 46px;
height: 20px;
margin-top: -5px;
background-repeat: no-repeat;
background-size: 100%;
opacity: 0.6;
position: relative;
right: -25px;
}
#profileName {
width: 77%;
line-height: 20px;
font-size: 15px;
padding-bottom: 3px;
text-align: left;
color: rgb(34, 34, 34);
display: block;
opacity: 0.6;
overflow: hidden;
white-space: nowrap;
text-decoration: none;
font-weight: bold;
}
#message {
height: 36px;
margin-top: 4px;
display: table;
text-align: left;
overflow: hidden;
width: auto;
letter-spacing: 0.5px;
color: rgb(34, 34, 34);
}
#messageText {
height: auto;
width: 100%;
display: table-cell;
vertical-align: middle;
font-weight: 400;
font-size: 14px;
color: rgb(34, 34, 34);
word-wrap: break-word;
word-break: break-all;
}
#formButton {
float: right;
margin-left: 15px;
cursor: pointer;
color: rgb(255, 255, 255);
background-color: #4C4E60;
width: 90%;
}
.triangle {
box-sizing: border-box;
background: white;
box-shadow: 0px 3px 3px 0 rgba(0, 0, 0, 0.4);
}
.triangle::after {
content: "";
position: absolute;
width: 0;
height: 0;
margin-left: -0.5em;
bottom: -2em;
left: 45%;
box-sizing: border-box;
border: 1em solid black;
border-color: transparent transparent white white;
transform-origin: 0 0;
transform: rotate(-45deg);
box-shadow: -3px 3px 3px 0 rgba(0, 0, 0, 0.4);
}
.buttonCTA {
height: 36px;
width: auto;
display: table-cell;
padding: 0 15px 0 15px;
margin: 0 0 0 15px;
border-radius: 5px;
border: 3px solid #4C4E60;
line-height: 35px;
font-weight: 400 !important;
text-decoration: none;
text-align: center;
}
/* Media Queiries */
#media screen and (max-width: 359px) and (min-width: 320px) {
.messageContainer {
width: 300px;
}
.socialbar {
left: 107px;
}
}
#media screen and (max-width: 374px) and (min-width: 360px) {
.messageContainer {
width: 340px;
}
.socialbar {
left: 125px;
}
}
#media screen and (max-width: 413px) and (min-width: 375px) {
.messageContainer {
width: 355px;
}
.socialbar {
left: 133px;
}
}
</style>
</head>
<body>
<div id="iframeWrapper" class="iframe-container">
<iframe id="website_frame" class="iframe" src="https://foxnews.com" sandbox='allow-forms allow-scripts allow-same-origin' allowfullscreen></iframe>
<div class="social-magnet">
<div class="messageContainer triangle">
<div class="circle-div"><a id="minimizeToggle" href="http://foxnews.com">x</a></div>
<a id="logosocial" href="https://clickx.io?utm_source=http://www.clickx.io&utm_campaign=contact&utm_medium=offerwidget" target="_blank">
<div class="logoImage"></div>
<a id="profileName" href="http://foxnews.com" target="_blank">Kannan Devan</a>
</a>
<span id="message">
<span id="messageText" class="text-left">
Good evening. Spent the Evening with a cup of TEA
</span>
</span>
<a class="buttonCTA" id="formButton" href="http://foxnews.com" target="_blank">
Hello Guys
</a>
</div>
<span class="socialbar">
<a id="imageLink" href="http://foxnews.com" target="_blank">
<img id="image_src" class="profilePhoto" src='https://ffb2efd5105ff0aedbc9-9cdacdeebf0faa19b665bf427f0c8092.ssl.cf1.rackcdn.com/assets/new-creator/plus-icon4.png' alt="Brand Logo">
</a>
</span>
</div>
</div>
<script type="text/javascript" charset="utf-8">
var wrapper = document.getElementsByClassName('social-magnet')[0];
var image_wrapper = document.getElementsByClassName('socialbar')[0];
var height = document.getElementsByClassName('messageContainer')[0].offsetHeight;
wrapper.style.bottom = (height + 132).toString() + 'px';
image_wrapper.style.marginTop = (height + 40).toString() + 'px';
</script>
</body>
</html>
I tried to load a website in a plain HTML page using iFrame.
When opening in desktops, the desktop version of the site is opened.
Also when opening in Android phones, the mobile version is loaded, which is the expected behavior.
But the problem is that, when opening in iPhones, the desktop version of the website is loaded.

Setting the iFrame property scrolling='no' made it look like the mobile version of the website to be loaded correctly on iOS.
var ifrm = document.createElement("iframe");
ifrm.setAttribute("src", "<%= #social_snip.url %>");
ifrm.id = 'ContentFrame';
ifrm.scrolling = 'yes';
if (check) {
document.getElementById('iframeWrapper').className += ' mobile-theme';
}
var IOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
if(IOS) {
ifrm.scrolling = 'no';
}
The above code checks whether the OS is an iOS, if yes it will set the scrolling property of iFrame with a no value.

Keep tooltip within parent container?

I cannot figure out a way to keep the tooltip inside the "main-content" container. Here's the code:
.main-content {
background: #151418;
width: 500px;
min-height: 200px;
}
[data-tooltip] {
display: inline;
position: relative;
cursor: pointer;
}
[data-tooltip]:hover:after {
background: rgba(0, 0, 0, .9);
border-left: 5px solid #000;
border-right: 5px solid #000;
border-radius: 5px;
position: absolute;
bottom: 16px;
left: 0;
content: attr(data-tooltip);
font-family: Consolas, "courier new";
font-size: 12px;
color: #657b99;
padding: 5px 10px;
z-index: 98;
white-space: nowrap;
}
p {
color: white;
margin-left: 50px;
}
<div class="main-content">
<br>
<br>
<p>Hover mouse <span data-tooltip="Here goes a long text that does not stay inside main-content container">HERE</span></p>
</div>
Is there any way to push it back inside?
Or add an max-width to the tooltip somehow? I tried to add max-width, but it didn't work because of [data-tooltip]'s display:inline;.
(I know that replacing "inline" with "block" would solve the problem with max-width, but I can't do that because I need to keep the text inline...)

Don't know how to make it word responsive, don't know if is even possible with only css - tooltips are for short mesages.
But it's a start
.main-content {
background: #151418;
width: 500px;
min-height: 200px;
}
[data-tooltip] {
display: inline;
position: relative;
cursor: pointer;
}
[data-tooltip]:hover:after {
background: rgba(0, 0, 0, .9);
border-left: 5px solid #000;
border-right: 5px solid #000;
border-radius: 5px;
position: absolute;
bottom: 16px;
left: 0;
content: attr(data-tooltip);
font-family: Consolas, "courier new";
font-size: 12px;
color: #657b99;
padding: 5px 10px;
z-index: 98;
/* width: 250px; */
min-width: 200px;
/* max-width: 400px; */
height: 50px;
overflow: auto;
}
p {
color: white;
margin-left: 50px;
}
<div class="main-content">
<br>
<br>
<p>Hover mouse <span data-tooltip="Here goes a long text that does not stay inside main-content container">HERE</span></p>
</div>

On loading web page with Firefox is not displayed as normal

I have to reduce the height webpage,
So that entire page will be exposed except a part of the purple color on the bottom page.
I think that the purple color part of the bottom page is html tag
And he unnecessary.
many thanks.
link:http://www.centerwow.com/window1/window/window.html
css code:
html{
height:0px;
}
body {
//overflow:hidden;
font-family:Palatino Linotype;
background: none repeat scroll 0 0 #6000CC;
font-family: Arial;
font-size: 12px;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
height:600px;
}
.insidWindow {
background: none repeat scroll 0 0 #ffFFFF;
margin: 0px auto 10px auto;
padding: 10px;
position: relative;
top:-515px;
width:52.5%;
}
h2 {
color: #443333;
font-size: 14px;
line-height: 7px;
margin: 0px 5px 0px 5px;
padding: 5px;
color: white;
}
.lineAzure{
background: #0066ff;
line-height: 7px;
margin: 0px 0px 0px 0px;
height:15px;
}
#lineAzurebotom {
background: none repeat scroll 0 0 #880000;
line-height: 11px;
margin: 0;
position: relative;
top: -516px;
}
#leftcolumn_s {
background: none repeat scroll 0 0 #DDFF00;
height: 115px;
margin: 0 auto 0 auto;
padding: 10px;
position: relative;
top: 360px;
width: 88%;
}
#rightcolumn_s{
background: none repeat scroll 0 0 #DDFF00;
height: 115px;
margin: 0 auto 0 auto;
padding: 10px;
position: relative;
top: 360px;
width: 88%;
}
#chatRead {
background: none repeat scroll 0 0 #88FF00;
line-height: 90px;
margin: 0 auto;
position: relative;
top: -520px;
width: 55%;
}
#chatWrite {
background: none repeat scroll 0 0 #88FFFF;
line-height: 25px;
margin: 0 auto;
position: relative;
top: -520px;
width: 55%;
}
#lineYelow{
background: #00FFFF;
border-bottom: 4px solid #00ffff;
line-height: 7px;
margin: 0px 0px 0px 0px;
height:35px
}
#wrapMein{
background: green;
//overflow:hidden;
margin: 0px 5px 20px 5px;
padding: 0px 0px 0px 0px;
position: relative;
height:530px;
}
.column {
background: none repeat scroll 0 0 #DDFFFF;
height: 505px;
margin: 5px;
padding: 0 5px;
position: relative;
top: -15px;
width: 20%;
}
.rcolumn{
background: none repeat scroll 0 0 #ddffff;
margin: 0px 0px 0px 0px;
padding: 10px;
position: relative;
width:20%;
height:495px;
position:relative;
top:-528px;
float:right;
}
.ui-wrapper {
border: 2px solid #70A029;
}
.ui-resizable {
position: relative;
}
.ui-resizable-e {
background: url("../pic/resizable-e.gif") repeat scroll right center transparent;
cursor: e-resize;
height: 100%;
right: 0;
top: 0;
width: 6px;
}
.ui-resizable-handle {
display: none;
font-size: 0.1px;
position: absolute;
}
.ui-resizable-s {
background: url("../pic/resizable-s.gif") repeat scroll center top transparent;
bottom: 0;
cursor: s-resize;
height: 6px;
left: 0;
width: 100%;
}
.ui-resizable-se {
background: url("../pic/resizable-se.gif") repeat scroll 0 0 transparent;
bottom: 0;
cursor: se-resize;
height: 9px;
right: 0;
width: 9px;
}
html code:
<h2>this is body background.</h2>
<div class="lineAzure">this is div class lineAzure </div>
<div id="lineYelow">this is div id YineYelow</div>
<div id="wrapMein">
<div class="lineAzure" style="margin: 0px 22.6% 0px 22.6%;" "width:52.5%" >this div classlineAzurespnbsp;| | | | | |</div>
<div id="leftcolumn" class="column">here is div id = leftcolumn
<div id="leftcolumn_s">here is div id = leftcolumn_s</div>
</div>
<div id="rightcolumn" class="rcolumn">rightcolumn
<div id="rightcolumn_s">here is div id = rightcolumn_s</div>
</div>
<div class="insidWindow">
<div id="windowResize" class="ui-wrapper" style="height: 340px; width: 350px;">
<div style="position: absolute; top: 20px; left: 20px; " >
Resize me<br>
Please try to resizeme:<br> www www www.
</div>
</div><br>
</div><!--insidWindow-->
<div id="chatRead">here is div id = chatread</div>
<div id="chatWrite">here is div id = chatWrite</div>
<div id="lineAzurebotom">here is div id = lineAzurebotom</div>
</div><!--wrapMein-->

If I understand your question correctly, add overflow: hidden; to your #wrapMein id.
The additional height (and purple spacing) is coming from the layout your page content is creating from the negative position: relative inner divs (-520px etc) which is still counted towards your box model values in Firefox.