Box shadow not working properly - html

Although I have ask the same question two times but I'm not getting any proper solution for this.I dont know what is wrong with my code. so here I'm posting the whole code (I know its against the community standard but seriously I want a solution for my problem and I request you guys to have a look at this and please keep patience) I'm new to web development field, please help me.
My problem is that I need to apply box shadow to #main-content-area to its top side and as well as left and right side (50% from top side)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#top-bar{
background-color:black;
color:white;
}
#txt-bar{
height:40px;
background-color:pink;
position:relative;
z-index:4;
}
#link-bar{
background-color:red;
height:40px;
z-index:4;
}
#image{
position:relative;
z-index:3;
}
.wrapper{
position:relative;
height: 100%;
width:100%;
}
#main-content-area{
position:relative;
background-color:white;
margin: -80px auto auto auto;
z-index:4;
border:1px solid red;
}
.halfshadow{
z-index:-1;
top: 0;
width: 100%;
height: 50%;
box-shadow: 1000px 0px 10px rgba(0, 0, 0, 0.5);
}
#footer{
background-color:green;
position:relative;
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="row" id="top-bar">
<div class="col-sm-4">
</div>
<div class="col-sm-4">
</div>
<div class="col-sm-4" >
<h4> Some links </h4>
</div>
</div>
<div class="row">
<div class="col-sm-2">
</div>
<div class="col-sm-4" id="txt-bar"><h1 >Greetings</h1>
</div>
<div class="col-sm-4" id="link-bar">
</div>
<div class="col-sm-2">
</div>
</div>
<div class="row">
<div class="col-sm-12" id="image">
<img src="header.png" class="img-responsive"/>
</div>
</div>
<div class="wrapper">
<div class="line"></div>
<div class="row" >
<div class="col-sm-2">
</div>
<div class="col-sm-8" id="main-content-area">
<div class="col-sm-12" style="background-color:green">
<h3>Welcome </h3>
</div>
<div class="row">
<div class="col-sm-4">
<img src="me.jpg" class="img-responsive"/>
</div>
<div class="col-sm-4">
<img src="me.jpg" class="img-responsive"/>
</div>
<div class="col-sm-4">
<img src="me.jpg" class="img-responsive"/>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<img src="me.jpg" class="img-responsive"/>
</div>
<div class="col-sm-4">
<img src="me.jpg" class="img-responsive"/>
</div>
<div class="col-sm-4">
<img src="me.jpg" class="img-responsive"/>
</div>
</div>
</div>
<div class="halfshadow"></div>
<div class="col-sm-2" >
</div>
</div>
</div>
<div class="row" id="footer">
<div class="col-sm-12">
<div class="col-sm-6">
<h4>some text........</h4>
</div>
<div class="col-sm-6">
< h4>some link </h4>
</div>
</div>
</div>
</div>
</body>
</html>


It won't show. Because box shadow to the div element was empty. I just add some text and margin-top
#top-bar{
background-color:black;
color:white;
}
#txt-bar{
height:40px;
background-color:pink;
position:relative;
z-index:4;
}
#link-bar{
background-color:red;
height:40px;
z-index:4;
}
#image{
position:relative;
z-index:3;
}
.wrapper{
position:relative;
height: 100%;
width:100%;
}
#main-content-area{
position:relative;
background-color:white;
margin: -80px auto auto auto;
z-index:4;
border:1px solid red;
}
.halfshadow{
margin-top:20px;
z-index:-1;
top: 0;
width: 100%;
height: 50%;
box-shadow: 10px 0px 10px rgba(150, 0, 0, 0.5);
}
#footer{
background-color:green;
position:relative;
}
<div class="container-fluid">
<div class="row" id="top-bar">
<div class="col-sm-4">
</div>
<div class="col-sm-4">
</div>
<div class="col-sm-4" >
<h4> Some links </h4>
</div>
</div>
<div class="row">
<div class="col-sm-2">
</div>
<div class="col-sm-4" id="txt-bar"><h1 >Greetings</h1>
</div>
<div class="col-sm-4" id="link-bar">
</div>
<div class="col-sm-2">
</div>
</div>
<div class="row">
<div class="col-sm-12" id="image">
<img src="header.png" class="img-responsive"/>
</div>
</div>
<div class="wrapper">
<div class="line"></div>
<div class="row" >
<div class="col-sm-2">
</div>
<div class="col-sm-8" id="main-content-area">
<div class="col-sm-12" style="background-color:green">
<h3>Welcome </h3>
</div>
<div class="row">
<div class="col-sm-4">
<img src="me.jpg" class="img-responsive"/>
</div>
<div class="col-sm-4">
<img src="me.jpg" class="img-responsive"/>
</div>
<div class="col-sm-4">
<img src="me.jpg" class="img-responsive"/>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<img src="me.jpg" class="img-responsive"/>
</div>
<div class="col-sm-4">
<img src="me.jpg" class="img-responsive"/>
</div>
<div class="col-sm-4">
<img src="me.jpg" class="img-responsive"/>
</div>
</div>
</div>
<div class="halfshadow">Shadow content</div>
<div class="col-sm-2" >
</div>
</div>
</div>
<div class="row" id="footer">
<div class="col-sm-12">
<div class="col-sm-6">
<h4>some text........</h4>
</div>
<div class="col-sm-6">
< h4>some link </h4>
</div>
</div>
</div>
</div>


