Develop Reference

div is pushed by another div when toggled

I am having somewhat two navigation bars right here. When I click on the menu-btn, the sidebar will slide in. But somehow the sidebar pushes the menu-bar downwards which I do not understand why. How do I make the sidebar stop pushing the menu-bar. Any tips will be appreciated.
function main(){
$(".menu-bar").hide();
$(".menu-bar").fadeIn(300);
$(".sidebar").hide();
$(".dropdown-content").hide();
$(".menu-btn").on('click',function(){
$(".sidebar").animate({width:'toggle'});
});
$(".close-btn").on('click',function(){
$(".sidebar").animate({width:'toggle'});
});
$(".login").on('click',function(){
$(".dropdown-content").animate({width:'toggle'});
});
}
$(document).ready(main)
.sidebar{
display:none;
width:250px;
background-color:#005777;
z-index:1;
padding-top:60px;
height:100%;
overflow:hidden;
}
.brand{
font-family:ParmaPetit;
font-size:50px;
}
.sidebar a, .login{
text-decoration:none;
padding: 8px 8px 8px 8px;
display:block;
font-size:30px;
text-align:center;
color:white;
}
.close-btn{
position:relative;
font-size:40px;
float:right;
bottom:50px;
right:10px;
color:white;
}
.sidebar a:hover, .login:hover, .close-btn:hover, .menu-btn:hover{
color:#01af55;
cursor:pointer;
transition:0.3s;
}
.dropdown-content{
background-color:#111111;
position:relative;
left:250px;
bottom:29px;
}
.menu-bar{
background-color:#005777;
padding-bottom:10px;
overflow:hidden;
float:top;
}
.menu-btn{
font-size:40px;
cursor:pointer;
color:white;
position:relative;
left:20px;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sidebar" id="sidebar">
<span class="close-btn">×</span>
Airline Intel
Book Flight
Book Hotel
<div class="dropdown">
<span class="login">Sign In ➤</span>
<div class="dropdown-content">
Admin
User
Register
</div>
</div>
</div>
<div class="menu-bar" id="collapse">
<span class="menu-btn">☰</span>
</div>

function main(){
$(".menu-bar").hide();
$(".menu-bar").fadeIn(300);
$(".sidebar").hide();
$(".dropdown-content").hide();
$(".menu-btn").on('click',function(){
$('#collapse').hide();
$(".sidebar").animate({width:'toggle'});
});
$(".close-btn").on('click',function(){
$('#collapse').show();
$(".sidebar").animate({width:'toggle'});
});
$(".login").on('click',function(){
$(".dropdown-content").animate({width:'toggle'});
});
}
$(document).ready(main)
.sidebar{
display:none;
width:250px;
background-color:#005777;
z-index:1;
padding-top:60px;
height:100%;
overflow:hidden;
}
.brand{
font-family:ParmaPetit;
font-size:50px;
}
.sidebar a, .login{
text-decoration:none;
padding: 8px 8px 8px 8px;
display:block;
font-size:30px;
text-align:center;
color:white;
}
.close-btn{
position:relative;
font-size:40px;
float:right;
bottom:50px;
right:10px;
color:white;
}
.sidebar a:hover, .login:hover, .close-btn:hover, .menu-btn:hover{
color:#01af55;
cursor:pointer;
transition:0.3s;
}
.dropdown-content{
background-color:#111111;
position:relative;
left:250px;
bottom:29px;
}
.menu-bar{
background-color:#005777;
padding-bottom:10px;
overflow:hidden;
float:top;
}
.menu-btn{
font-size:40px;
cursor:pointer;
color:white;
position:relative;
left:20px;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sidebar" id="sidebar">
<span class="close-btn">×</span>
Airline Intel
Book Flight
Book Hotel
<div class="dropdown">
<span class="login">Sign In ➤</span>
<div class="dropdown-content">
Admin
User
Register
</div>
</div>
</div>
<div class="menu-bar" id="collapse">
<span class="menu-btn">☰</span>
</div>
you need to hide menu button when you clicked it. and show when you click in close button.

Add a position : absolute; to the sidebar class should do the trick

how to pass the dynamic image url to other function

I am trying to pass the path of image to onclick event. I am taking the image from folder dynamically. Now,I have to pass the path of image. I have tried, but I am not getting expected results. Please give me any advice.
My code:
<div class="col-md-2">
<div class="img-responsive">
<img id="prod" src="<?php echo base_url('uploads/store/'.$data->img);?>" style="height:350px;width:200px;display:none;" alt="Fjords">
</div>
My HTML & JS
<style type="text/css">
.button
{
width: 150px;
padding: 10px;
background-color: #FF8C00;
box-shadow: -8px 8px 10px 3px rgba(0,0,0,0.2);
font-weight:bold;
text-decoration:none;
}
#cover{
position:fixed;
top:0;
left:0;
background:rgba(0,0,0,0.6);
z-index:5;
width:100%;
height:100%;
display:none;
}
#loginScreen
{
height:380px;
width:340px;
margin:0 auto;
position:relative;
z-index:10;
display:none;
background: url(//here i have to pass above mentioned path src of image) no-repeat;
border:5px solid #cccccc;
border-radius:10px;
}
#loginScreen:target, #loginScreen:target + #cover{
display:block;
opacity:2;
}
.cancel
{
display:block;
position:absolute;
top:3px;
right:2px;
background:rgb(245,245,245);
color:black;
height:30px;
width:35px;
font-size:30px;
text-decoration:none;
text-align:center;
font-weight:bold;
}
</style>
</head>
<body>
<div align="center">
<br><br><br><br>
Click here to Log In
</div>
<div id="loginScreen">
×
</div>
<div id="cover" >
</div>
</body>
</html>

How do I add two range sliders and print the value in a text box using Javascript? [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
I have written the code for displaying the range slider values. Now I want to add both the range sliders values and display it in the text box. How do I do it?
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.h
{
position:absolute;
left:50px;
top:100px;
}
.P
{
position:absolute;
left:50px;
top:140px;
}
.i1
{
position:absolute;
left:150px;
width:100px;
height:40px;
top:250px;
}
.i2
{
position:absolute;
left:600px;
width:100px;
height:40px;
top:250px;
}
.i3
{
position:absolute;
right:300px;
width:100px;
height:40px;
top:250px;
}
.P1
{
position:absolute;
left:150px;
top:210px;
font-size:15px;
}
.P2
{
position:absolute;
left:600px;
top:210px;
font-size:15px;
}
.img1
{
position:absolute;
left:380px;
width:90px;
height:60px;
top:245px;
}
.img2
{
position:absolute;
right:480px;
width:90px;
height:60px;
top:240px;
}
.r1
{
position:absolute;
bottom:150px;
left:150px;
width:180px;
height:10px;
-webkit-appearance:none;
border-radius:5px;
background:#d7dcdf;
outline:blue;
padding:0;
margin:0;
cursor:pointer;
}
.r1::-webkit-slider-thumb
{
-webkit-appearance:none;
width:20px;
height:20px;
border:0;
border-radius:50%;
background:lightblue;
cursor:pointer;
}
.r1:hover
{
background:lightblue;
}
.spa
{
position:absolute;
bottom:150px;
left:340px;
display:inline-block;
background:lightblue;
border-radius:3px;
line-height:20px;
text-align:center;
padding: 5px 10px;
margin-left: 8px;
}
.P3
{
position:absolute;
left:90px;
bottom:135px;
}
.P4
{
position:absolute;
left:77px;
bottom:95px;
}
.r2
{
position:absolute;
bottom:110px;
left:150px;
width:180px;
height:10px;
-webkit-appearance:none;
border-radius:5px;
background:#d7dcdf;
outline:blue;
padding:0;
margin:0;
cursor:pointer;
}
.r2::-webkit-slider-thumb
{
-webkit-appearance:none;
width:20px;
height:20px;
border:0;
border-radius:50%;
background:lightblue;
cursor:pointer;
}
.r2:hover
{
background:lightblue;
}
.spa1{
position:absolute;
bottom:110px;
left:340px;
display:inline-block;
background:lightblue;
border-radius:3px;
line-height:20px;
text-align:center;
padding: 5px 10px;
margin-left: 8px;
}
</style>
</head>
<body>
<h4 class="h">Score recommendation </h4>
<p class="P">Based on the inputs given by you, we recommend the following score splits that you should aim for to achieve the desired target score </p>
<p class="P1">Quant Score</p>
<input type="text" id="Q1" class="i1" onclick="ret(this.value);" value="">
<img src="plus.png" alt="plus" class="img1">
<p class="P2"> Verbal Score</p>
<input type="text" id="s2" class="i2">
<img src="equal.jpg" alt="equal" class="img2">
<input type="text" id="s3" class="i3">
<p class="P3">Algebra</p><input type="range" min="20" max="180" value="20" step="1" class="r1" onchange="showValue(this.value);" >
<span id="range" class="spa">20</span>
<p class="P4">Arithmetic</p><input type="range" min="20" max="180" value="20" step="1" class="r2" onchange="showValue1(this.value);" >
<span id="range1" class="spa1">20</span>
<script>
function showValue(newValue){
document.getElementById("range").innerHTML=newValue;
}
function showValue1(newValue1){
document.getElementById("range1").innerHTML=newValue1;
}
function ret(q){
var q1,q2;
q1=document.getElementById("range").value;
q2=document.getElementById("range1").value;
q=q1+q2;
document.getElementById("Q1").innerHTML=q;
}
</script>
</body>
</html>

Try something like this:
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.h
{
position:absolute;
left:50px;
top:100px;
}
.P
{
position:absolute;
left:50px;
top:140px;
}
.i1
{
position:absolute;
left:150px;
width:100px;
height:40px;
top:250px;
}
.i2
{
position:absolute;
left:600px;
width:100px;
height:40px;
top:250px;
}
.i3
{
position:absolute;
right:300px;
width:100px;
height:40px;
top:250px;
}
.P1
{
position:absolute;
left:150px;
top:210px;
font-size:15px;
}
.P2
{
position:absolute;
left:600px;
top:210px;
font-size:15px;
}
.img1
{
position:absolute;
left:380px;
width:90px;
height:60px;
top:245px;
}
.img2
{
position:absolute;
right:480px;
width:90px;
height:60px;
top:240px;
}
.r1
{
position:absolute;
bottom:150px;
left:150px;
width:180px;
height:10px;
-webkit-appearance:none;
border-radius:5px;
background:#d7dcdf;
outline:blue;
padding:0;
margin:0;
cursor:pointer;
}
.r1::-webkit-slider-thumb
{
-webkit-appearance:none;
width:20px;
height:20px;
border:0;
border-radius:50%;
background:lightblue;
cursor:pointer;
}
.r1:hover
{
background:lightblue;
}
.spa
{
position:absolute;
bottom:150px;
left:340px;
display:inline-block;
background:lightblue;
border-radius:3px;
line-height:20px;
text-align:center;
padding: 5px 10px;
margin-left: 8px;
}
.P3
{
position:absolute;
left:90px;
bottom:135px;
}
.P4
{
position:absolute;
left:77px;
bottom:95px;
}
.r2
{
position:absolute;
bottom:110px;
left:150px;
width:180px;
height:10px;
-webkit-appearance:none;
border-radius:5px;
background:#d7dcdf;
outline:blue;
padding:0;
margin:0;
cursor:pointer;
}
.r2::-webkit-slider-thumb
{
-webkit-appearance:none;
width:20px;
height:20px;
border:0;
border-radius:50%;
background:lightblue;
cursor:pointer;
}
.r2:hover
{
background:lightblue;
}
.spa1{
position:absolute;
bottom:110px;
left:340px;
display:inline-block;
background:lightblue;
border-radius:3px;
line-height:20px;
text-align:center;
padding: 5px 10px;
margin-left: 8px;
}
</style>
</head>
<body>
<h4 class="h">Score recommendation </h4>
<p class="P">Based on the inputs given by you, we recommend the following score splits that you should aim for to achieve the desired target score </p>
<p class="P1">Quant Score</p>
<input type="text" id="Q1" class="i1" onclick="ret();" value="">
<img src="plus.png" alt="plus" class="img1">
<p class="P2"> Verbal Score</p>
<input type="text" id="s2" class="i2">
<img src="equal.jpg" alt="equal" class="img2">
<input type="text" id="s3" class="i3">
<p class="P3">Algebra</p><input type="range" min="20" max="180" value="20" step="1" class="r1" onchange="showValue(this.value);" >
<span id="range" class="spa">20</span>
<p class="P4">Arithmetic</p><input type="range" min="20" max="180" value="20" step="1" class="r2" onchange="showValue1(this.value);" >
<span id="range1" class="spa1">20</span>
<script>
function showValue(newValue){
document.getElementById("range").textContent=newValue;
}
function showValue1(newValue1){
document.getElementById("range1").textContent=newValue1;
}
function ret(){
var q1,q2;
q1=+document.getElementById("range").textContent;
q2=+document.getElementById("range1").textContent;
q=q1+q2;
document.getElementById("Q1").value=q;
return q;
}
</script>
</body>
</html>

How to put container div under menu using CSS

I have a problem, how can i make container div to be under menu, when i put container background it go beside a header and menu... Could someone help me to fix my problem?
My HTML and CSS bellow...
<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<title>Рено Клуб Македонија - Добредојдовте</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="web">
<div id="header">
<div class="logo">
<img src="images/logo.png" alt="Logo"/>
</div> <!-- logo end -->
<div class="menu">
<ul>
<li class="active">Почетна</li>
<li>Форум</li>
<li>Клуб</li>
<li>Членство</li>
<li>Галерија</li>
<li>Огласник</li>
<li>Контакт</li>
</ul> <!-- main menu end -->
</div>
</div> <!-- header end -->
<div class="container">
<p id="petrol">Превземено од Макпетрол *цените се изразени во денари / литар </p>
</div>
</div><!-- web end -->
#charset "utf-8";
body {
margin:0;
padding:0;
width:960px;
background:#e2e2e2;
}
a {
text-decoration:none;
color:#ffffff;
text-shadow:1px 1px #000000;
}
a:hover {
text-decoration:none;
color:#a6a5a5;
}
a:active {
text-decoration:none;
color:#ecd302;
}
.web {
width:960px;
margin-left:auto;
margin-right:auto;
}
#header {
background-repeat:no-repeat;
display:block;
margin:auto;
padding:0px;
height:110px;
background:#ecd302;
position:absolute;
top:0;
left:0;
right:0;
}
.logo {
background-repeat:no-repeat;
width:305px;
height:85px;
float:left;
margin:10px 0 0 202px;
}
.menu {
background:#4b4b4b;
text-transform:uppercase;
word-spacing:32px;
font-size:20px;
font-family:Arial, Helvetica, sans-serif;
font-weight:bold;
text-decoration:none;
text-align:center;
border-bottom:1px solid #000;
border-top: 1px solid #000;
display:block;
position:absolute;
top:105px;
left:0;
right:0;
}
ul {
}
li {
display:inline;
}
.container {
background:#929191;
left:0px;
right:0px;
text-align:right;
width: 960px;
font-size:12px;
}
If my question is not understood please contact me... i will give more information.

Note, that using position: absolute stops an element from taking up any space, which is why other elements come to that position. The result is multiple elements being at the same place, which is what you mostly don't want. So only use position: absolute, when really necessary.
I removed position: absolute from #header and .menu. Now you also don't need top, left and right anymore.
You also don't need to define the width of the body, since it is already defined for .web. Additionally, I removed some styles from .logo and #header to get the result shown in the screenshot.
Updated Code:
http://jsfiddle.net/azq50bsd/5/
body {
margin:0;
padding:0;
background:#e2e2e2;
}
a {
text-decoration:none;
color:#ffffff;
text-shadow:1px 1px #000000;
}
a:hover {
text-decoration:none;
color:#a6a5a5;
}
a:active {
text-decoration:none;
color:#ecd302;
}
.web {
width:960px;
margin-left:auto;
margin-right:auto;
}
#header {
background:#ecd302;
}
.logo {
background-repeat:no-repeat;
width:305px;
height:85px;
margin:10px;
}
.menu {
background:#4b4b4b;
text-transform:uppercase;
word-spacing:32px;
font-size:20px;
font-family:Arial, Helvetica, sans-serif;
font-weight:bold;
text-decoration:none;
text-align:center;
border-bottom:1px solid #000;
border-top: 1px solid #000;
display:block;
}
ul {
}
li {
display:inline;
}
.container {
background:#929191;
left:0px;
right:0px;
text-align:right;
width: 960px;
font-size:12px;
}

