Creating top div adds space at bottom why? - html

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.

Related

Where are the divs in html? [duplicate]

This question already has answers here:
Percentage Height HTML 5/CSS
(7 answers)
Closed 2 years ago.
My html code
*,body{
padding: 0;
margin: 0;
}
.main{
width: 80%;
height: 100%;
}
.sidebar{
float: left;
width: 20%;
background-color: blue;
}
.main-content{
float: left;
width: 80%;
background-color: red
}
<html>
<body>
<header>
<div class="icon">
</div>
<div class="search"></div>
<div class="header-more"></div>
</header>
<div class="main">
<div class="sidebar">
<div class="home"></div>
<div class="library"></div>
<div class="subscription"></div>
<div class="more"></div>
<div class="settings"></div>
<div class="about"></div>
</div>
<div class="main-content">
<div class="topic"></div>
<div class="videos">
<div class="video"></div>
<div class="video"></div>
<div class="video"></div>
<div class="video"></div>
<div class="video"></div>
<div class="video"></div>
<div class="video"></div>
<div class="video"></div>
</div>
<div class="posts">
<div class="post"></div>
<div class="post"></div>
<div class="post"></div>
</div>
<div class="videos">
<div class="video"></div>
<div class="video"></div>
<div class="video"></div>
<div class="video"></div>
<div class="video"></div>
<div class="video"></div>
<div class="video"></div>
<div class="video"></div>
</div>
</div>
</div>
</body>
</html>
As per my knowledge, I must see two block with blue colour covering 20% of window and red colour covering 80% of window. But I am getting just a blank window. Where is the problem?? Sorry if there is any obvious problem in code but I am beginner in html and css specially css.
Thanks for help in advance.

floats layout technique is little "out of date" (Use Flexbox -or- Grids).
Next, you could use semantic HTML5 tags main, aside, and so on (Instead of divs only).
Summarize of CSS layout techniques: https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout.
Last .main { height: 100%; } "not working" (No visual change) - read her why:
Why doesn't height: 100% work to expand divs to the screen height?
About your Q - your divs are empty (Put inside content and/or set min-height / height). Also related: Boxmodel. Working example:
*,body{
padding: 0;
margin: 0;
color: white;
}
html, body, .main {
height: 100%;
}
.sidebar{
float: left;
width: 20%;
height: 100%;
background-color: blue;
}
.main-content{
float: left;
width: 80%;
height: 100%;
background-color: red
}
.videos{
background: purple;
}
<html>
<body>
<header>
<div class="icon">
</div>
<div class="search"></div>
<div class="header-more"></div>
</header>
<div class="main">
<aside class="sidebar">
<div class="home">home</div>
<div class="library">library</div>
<div class="subscription"></div>
<div class="more"></div>
<div class="settings"></div>
<div class="about"></div>
</aside>
<main class="main-content">
<div class="topic"></div>
<div class="videos">
<div class="video">video 1</div>
<div class="video">video 2</div>
<div class="video"></div>
<div class="video"></div>
<div class="video"></div>
<div class="video"></div>
<div class="video"></div>
<div class="video"></div>
</div>
<div class="posts">
<article class="post">post 1</article>
<article class="post">post 2</article>
<article class="post"></article>
</div>
<div class="videos">
<div class="video">video 1</div>
<div class="video">video 2</div>
<div class="video"></div>
<div class="video"></div>
<div class="video"></div>
<div class="video"></div>
<div class="video"></div>
<div class="video"></div>
</div>
</main>
</div>
</body>
</html>
Flexbox
*,body{
padding: 0;
margin: 0;
color: white;
}
.main {
display: flex;
}
aside{
flex-basis: 20%;
background-color: blue;
}
main{
flex-basis: 80%;
background-color: red
}
<html>
<body>
<header>
<div class="icon">
</div>
<div class="search"></div>
<div class="header-more"></div>
</header>
<div class="main">
<aside class="sidebar">
<div class="home">home</div>
<div class="library">library</div>
<div class="subscription"></div>
<div class="more"></div>
<div class="settings"></div>
<div class="about"></div>
</aside>
<main class="main-content">
<div class="topic"></div>
<div class="videos">
<div class="video">video 1</div>
<div class="video">video 2</div>
<div class="video"></div>
<div class="video"></div>
<div class="video"></div>
<div class="video"></div>
<div class="video"></div>
<div class="video"></div>
</div>
<div class="posts">
<article class="post">post 1</article>
<article class="post">post 2</article>
<article class="post"></article>
</div>
<div class="videos">
<div class="video">video 1</div>
<div class="video">video 2</div>
<div class="video"></div>
<div class="video"></div>
<div class="video"></div>
<div class="video"></div>
<div class="video"></div>
<div class="video"></div>
</div>
</main>
</div>
</body>
</html>
Nested flexbox example
Take a look at how easy it is to control the layout.
*,body{
padding: 0;
margin: 0;
color: white;
}
.main {
display: flex;
min-height: 40vh;
}
aside{
flex-basis: 20%;
padding: 5px;
background-color: blue;
}
main{
flex-basis: 80%;
background-color: red
}
.main-content{
display: flex;
}
.main-content > div{
flex-basis: 33%;
border: 1px solid white;
padding: 5px;
}
.videos{
background: purple;
}
<html>
<body>
<header>
<div class="icon">
</div>
<div class="search"></div>
<div class="header-more"></div>
</header>
<div class="main">
<aside class="sidebar">
<div class="home">home</div>
<div class="library">library</div>
<div class="subscription"></div>
<div class="more"></div>
<div class="settings"></div>
<div class="about"></div>
</aside>
<main class="main-content">
<div class="topic">Topic</div>
<div class="videos">
<div class="video">video 1</div>
<div class="video">video 2</div>
<div class="video"></div>
<div class="video"></div>
<div class="video"></div>
<div class="video"></div>
<div class="video"></div>
<div class="video"></div>
</div>
<div class="posts">
<article class="post">post 1</article>
<article class="post">post 2</article>
<article class="post"></article>
</div>
<div class="videos">
<div class="video">video 1</div>
<div class="video">video 2</div>
<div class="video"></div>
<div class="video"></div>
<div class="video"></div>
<div class="video"></div>
<div class="video"></div>
<div class="video"></div>
</div>
</main>
</div>
</body>
</html>

