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;
}
Related
I have styled a file selector but the problem is it exceeds its max-width from the parent container
Everything works fine here but run this code on browser you'll see that the input type file will exceed its limit
I have also attached my code
.inputcontainer
{
width:500px;
margin:0 auto;
padding:0;
}
.filess
{
text-align:center;
width:200px;
margin:auto;
border:none;
position:relative;
}
.filess .file_upload
{
max-width:150px;
width:100%;
height:35px;
padding-top:6px;
background:#f55282;
color:#fff;
display:inline-block;
margin:0 auto 20px;
cursor:pointer;
font-size:19px;
}
.filess .file_upload input[type="file"]
{
position:absolute;
height:100%;
width:100%;
opacity:0;
top:0;
left:0;
cursor:pointer;
}
.filess span
{
float:left;
text-align:center;
margin:auto;
display:inline-block;
}
.filess span.delt_head
{
float:right;
cursor:pointer;
}
<div class="inputcontainer">
<div class="filess">
<span class="delt_head"><i>Delete</i></span>
<span class="file_upload"><input type="file" /> Choose a file</span>
</div>
</div>
Any help will be appreciated
There might be a problem with overflow try overflow:hidden for the file element.
so that it will wrap around its parent container.
.inputcontainer
{
width:500px;
margin:0 auto;
padding:0;
}
.filess
{
text-align:center;
width:200px;
margin:auto;
border:none;
position:relative;
}
.filess .file_upload
{
max-width:150px;
width:100%;
height:35px;
padding-top:6px;
background:#f55282;
color:#fff;
display:inline-block;
margin:0 auto 20px;
cursor:pointer;
font-size:19px;
}
.filess .file_upload input[type="file"]
{
position:absolute;
height:100%;
width:100%;
opacity:0;
top:0;
left:0;
cursor:pointer;
overflow:hidden;
}
.filess span
{
float:left;
text-align:center;
margin:auto;
display:inline-block;
}
.filess span.delt_head
{
float:right;
cursor:pointer;
}
<div class="inputcontainer">
<div class="filess">
<span class="delt_head"><i>Delete</i></span>
<span class="file_upload"><input type="file" /> Choose a file</span>
</div>
</div>
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
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>
When I open the site on a mobile then last tab merge with others tabs, and last tab will have a linebreak.
But I am not expert in media Query in CSS3. How do I apply this code, if there is some other way then mine give your best solution regarding my issue.
I don't want to use Bootstrap because my website consists of custom designing in html and css.
document.getElementById('content_4').style.display = 'none';
function tabSwitch(new_tab, new_content) {
document.getElementById('content_1').style.display = 'none';
document.getElementById('content_2').style.display = 'none';
document.getElementById('content_3').style.display = 'none';
document.getElementById('content_4').style.display = 'none';
document.getElementById(new_content).style.display = 'block';
document.getElementById('tab_1').className = '';
document.getElementById('tab_2').className = '';
document.getElementById('tab_3').className = '';
document.getElementById('tab_4').className = '';
document.getElementById(new_tab).className = 'activy';
}
function tabSwitch_2(activy, number, tab_prefix, content_prefix) {
for (var i=1; i < number+1; i++) {
document.getElementById(content_prefix+i).style.display = 'none';
document.getElementById(tab_prefix+i).className = '';
}
document.getElementById(content_prefix+activy).style.display = 'block';
document.getElementById(tab_prefix+activy).className = 'activy';
}
#tabbed_box {
margin: 0px auto 0px auto;
width:300px;
}
.tabbed_box h4 {
font-family:Arial, Helvetica, sans-serif;
font-size:23px;
color:#ffffff;
letter-spacing:-1px;
margin-bottom:10px;
}
.tabbed_box h4 small {
color:#e3e9ec;
font-weight:normal;
font-size:9px;
font-family:Verdana, Arial, Helvetica, sans-serif;
text-transform:uppercase;
position:relative;
top:-4px;
left:6px;
letter-spacing:0px;
}
ul.tabs {
margin:0px; padding:0px;
text-align: center;
}
ul.tabs li {
list-style:none;
display:inline;
}
ul.tabs li a {
background-color:#F7F7F7;
color:black;
padding:8px 14px 8px 14px;
text-decoration:none;
font-size:13px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-weight:bold;
text-transform:uppercase;
border:1px solid #F4FBFF;
border-radius: 2px;
-webkit-box-shadow: 1px 1px 1px 2px #ccc; /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
-moz-box-shadow: 1px 1px 2px 1px #ccc; /* Firefox 3.5 - 3.6 */
box-shadow: 1px 1px 2px 1px #ccc; /* Opera 10.5, IE 9, Firefox 4+, Chrome 6+, iOS 5 */
}
ul.tabs li a:hover {
background-color:#3498DB;
color:#fff;
border-color:#3498DB;
-webkit-box-shadow: 0 8px 6px -6px black;
-moz-box-shadow: 0 8px 6px -6px black;
box-shadow: 0 8px 6px -6px black;
}
ul.tabs li a.activy {
background-color:#3498DB;
color:#fff;
border:1px solid #3498DB;
}
.content {
background-color:#fff;
padding:10px;
}
#content_2, #content_3 { display:none; }
ul.tabs {
margin:0px; padding:0px;
margin-top:5px;
margin-bottom:6px;
}
.content ul {
margin:0px;
padding:0px 20px 0px 20px;
}
.content ul li {
list-style:none;
padding-top:15px;
padding-bottom:15px;
font-size:13px;
}
.content ul li a {
text-decoration:none;
color:#3e4346;
}
.content ul li a small {
color:#8b959c;
font-size:9px;
text-transform:uppercase;
font-family:Verdana, Arial, Helvetica, sans-serif;
position:relative;
left:4px;
top:0px;
}
.content ul li:last-child {
border-bottom:none;
}
ul.tabs li a {
background-image:url(images/tab_off.jpg);
background-repeat:repeat-x;
background-position:bottom;
}
<div id="tabbed_box_1" class="tabbed_box">
<div class="tabbed_area">
<br>
<ul class="tabs">
<li>Text</li>
<li>Email</li>
<li>Facebook</li>
<li>Social Media</li>
</ul>
<div id="content_1" class="content">
<img src="http://www.reputationbeast.com/wp-content/uploads/2015/05/Image-0011.png"/ style="float:left; width:320px; height:250px; ">
<p style="float:left; text-align:center; font-style:italic; padding-top:80px; padding-left:30px; font-size:20px;"><b>"Nothing delivers<br/> your message <br/> like a text message."</b></p>
</div>
<div id="content_2" class="content greybg">
<img src="http://www.reputationbeast.com/wp-content/uploads/2015/05/Image-002.png"/ style="float:left; margin-right:30px; width:250px; height:180px; margin-top:30px; margin-bottom:40px;">
<p style="float:left; text-align:center; font-style:italic;">
<p style="margin-left:20px; font-size:20px; font-weight:bold;color:#2072bf; margin-top:30px;"><i>How effective is email?</i></p>
<p style="font-style:italic;font-weight:bold;">Spam filters and an overwhelmed inbox means only 1 out of 5 emails are opened. And, of those only 1 out of 7 generates a response. </p>
</p>
</div>
<div id="content_3" class="content">
<img src="http://www.reputationbeast.com/wp-content/uploads/2015/05/Image-003.png"/ style="float:left; margin-right:30px; width:260px; height:220px; margin-bottom:30px;">
<p style="float:left; text-align:center; font-style:italic; padding-left:5px;">
<p style="margin-left:20px; font-size:20px; font-weight:bold;color:#2072bf; margin-top:30px;" ><i>How about Facebook?</i></p>
<p style="margin-left:20px;font-style:italic;font-weight:bold;">Facebook lost its immediacy years ago. Organic reach has dropped to less than 2% which means you have to pay-to-play to reach more fans and at Facebook's pace.</p>
</p>
</div>
<div id="content_4" class="content">
<img src="http://www.reputationbeast.com/wp-content/uploads/2015/05/Image-004.png"/ style="float:left; margin-right:70px;width:220px; height:180px; margin-top:30px; margin-bottom:40px;">
<p style="float:left; text-align:center; font-style:italic; padding-left:8px;">
<p style="margin-left:20px; font-size:20px; font-weight:bold;color:#2072bf; margin-top:30px;" ><i>...and other Social Media?</i></p>
<p style="margin-left:20px;font-style:italic;font-weight:bold;">Twitter, Google+, Instagram, Pinterest, and every other Social Media site controls access to your fans, most offer a pay option. The best option - your own Text lists.</p>
</p>
</div>
</div>
</div>
Add display: inline-block; for ul.tabs li a this will help
See fiddle : http://jsfiddle.net/sachinkk/1b2m3rsq/
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;
}