#main-content-area{
box-shadow: 12px 0 15px -4px rgba(31, 73, 125, 0.8), -12px 0 8px -4px rgba(31, 73, 125, 0.8);
width: 100px;
height: 100px;
margin: 50px;
background: white;
}
or you can go for it also
#main-content-area
{
width: 300px;
height: 100px;
background-color: yellow;
box-shadow: 15px 1px 5px #888888;
}


Explain box shadow for every thing here in my example the values are:
Horizontal Length:1px
Vertical Length:4px
Blur Radius:16px
Spread Radius:15px
The CSS:
box-shadow: 1px 4px 16px 15px rgba(82,43,136,1);


If you want to apply the box-shadow property to your #main-content-area div, you have to basically... add this property into #main-content-area div in your css file.
It will apply the shadow effect on left, right and bottom side:
box-shadow: 0 10px 10px 10px rgba(0, 0, 230, 0.5);
If you want the shadow to appear only on bottom and right side, use:
box-shadow: 10px 10px 10px rgba(0, 0, 230, 0.5);
Codepen: http://codepen.io/anon/pen/VmoNWJ


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#top-bar{
background-color:black;
color:white;
}
#txt-bar{
height:40px;
background-color:pink;
position:relative;
z-index:4;
}
#link-bar{
background-color:red;
height:40px;
z-index:4;
}
#image{
position:relative;
z-index:3;
}
.wrapper{
position:relative;
height: 100%;
width:100%;
}
#main-content-area{
position:relative;
background-color:white;
margin: -80px auto auto auto;
z-index:4;
border:1px solid red;
box-shadow : -10px 0px 10px 0px rgba(0,0,0,0.5),10px 0px 10px 0px rgba(0,0,0,0.5),0px -10px 10px 0px rgba(0,0,0,0.5);
}
.halfshadow{
z-index:-1;
top: 0;
width: 100%;
height: 50%;
box-shadow: 1000px 0px 10px rgba(0, 0, 0, 0.5);
}
#footer{
background-color:green;
position:relative;
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="row" id="top-bar">
<div class="col-sm-4">
</div>
<div class="col-sm-4">
</div>
<div class="col-sm-4" >
<h4> Some links </h4>
</div>
</div>
<div class="row">
<div class="col-sm-2">
</div>
<div class="col-sm-4" id="txt-bar"><h1 >Greetings</h1>
</div>
<div class="col-sm-4" id="link-bar">
</div>
<div class="col-sm-2">
</div>
</div>
<div class="row">
<div class="col-sm-12" id="image">
<img src="header.png" class="img-responsive"/>
</div>
</div>
<div class="wrapper">
<div class="line"></div>
<div class="row" >
<div class="col-sm-2">
</div>
<div class="col-sm-8" id="main-content-area">
<div class="col-sm-12" style="background-color:green">
<h3>Welcome </h3>
</div>
<div class="row">
<div class="col-sm-4">
<img src="me.jpg" class="img-responsive"/>
</div>
<div class="col-sm-4">
<img src="me.jpg" class="img-responsive"/>
</div>
<div class="col-sm-4">
<img src="me.jpg" class="img-responsive"/>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<img src="me.jpg" class="img-responsive"/>
</div>
<div class="col-sm-4">
<img src="me.jpg" class="img-responsive"/>
</div>
<div class="col-sm-4">
<img src="me.jpg" class="img-responsive"/>
</div>
</div>
</div>
<div class="halfshadow"></div>
<div class="col-sm-2" >
</div>
</div>
</div>
<div class="row" id="footer">
<div class="col-sm-12">
<div class="col-sm-6">
<h4>some text........</h4>
</div>
<div class="col-sm-6">
< h4>some link </h4>
</div>
</div>
</div>
</div>
</body>
</html>