You should also add heights to the body and the divs.
CSS
* {
padding: 0;
margin: 0;
}
html, body {
height: 100%;
}
.main {
width: 80%;
height: 100%;
}
.sidebar {
float: left;
width: 20%;
height: 100%;
background-color: blue;
}
.main-content {
float: left;
width: 80%;
height: 100%;
background-color: red
}

How to put images and text inside boxes (html/css)?

Currently I have this (except only 3 boxes next to each other)
However, I am trying to put a small header, an image, and a small description within each box. How can I go about doing this?
Example image
Below the code snippet:
.block {
display: inline-block;
width: 200px;
height: 200px;
background-color: lightgray;
}
.container {
text-align: center;
}
<div class="container">
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
</div>

You can just add them as elements in your div:
.block {
display: inline-block;
width: 200px;
height: 200px;
background-color: lightgray;
}
.container {
text-align: center;
}
.block img {
width: 100px;
height: 100px;
}
<div class="container">
<div class="block">
<h3>Title 1</h3>
<img src="https://www.scania.org/wp-content/uploads/2018/10/article-10-2.jpg">
<p>Some text</p>
</div>
<div class="block">
<h3>Title 2</h3>
<img src="https://avatarfiles.alphacoders.com/121/121594.jpg">
<p>Some text</p>
</div>
<div class="block">
<h3>Title 2</h3>
<img src="https://i.imgur.com/8G3NXcW.gif">
<p>Some text</p>
</div>
</div>

You can just put them inside the "block" divs as elements. For example like this:
<div class="block">
<h1>Hello</h1>
<img src="asd">
<p>Some text, lorem etc.</p>
</div>
<div class="block">
<h1>Hello again</h1>
<img src="asd">
<p>Some epic text, lorem etc.</p>
</div>
<div class="block">
<h1>Hello hello</h1>
<img src="asd">
<p>Some even more exciting text, lorem etc.</p>
</div>