Scrollbars and Elements - HTML/CSS

I have a little problem.
I tried to create a social-media plattform - everything is well working.
But this is anoying me: I want to create an area, where the post are. If there more then 3 you have to scoll with you mouse. The scrollbars are not in the correct place.
Here the wrong design (But "correct" technic):
Here it is more clearer and simplier to controll.
My Imagination was: The Posts-Area should be scrolled.
My CSS:
* {
box-sizing:border-box;
}
a {
text-decoration:none;
color:#FFF;
}
a:hover {
color:#F5F5F5;
}
body {
margin:0px;
width:100%;
height:100%;
background-color:#99cc99;
font-family:'Open Sans';
overflow-y: scroll;
}
.website {
position:absolute;
left:50%;
margin-left:-540px;
width:1080px;
height:100%;
background-color:#99cc99;
border-collapse: separate;
}
#menu {
position:fixed;
top:0px;
width:1080px;
height:50px;
background-color:#6dbd6c;
}
#partition-horizontal {
height:0px;
background-color:#99cc99;
}
#content {
width:100%;
height:auto;
background-color:transparent;
}
#left-top {
width:330px;
height:50px;
border-bottom:2px solid #437C42;
}
#partition1 {
background-color:#6dbd6c;
width:10px;
height:50px;
border-bottom:2px solid #437C42;
}
#right-top {
width:770px;
border-bottom:2px solid #437C42;
height:50px;
}
#right-top .menu {
position:relative;
float:left;
}
#right-top .menu a {
height:100%;
width:auto;
padding-top:15px;
padding-bottom:15px;
padding-left:15px;
padding-right:15px;
}
#right-top .menu a:hover {
background-color:rgba(0,0,0,0.15);
color:#fff;
}
#right-top .menu a:first-child {
margin-left:-0px;
}
#left-bottom {
clear:both;
width:330px;
height:auto;
background-color:#fff;
}
#right-bottom {
clear:both;
width:770px;
overflow:auto;
}
#partition2 {
background-color:#99cc99;
width:10px;
}
#left-bottom-area {
padding:;
width:100%;
height:851px;
clear:both;
}
#right-bottom-area {
padding:;
width:100%;
min-height:887px;
height:auto;
clear:both;
}
#right-bottom-area #poster {
width:100%;
height:300px;
background-color:#FFF;
border-bottom-right-radius:3px;
border-bottom-left-radius:3px;
margin-bottom:10px;
}
#right-bottom-area #real-content {
width:100%;
height:auto;
background-color:#FFFFFF;
border-top-right-radius:3px;
border-top-left-radius:3px;
color:#111111;
overflow:hidden;
}
#real-content p {
width:100%;
height:200px;
background-color:#FFFFFF;
border-bottom:1px solid #99cc99;
padding:15px;
margin-top:0px;
margin-bottom:0px;
}
#real-content p:hover {
background-color:rgba(0,0,0,0.02);
}
#real-content p:last-child {
border-bottom:none;
}
My HTML/PHP:
<?php
$links = $_SERVER['REQUEST_URI'];
preg_match("/[^\/]+$/", $links, $matches);
$link = $matches[0];
?>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>box6</title>
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="./design.css" />
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="./resources/scripts/js/main.js"></script>
</head>
<body>
<table class="website" cellspacing="0">
<tr id="menu">
<th id="left-top"></th>
<td id="partition1"></td>
<th id="right-top">
<div class="menu">
Home
Friends
Gallery
Settings
</div>
</th>
</tr>
<tr id="partition-horizontal"></tr>
<tr id="content">
<td id="left-bottom">
<div id="left-bottom-area"></div>
</td>
<td id="partition2"></td>
<td id="right-bottom">
<div id="right-bottom-area">
<?php
if($link == "me"){
?>
<div id="poster">
</div>
<div id="real-content" full-site="false">
<?php
//HERE IS THE POSTS-AREA
for ($i = 0; $i < 10; $i++) {
echo "<p>".$i."</p>";
}
?>
</div>
<?php
}else {
?>
<div id="real-content" full-site="true" style="border-radius:0px;">
</div>
<?php
}
?>
</div>
</td>
</tr>
</table>
</body>
</html>