Related

Sets divs one into another without falling out each other

I want to center my divs like in the picture below.
The container is half of the screen.
<div id="continer" style="width:50%; height:50%; display:inline-block; ">
<div id="group" style=" width:100%; height:30%; display:inline-block; ">
<div id="right" style="display: table-cell;"></div>
<div id="left" style="display: table-cell;"></div>
</div>
<div id="group" style=" width:100%; height:30%; display:inline-block; ">
<div id="right" style="display: table-cell;"></div>
<div id="left" style="display: table-cell;"></div>
</div>
<div id="group" style=" width:100%; height:30%; display:inline-block; ">
<div id="right" style="display: table-cell;"></div>
<div id="left" style="display: table-cell;"></div>
</div>
</div>

You could do this like that:
.main{
background-color:red;
padding:10px;
display:flex;
flex-direction:column;
}
.sub{
background-color:green;
padding:10px;
display:flex;
flex-direction:row;
justify-content:space-around;
margin:10px 0;
}
.inner{
background-color:yellow;
padding:10px;
margin:10px;
}
.inner:nth-child(1){
flex-grow:1;
}
.inner:nth-child(2){
flex-grow:3;
}
<div class="main">
<div class="sub">
<div class="inner">
</div>
<div class="inner">
</div>
</div>
<div class="sub">
<div class="inner">
</div>
<div class="inner">
</div>
</div>
<div class="sub">
<div class="inner">
</div>
<div class="inner">
</div>
</div>
</div>

Using bootstrap it's very simple, check this script. It will be also responsive:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<html>
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
<body>
<div class="container" style="padding-top:50px;">
<h4>
bootstrap grid view/ column example
</h4>
<div class="row" style="border: 1px solid black; padding:10px;">
<div class="col-lg-4 col-md-4 col-sm-4" style="border: 1px solid black;">
this column is 4/12 wide
</div>
<div class="col-lg-1 col-md-1 col-sm-1">
</div>
<div class="col-lg-7 col-md-7 col-sm-7" style="border: 1px solid red;">
this column is 7/12 wide
</div>
</div>
<div class="row" style="border: 1px solid black; padding:10px;">
<div class="col-lg-4 col-md-4 col-sm-4" style="border: 1px solid black;">
this column is 4/12 wide
</div>
<div class="col-lg-1 col-md-1 col-sm-1">
</div>
<div class="col-lg-7 col-md-7 col-sm-7" style="border: 1px solid red;">
this column is 7/12 wide
</div>
</div>
<div class="row" style="border: 1px solid black; padding:10px;">
<div class="col-lg-4 col-md-4 col-sm-4" style="border: 1px solid black;">
this column is 4/12 wide
</div>
<div class="col-lg-1 col-md-1 col-sm-1">
</div>
<div class="col-lg-7 col-md-7 col-sm-7" style="border: 1px solid red;">
this column is 7/12 wide
</div>
</div>
</div>
</body>
</html>

Here an example similar to your code:
div
{
border: 1px solid black;
padding: 5px;
border-spacing: 5px;
}
<div style="width:50%;display:table">
<div style="display:table-row">
<div style="width:30%; display: table-cell;"></div>
<div style="display: table-cell;"></div>
</div>
<div style="display:table-row">
<div style="display: table-cell;"></div>
<div style="display: table-cell;"></div>
</div>
<div style="display:table-row">
<div style="display: table-cell;"></div>
<div style="display: table-cell;"></div>
</div>
</div>

Informing div to look like boxes without distrubing Grids