HTML PART
<div class="container">
<div class="block">
<div class="header">Title</div>
<div class="image"><img src="https://p.bigstockphoto.com/GeFvQkBbSLaMdpKXF1Zv_bigstock-Aerial-View-Of-Blue-Lakes-And--227291596.jpg" alt=""></div>
<div class="description">description</div>
</div>
<div class="block">
<div class="header">Title</div>
<div class="image"><img src="https://p.bigstockphoto.com/GeFvQkBbSLaMdpKXF1Zv_bigstock-Aerial-View-Of-Blue-Lakes-And--227291596.jpg" alt=""></div>
<div class="description">description</div>
</div>
<div class="block">
<div class="header">Title</div>
<div class="image"><img src="https://p.bigstockphoto.com/GeFvQkBbSLaMdpKXF1Zv_bigstock-Aerial-View-Of-Blue-Lakes-And--227291596.jpg" alt=""></div>
<div class="description">description</div>
</div>
<div class="block">
<div class="header">Title</div>
<div class="image"><img src="https://p.bigstockphoto.com/GeFvQkBbSLaMdpKXF1Zv_bigstock-Aerial-View-Of-Blue-Lakes-And--227291596.jpg" alt=""></div>
<div class="description">description</div>
</div>
</div>
CSS PART
.header {
width:100%;
float:left;
}
.image img {
width:100%;
float:left;
}
.description{
width:100%;
float:left;
}

3x3 circle icon grid with caption

I am looking for ways to add in a 3x3 grid of circle icons to my website. Each icon needs to contain a caption text (including sub-caption text) and be spaced evenly apart. The center icons need to be in the center of the webpage.
I unfortunately have been stuck for the last couple of hours, and I have no idea on how to achieve this. I would appreciate any help.

Here is a mostly flexbox grid with square cells and centered content that will evenly space the circle/text.
* {
box-sizing: border-box; margin: 0; padding: 0;
}
.grid {
display: flex;
flex-wrap: wrap;
max-width: 960px;
width: 90%;
margin: auto;
background: #eee;
}
.cell {
flex-basis: 33.3%;
display: flex;
justify-content: center;
align-items: center;
border: 1px solid #fff;
}
.cell:before {
padding-bottom: 100%;
display: block;
content: '';
}
.circle {
background: #ccc;
border-radius: 50%;
width: 100px;
height: 100px;
margin: 0 auto 1em;
}
.inner {
text-align: center;
}
<div class="grid">
<div class="cell">
<div class="inner">
<div class="circle"></div>
<div class="caption">
<h2>text</h2>
<h3>sub</h3>
</div>
</div>
</div>
<div class="cell">
<div class="inner">
<div class="circle"></div>
<div class="caption">
<h2>text</h2>
<h3>sub</h3>
</div>
</div>
</div>
<div class="cell">
<div class="inner">
<div class="circle"></div>
<div class="caption">
<h2>text</h2>
<h3>sub</h3>
</div>
</div>
</div>
<div class="cell">
<div class="inner">
<div class="circle"></div>
<div class="caption">
<h2>text</h2>
<h3>sub</h3>
</div>
</div>
</div>
<div class="cell">
<div class="inner">
<div class="circle"></div>
<div class="caption">
<h2>text</h2>
<h3>sub</h3>
</div>
</div>
</div>
<div class="cell">
<div class="inner">
<div class="circle"></div>
<div class="caption">
<h2>text</h2>
<h3>sub</h3>
</div>
</div>
</div>
<div class="cell">
<div class="inner">
<div class="circle"></div>
<div class="caption">
<h2>text</h2>
<h3>sub</h3>
</div>
</div>
</div>
<div class="cell">
<div class="inner">
<div class="circle"></div>
<div class="caption">
<h2>text</h2>
<h3>sub</h3>
</div>
</div>
</div>
<div class="cell">
<div class="inner">
<div class="circle"></div>
<div class="caption">
<h2>text</h2>
<h3>sub</h3>
</div>
</div>
</div>
</div>

Box shadow not working properly

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>

how to hide body content after the height of main div if body height is greater then div

I have a web page in which .blocks is 1000px height and <body> is 2000px i am using overflow:hidden to .blocks which is working fine but blank body is showing after it i want webpage height should be 1000px only after that it will hide content.
Here is my code:
HTML
<div class="blocks">
<div class="block">
</div>
<div class="block">
</div>
<div class="block">
</div>
<div class="block">
</div>
<div class="block">
</div>
<div class="block">
</div>
<div class="block">
</div>
<div class="block">
</div>
<div class="block">
</div>
<div class="block">
</div>
<div class="block">
</div>
<div class="block">
</div>
<div class="block">
</div>
<div class="block">
</div>
</div>
CSS
body{
height: 2000px;
}
.blocks{
height:1000px;
overflow:hidden;
}
.block{
background: #000;
height: 100px;
width: 100%;
margin-bottom: 10px;
}
Here is the fiddle with problem : https://jsfiddle.net/0b6g6886/2/

try this:
body{
height: auto;
}