Lots of issues with your code.
I suggest not using tables but divs for your layout. Tables should generally only be used to display tabular data.
Also, there are a lot of issues with your overflows and there shouldn't be any absolute positionning.
Finally, I recommend you use the CSS calc() function for your widths and heights. It's supported by IE9.
height: calc(100% - 30px);
Here's kinda how I would do it (might need some additional modifications):
http://codepen.io/jlowcs/pen/dPKKdB
HTML:
<div class="website" cellspacing="0">
<div id="menu">
<div id="left-top"></div
><div id="partition1"></div
><div id="right-top">
<div class="menu">
Home
Friends
Gallery
Settings
</div>
</div>
</div>
<div id="partition-horizontal"></div>
<div id="content">
<div id="left-bottom">
<div id="left-bottom-area"></div>
</div
><div id="partition2"></div
><div id="right-bottom">
<div id="right-bottom-area">
<div id="poster">
</div>
<div id="real-content" full-site="false">
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
</div>
</div>
</div>
</div>
</div>
CSS:
html, body {
height: 100%;
}
* {
box-sizing:border-box;
}
a {
text-decoration:none;
color:#FFF;
}
a:hover {
color:#F5F5F5;
}
body {
margin:0px;
width:100%;
height:100%;
background-color:#99cc99;
font-family:'Open Sans';
}
.website {
margin: auto;
width:1080px;
height:100%;
background-color:#99cc99;
border-collapse: separate;
}
#menu {
width:1080px;
height:50px;
background-color:#6dbd6c;
}
#menu > * {
display: inline-block;
}
#partition-horizontal {
height:0px;
background-color:#99cc99;
}
#content {
overflow: hidden; /* FIXED */
height: calc(100% - 50px); /* FIXED */
width: 100%;
background-color:transparent;
}
#left-top {
width:330px;
height:50px;
border-bottom:2px solid #437C42;
}
#partition1 {
background-color:#6dbd6c;
width:10px;
height:50px;
border-bottom:2px solid #437C42;
}
#right-top {
width: calc(100% - 330px - 10px);
border-bottom:2px solid #437C42;
height:50px;
}
#right-top .menu {
height:100%;
position:relative;
float:left;
}
#right-top .menu a {
line-height: 48px;
padding-left:15px;
padding-right:15px;
}
#right-top .menu a:hover {
background-color:rgba(0,0,0,0.15);
color:#fff;
}
#right-top .menu a:first-child {
margin-left:-0px;
}
#content > * {
display: inline-block;
vertical-align: top;
}
#left-bottom {
width: 330px;
height: 100%;
background-color: #fff;
}
#partition2 {
background-color: #99cc99;
width: 10px;
height: 100%;
}
#left-bottom-area {
overflow: auto;
width:100%;
}
#right-bottom {
width: calc(100% - 330px - 10px);
height: 100%;
}
#right-bottom-area {
height: 100%;
}
#right-bottom-area #poster {
height:300px;
background-color:#FFF;
border-bottom-right-radius:3px;
border-bottom-left-radius:3px;
margin-bottom:10px;
}
#right-bottom-area #real-content {
width: 100%;
height: calc(100% - 300px - 10px);
background-color:#FFFFFF;
border-top-right-radius:3px;
border-top-left-radius:3px;
color:#111111;
overflow:auto; /* FIXED */
}
#real-content p {
width:100%;
height:200px;
background-color:#FFFFFF;
border-bottom:1px solid #99cc99;
padding:15px;
margin-top:0px;
margin-bottom:0px;
}
#real-content p:hover {
background-color:rgba(0,0,0,0.02);
}
#real-content p:last-child {
border-bottom:none;
}