Greetings i am kinda new to boostrap, Anyhow, I am trying to Create is, Boxes to look like this (right side):
And so far i got nothing. i used padding but it mess up my grid system, what i did was give a col-sm-8 for picture side and a col-sm-4 for boxes however it is where it gets tricky it always mess my grid system. this is my html. could you help me out a little bit?
<div class="container">
<div class="row">
<div class="col-sm-8">
<img src="xxxx" />
</div>
<div class="col-sm-4">
<div class="col-sm-6">
<div style="background-color: grey; padding: 25px; text-align: center; vertical-align: middle">
Oven
</div>
</div>
<div class="col-sm-6">
<div style="background-color: grey; padding: 25px; text-align: center; vertical-align: middle">
Cookers
</div>
</div>
<div class="col-sm-6">
<div style="background-color: grey; padding: 25px; text-align: center; vertical-align: middle">
Microwave Ovens
</div>
</div>
<div class="col-sm-6">
<div style="background-color: grey; padding: 25px; text-align: center; vertical-align: middle">
Steamers
</div>
</div>
<div class="col-sm-6">
<div style="background-color: grey; padding: 25px; text-align: center; vertical-align: middle">
Cooker hoods
</div>
</div>
<div class="col-sm-6">
<div style="background-color: grey; padding: 25px; text-align: center; vertical-align: middle">
Hobs
</div>
</div>
</div>
</div>
</div>

You are missing a row class, it's mandatory for nested rows/columns, so you can do this (go full page to see the result as you want) :
.box {
background-color: grey;
padding: 25px;
text-align: center;
vertical-align: middle;
margin: 10px;
}
img {
max-width: 100%;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<div class="container">
<div class="row">
<div class="col-sm-8">
<img src="https://lorempixel.com/800/400/" />
</div>
<div class="col-sm-4">
<div class="row">
<div class="col-sm-6">
<div class="box">
Oven
</div>
</div>
<div class="col-sm-6">
<div class="box">
Cookers
</div>
</div>
<div class="col-sm-6">
<div class="box">
Microwave
</div>
</div>
<div class="col-sm-6">
<div class="box">
Steamers
</div>
</div>
<div class="col-sm-6">
<div class="box">
Cooker hoods
</div>
</div>
<div class="col-sm-6">
<div class="box">
Hobs
</div>
</div>
</div>
</div>
</div>
</div>
You can read more about grid nesting

Border Not Resizing With Image

I'm trying to fit a border around a resized image but it takes the dimensions of the original. How do I place a perfect border around an image?
HTML:
<div id="show">
<h1>Featured Items</h1>
<div class="row">
<div class="col-md-4" align="center">
<img src="C:\Users\Gabriel\Downloads\1.png">
</div>
<div class="col-md-4" align="center">
<img src="C:\Users\Gabriel\Downloads\1.png">
</div>
<div class="col-md-4" align="center">
<img src="C:\Users\Gabriel\Downloads\1.png">
</div>
</div>
</div>
CSS:
#show img {
padding-top: 50px;
max-width: 50%;
max-height: 50%;
border: solid 1px #6E4E34;
}

Remove the padding-top and the border will be flush with the img
#show img {
max-width: 50%;
max-height: 50%;
border: solid 1px #6E4E34;
}
<div id="show">
<h1>Featured Items</h1>
<div class="row">
<div class="col-md-4" align="center">
<img src="http://kenwheeler.github.io/slick/img/fonz1.png">
</div>
<div class="col-md-4" align="center">
<img src="http://kenwheeler.github.io/slick/img/fonz1.png">
</div>
<div class="col-md-4" align="center">
<img src="http://kenwheeler.github.io/slick/img/fonz1.png">
</div>
</div>
</div>

How to create a template with CSS?

Im trying to create a template like this one:
But im not sure if I have to created with css, bootstrap or both.
This is what I have
HTML:
<div class="square">
<div class="col-md-12">
<div class="col-md-2">
<img src="../Images/logo.png" class="text-left" style="width:120px;"/>
</div>
<div class="col-md-5 text-center">
<h4>Alert PLC</h4>
</div>
<div class="col-md-5 text-center">
<h4>No. Alert: 44445543</h4>
</div>
<div class="col-md-10">
<hr class="line" />
</div>
</div>
CSS
body {
background-color: #aeaeae;
}
.square {
padding-top: 10px;
padding-left: 10px;
padding-right: 10px;
padding-bottom: 10px;
}
.line {
height: 4px;
color: #000000;
border-radius: 2px;
background-color: #000000;
}

Here is JSfiddle demo
Hope it will help you.I made several changes in html.
HTML:
<body>
<div class="square">
<div class="row">
<div class="col-md-4">
<img src="https://image.freepik.com/free-vector/retro-retro-hipster-bicycle-design_23-2147491723.jpg" class="pull-left" style="width:120px;"/>
</div>
<div class="col-md-4 text-center">
<h4>Alert PLC</h4>
</div>
<hr class="line" />
<div class="col-md-4 text-center">
<h4>No. Alert: 44445543</h4>
</div>
</div>
</div>
</body>

Creating top div adds space at bottom why?

I had issue with unwanted white space and now have figured that out, but now I am having issues with browser resizing. How do I keep the two scrolling divs adjust with height and width. I want the div on the left to automatically adjust in height while the div on the right automatically adjusts in height and width whatever the size of the browser is. Thank you for your help.
I am trying to make it easier and display it in JSfiddle but it doesn't seem to display correctly.
Here is the code:
<html>
<body>
<div class="mainContain">
<div class = "main">
sdfsdf
</div>
<div id="container">
<div class="topmenu">
<div class="leftmenu">
button
</div>
<div class="rightmenu">
button
</div>
</div>
<div class="filter">
</div>
<div class="left">
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
</div>
</div>
<div class="containerRight">
A
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
</div>
</div>
</body>
</html>
<style>
html, body{
min-height:100%;
margin:0;
padding:0;
}
#container {
float:left;
margin: 0;
padding: 0;
height: 90%;
width: 300px;
border:solid #000 1px;
display: inline-block;
}
.left {
padding:0;
overflow-y: scroll;
overflow-x:hidden;
height:100%;
/*-webkit-overflow-scrolling: touch;*/
}
.containerRight {
float:left;
margin: 0;
padding: 0;
height: 90%;
width:76%;
display: inline;
border:solid #000 1px;
overflow: scroll;
overflow-x:hidden;
}
.main {
height:50px;
width: 100%;
border: solid 1px black;
}
.right {
padding:0;
overflow: scroll;
overflow-x:hidden;
height:100%;
width:100%;
/*-webkit-overflow-scrolling: touch;*/
}
.post {
width: 290px;
height: 100px;
display: inline-block;
}
.topmenu {
height: 26px;
width:300px;
border: solid 1px #000000;
}
.leftmenu {
float:left;
width: 147px;
height: 25px;
border: solid 1px black;
}
.rightmenu {
float:right;
width: 147px;
height: 25px;
border: solid 1px black;
}
.filter {
margin-top 250px;
width:300px;
height:30px;
border: solid 1px black;
}
.mainContain {
height:100%;
width:100%;
}
</style>

i had modified your code
the two files are index.html and style.css
index.html
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<body>
<div class="mainContain">
<div class = "main">
sdfsdf
</div>
<div id="container">
<div class="topmenu">
<div class="leftmenu">
button1
</div>
<div class="rightmenu">
button2
</div>
</div>
<div class="left">
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
</div>
</div>
<div class="containerRight">
A
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
</div>
</div>
</body>
</html>
style.css
html, body{
min-height:100%;
margin:0;
padding:0;
}
#container {
float:left;
margin: 0;
padding: 0;
height: 90%;
width: 300px;
border:solid #000 1px;
display: inline-block;
}
.left {
padding:0;
overflow-y: scroll;
overflow-x:hidden;
height:90%;
/*-webkit-overflow-scrolling: touch;*/
}
.containerRight {
float:left;
margin: 0;
padding: 0;
height: 90%;
width:76%;
display: inline;
border:solid #000 1px;
overflow: scroll;
overflow-x:hidden;
}
.main {
height:50px;
width: 100%;
border: solid 1px black;
}
.right {
padding:0;
overflow: scroll;
overflow-x:hidden;
height:100%;
width:100%;
/*-webkit-overflow-scrolling: touch;*/
}
.post {
width: 290px;
height: 100px;
display: inline-block;
}
.topmenu {
height: 10%;
width:300px;
border: solid 1px #000000;
}
.leftmenu {
float:left;
width: 147px;
height: 25px;
border: solid 1px black;
}
.rightmenu {
float:right;
width: 147px;
height: 25px;
border: solid 1px black;
}
.filter {
margin-top 250px;
width:300px;
height:30px;
border: solid 1px black;
}
.mainContain {
height:100%;
width:100%;
}
i think it is your answer if you want to ask anything else then you know what to do ,
and if this is your answer then mark it as answered, so that it no longer reamain in the catagory of unanswered.

i had seen your code , i'd ran it on my browser as it displays under my Mozilla , the fault is not in styling the fault is the placement of your button your button are in the 'id=container' tag which take space from 'id=left' tag hence it is came out due to its data, if you remove :
<div class="topmenu">
<div class="leftmenu">
button
</div>
<div class="rightmenu">
button
</div>
</div>
<div class="filter">
</div>
this section from your code you will see the difference.