I have a design I have mocked up in photoshop using a Bootstrap 12-column guide. Whenever I try to mock this up in Bootstrap, the results are NOTHING like what I want.
My HTML Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<style>
body {
background-color: #cacaca;
}
.container{
}
/* Remove the navbar's default margin-bottom and rounded borders */
.navbar {
margin-bottom: 0;
border: 0px solid black;
border-radius: 0;
b ackground-color: #2a2b2d;
}
.bottom-nav {
background-color: #1d1e20;
border: 0px solid black;
margin-top: 0;
}
/* Set height of the grid so .sidenav can be 100% (adjust as needed) */
.row.content {
height: 100px
}
/* Set gray background color and 100% height */
.sidenav {
padding-top: 20px;
background-color: #f1f1f1;
height: 100%;
}
/* Set black background color, white text and some padding */
footer {
background-color: #555;
color: white;
padding: 15px;
}
.text-left{
margin-top: 105px;
border:1px solid black;
background-color:white;
}
.blog{
border:1px solid black;
background-color:white;
margin-right: 10px;
}
.sidebar{
margin-left: 10px;
border:1px solid black;
background-color:white;
}
/* On small screens, set height to 'auto' for sidenav and grid */
#media screen and (max-width: 767px) {
.sidenav {
height: 280;
width:280;
margin:20px;
}
.row.content {height:auto;}
}
</style>
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Logo</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li>
<li>About</li>
<li>Projects</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
<nav class="bottom-nav">
</nav>
<div class="container text-center">
<div class="row content">
<div class="col-md-3 text-left">.col-md-3</div>
<div class="col-md-3 text-left">.col-md-3</div>
<div class="col-md-3 text-left">.col-md-3</div>
<div class="col-md-3"></div>
</div>
<div class="row">
<div class="col-md-9 blog">.col-md-9</div>
<div class="col-md-3 sidebar">.col-md-3</div>
</div>
</div>
<footer class="container-fluid text-center">
<p>Footer Text</p>
</footer>
</body>
</html>
My problem is that in my mockup, I have 10px of "gutter" between each column, whenever I add this in with "margin" CSS, it throws the page out of whack.
Also, the main blog block (the big white one) is 9 columns. the sidebar(black thing next to it) is 3 columns. Whenever I input the respective columns WITH margin, it pushes it to a new line. Like so:
I'm really new to bootstrap, but it's throwing me for a loop! Any help is appreciated! I would really like to learn this properly.
Also, is there any way to center the columns like I have in my mockup?
first: remove the margin-right and margin-left from .blog and .sidebar.
then: you can put a div inside div.col-md-3 with width:100% and background-color: white, and remove background-color:white from div.sidebar.
.blog{
border:1px solid black;
background-color:white;
}
.sidebar{
border:1px solid black;
}
.with-space {
width: 100%;
background-color:white;
}
/*-------------------*/
<div class="row">
<div class="col-md-9 blog">col-md-9</div>
<div class="col-md-3 sidebar">
<div class="with-space">col-md-3</div>
</div>
I hope it helps you...
Have you tried closing the container div after the first row, and opening a second container for the second row? Bootstrap does a wrap-around type thing when you exceed 12 columns in a container
Related
There is a white space gap at the bottom of mine webs
Header and CSS#
This is mine header i using bootstrap and there got a white space in
the bottom of mine website
This is mine header i using bootstrap and there got a white space in
the bottom of mine website
This is mine header i using bootstrap and there got a white space in
the bottom of mine website
This is mine header i using bootstrap and there got a white space in
the bottom of mine website
This is mine header i using bootstrap and there got a white space in
the bottom of mine website
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>We CARE for your health</title>
<link rel="icon" href="<?= base_url('img/icon.png')?>" type="image/icon type">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css">
<link rel="stylesheet" href="assets/css/style.css">
<title>Online Clinic</title>
<link rel="stylesheet" href="<?= base_url('bootstrap/dist/css/bootstrap.min.css')?>">
<!--For home page's below slider's content-->
<!--For home page's below slider's content-->
<style>
/*The control button to black color*/
.carousel-control-next,
.carousel-control-prev /*, .carousel-indicators */ {
filter: invert(100%);
}
/*For home page's below slider's content*/
.how-section1{
margin-top:-15%;
padding: 10%;
}
.how-section1 h4{
color: #ffa500;
font-weight: bold;
font-size: 30px;
}
.how-section1 p{
text-align: justify;
text-justify: inter-word;
}
.how-section1 .subheading{
color: #3931af;
font-size: 20px;
}
.how-section1 .row
{
margin-top: 10%;
}
.how-img
{
text-align: center;
}
.how-img img{
width: 70%;
}
.lastImg img{
width: 80%;
}
/*For home page's below slider's content*/
.foot {
position: fixed;
bottom: 0;
width: 100%;
height: 70px; /* Height of the footer */
background: white;
}
</style>
# Body#
<body style="background-repeat: no-repeat; background-color:white;" class="d-flex flex-column min-vh-100">
<div class="m-0">
<nav class="navbar navbar-expand-lg navbar-light bg-light" >
<img src="<?= base_url('img/logoClinic.jpg') ?>" height="70" alt="Mediklinik Menglembu 18 Jam" >
<div class="container-fluid">
<div class="collapse navbar-collapse" id="navbarCollapse">
<div class="navbar-nav ">
<b>Home</b>
<b>Profile</b>
<b>Messages</b>
<b>Reports</b>
</div>
<div class="navbar-nav ms-auto">
<b>Login</b>
</div>
</div>
</div>
</nav>
</div>
Footer#
<div class="foot">
<footer class="text-center text-black position-relative" style="background-color:white">
<div class="social">
<i class="icon ion-social-instagram px-5"></i>
<i class="icon ion-social-snapchat px-5"></i>
<i class="icon ion-social-twitter px-5"></i>
<i class="icon ion-social-facebook px-5"></i></div>
<br>
<ul class="list-inline">
<li class="list-inline-item px-3">Home</li>
<li class="list-inline-item px-3">Services</li>
<li class="list-inline-item px-3">About</li>
<li class="list-inline-item px-3">Terms</li>
<li class="list-inline-item px-3">Privacy Policy</li>
</ul>
<p class="copyright text-center">Mediklinik Kampar © 2022</p>
</footer>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.bundle.min.js"></script>
</body>
</html>
</body>
</html>
You can solve your problem like this way,
<body>
<main></main>
<footer>
<span>This is a footer</span>
</footer>
</body>
Step 1: Set your body min-height: 100vh; and position: relative;
Step 2: Set your footer width: 100%;, position: absolute; and bottom: 0;
Here is the css,
body {
margin: 0;
min-height: 100vh;
position: relative;
}
footer {
width: 100%;
background: lightgray;
text-align: center;
padding: 1rem 0;
position: absolute;
bottom: 0;
}
you can fix the issue by yourself by right clicking on the page and select Inspect option.
I am trying to add a background image to a divwhich will b e reffered from external stylesheet but failed to do so.Pls tell me how to do it.
.header {
height: 278px;
width: 100%;
display: inline-block;
}
.center {
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 30px;
}
.navbar-custom {
margin: 45px;
}
.color {
background-color: #7b97ac;
}
.nav {
font-size: 25px;
}
.nav li a {
color: #000;
}
.nav li a:hover {
color: #E50894;
}
.nav .active a {
color: #E50894;
}
.back {
background-image: url(../img/home.jpg);
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Themida Home</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
<script src="js/jquery-3.1.0.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="header">
<img src="img/Themida_logo.png" class="center">
<nav class="navbar navbar-custom center">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mynavbar">
<span class="icon-bar color"></span>
<span class="icon-bar color"></span>
<span class="icon-bar color"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="mynavbar">
<ul class="nav navbar-nav">
<li class="active">HOME</li>
<li>ABOUT US</li>
<li>SERVICES</li>
<li>CONTACT US</li>
<li>LINKS</li>
</ul>
</div>
</nav>
</div>
<div class="back">
</div>
</div>
</body>
</html>
![This is the image i want to use as background
]1
Please help me.
You need to edit the .back class in your CSS file and add these:
.back {
background-image: url('https://i.stack.imgur.com/Dg4go.jpg');
background-size: cover;
width:600px; /* this can be adjusted to your taste*/
height:200px; /* this can be adjusted to your taste*/
}
In your HTML file you need to add content to see the image properly e.g
<div class="back">
<br><br><hr><br> <!-- add as many as you can for test purposes -->
</div>
Depending on the type of content you intend to add to the div, the width and height properties in the CSS might need to be tweaked, or even removed. Good luck.
You just need to add the height/width so that you can see the background-image, since it does not have any child
.back {
background-image: url(https://i.stack.imgur.com/Dg4go.jpg);
background-size: cover;
height: 300px;
width: 500px;
}
<div class="back">
</div>
If you add some content, you can see the image without adding width or height
.back {
background-image: url(https://i.stack.imgur.com/Dg4go.jpg);
background-size: cover;
}
<div class="back">
<br/><br/><br/><br/><br/><br/><br/>
</div>
The div has no dimensions (height, width) and therefore the background image won't show. It will only automatically show image if it is an IMG tag
I'm trying to do main page for my website, I have picture how it should like this
I've tried to use Bootstrap, but they all were stick to each other
How should I solve this problem?
Here is my code for html:
<div class=" container-fluid">
<div class="row" style="margin-top: 15%;">
<div class="col-md-2 col-md-offset-5 text-center menu">About</div>
<div class="row">
<div class="col-md-2 col-md-offset-4 text-center menu ">Skills</div>
<div class="col-md-2 text-center menu">Projects</div>
</div>
<div class="col-md-2 col-md-offset-5 text-center menu">Contact</div>
</div>
</div>
And here is css:
.menu{
font-family: 'Poiret One', cursive;
font-size: 350%;
color: white;
background-color:grey;
border: 1px solid black;
opacity: 0.95;
transition-property: all;
transition-duration: 0.5s;
}
Here is a simple example with Flexbox:
.content {
width: 250px;
padding: 20px;
margin: 10px;
border: solid 10px black;
text-align: center;
font-size: xx-large;
}
#wrapper {
display: flex;
flex-direction: column;
align-items: center;
}
#middle {
display: flex;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Flexbox</title>
</head>
<body>
<div id="wrapper">
<div class="content">text</div>
<div id="middle">
<div class="content">text</div>
<div class="content">text</div>
</div>
<div class="content">text</div>
</div>
</body>
</html>
It's be helpful if you provided some code but to get it just like that image, I have provided the code below - adjustments could be made from there:
#topdiv{
width:400px;
height:40px;
margin:0 auto;
border: 2px solid black;
}
#leftdiv{
float:left;
width:30%;
margin-left: 17%;
border: 2px solid black;
}
#rightdiv{
float:right;
width:30%;
margin-right: 17%;
border: 2px solid black;
}
#bottomdiv{
clear: both;
position: relative;
width:400px;
height: 50px;
bottom:0;
margin: 0 auto;
border: 2px solid black;
}
Then the HTML:
<!DOCTYPE html>
<html>
<head>
<link rel = "stylesheet" type = "text/css" href = "CSSFILE.css" />
</head>
<body>
<div id = "topdiv">
Top
</div>
<div id = "leftdiv">
Left
</div>
<div id = "rightdiv">
Right
</div>
<div id = "bottomdiv">
Bottom
</div>
</body>
</html>
You didn't close every row, which is necessary for the bootstrap grid to work the way you want it.
I suppose it depends on the bootstrap version, but at least in codepen the offset classes have to be named differently: offset-md-5 instead of col-md-offset-5 and similar. There seems to be a bug or some inconsistency in the some bootstrap version/s - see also this question: Bootstrap 4 accepting offset-md-*, instead col-offset-md-* Naming Convention Bug
Here's the working code for your situation in a codepen:
https://codepen.io/anon/pen/NjxLdj
EDIT / CODE FROM CODEPEN ADDED HERE (but without Bootstrap CSS, i.e. not working without it):
<div class="container-fluid">
<div class="row" style="margin-top:15%;">
<div class="col-md-2 offset-md-5 text-center menu">About</div>
</div>
<div class="row">
<div class="col-md-2 offset-md-4 text-center menu">Skills</div>
<div class="col-md-2 text-center menu">Projects</div>
</div>
<div class="row">
<div class="col-md-2 offset-md-5 text-center menu">Contact</div>
</div>
</div>
I use div and span tags together with css properties such as block, cross-browser inline-block and text-align center, see my simple example here below but solution is obtained from Here
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
.block{display:block;}
.text-center{text-align:center;}
.border-dashed-black{border:1px dashed black;}
.inline-block{
display: -moz-inline-stack;
display: inline-block;
zoom: 1;
*display: inline;
}
.border-solid-black{border:1px solid black;}
.text-left{text-align:left;}
</style>
</head>
<body>
<div class="block text-center border-dashed-black">
<span class="block text-center">
<span class="block">
<!-- The Div we want to center set any width as long as it is not more than the container-->
<div class="inline-block text-left border-solid-black" style="width:450px !important;">
jjjjjk
</div>
</span>
</span>
</div>
</body>
</html>
In this one page site my aboutus and contact are not taking full width and height which i need.anymore suggestions are more welcomed.how to shrink top nav bar when about service and contact page comes.
/*!
* Start Bootstrap - Scrolling Nav (http://startbootstrap.com/)
* Copyright 2013-2016 Start Bootstrap
* Licensed under MIT (https://github.com/BlackrockDigital/startbootstrap/blob/gh-pages/LICENSE)
*/
body {
width: 100%;
height: 100%;
}
html {
width: 100%;
height: 100%;
}
#media(min-width:767px) {
.navbar {
padding: 20px 0;
-webkit-transition: background .5s ease-in-out,padding .5s ease-in-out;
-moz-transition: background .5s ease-in-out,padding .5s ease-in-out;
transition: background .5s ease-in-out,padding .5s ease-in-out;
}
.top-nav-collapse {
padding: 0;
}
}
/* Demo Sections - You can use these as guides or delete them - the scroller will work with any sort of height, fixed, undefined, or percentage based.
The padding is very important to make sure the scrollspy picks up the right area when scrolled to. Adjust the margin and padding of sections and children
of those sections to manage the look and feel of the site. */
.about {
height: 100%;
width:100%;
padding-top: 150px;
padding-left: 100px;
text-align: center;
background-color:#000026;
color:white;
}
.services{
height: 100%;
width:100%;
padding-top: 150px;
padding-left: 100px;
text-align: center;
background-color:#000026;
color:white;
}
.contact {
height: 100%;
width:100%;
padding-top: 150px;
padding-left: 100px;
text-align: center;
background-color:#000026;
color:white;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>ITspectra</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="js/scrolling-nav.js"></script>
<script src="js/jquery.min.js"></script>
<script src="js/modernizr.js"></script>
<script src="js/carousel-3d.js" ></script>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<link href="css/scrolling-nav.css" rel="stylesheet">
<style>
#wrapper {
width: 100%;
height:100%;
background-color: tan;
float:left;
}
/* Remove the navbar's default margin-bottom and rounded borders */
.navbar {
margin-bottom: 0;
border-radius: 0;
background-color:black;
width:100%;
height:110px;
}
/* Add a gray background color and some padding to the footer */
footer {
background-color: #f2f2f2;
padding: 25px;
}
ul.nav.navbar-nav {
margin-left: 36%;
margin-top: 22px;
}
.carousel-inner img {
width: 100%; /* Set width to 100% */
margin: auto;
min-height:200px;
}
/* Hide the carousel text when the screen is less than 600 pixels wide */
#media (max-width: 600px) {
.carousel-caption {
display: none;
}
}
</style>
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-main">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.php"><img src="its.png"></a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About Us</li>
<li>Careers</li>
<li>Services</li>
<li>Contact Us</li>
</ul>
</div>
</div>
</nav>
<div id="wrapper">
<div data-carousel-3d >
<img src="http://www.jqueryscript.net/demo/Responsive-3D-Rotating-Carousel-Plugin-For-jQuery-carousel-3d//images/left.png" data-carousel-3d-left />
<img src="http://www.jqueryscript.net/demo/Responsive-3D-Rotating-Carousel-Plugin-For-jQuery-carousel-3d/images/right.png" data-carousel-3d-right />
<ul data-carousel-3d-children>
<li><img src="https://unsplash.it/640/420?image=628" /></li>
<li><img src="https://unsplash.it/640/420?image=635" /></li>
<li><img src="https://unsplash.it/640/420?image=633" /></li>
<li><img src="https://unsplash.it/640/420?image=635" /></li>
<li><img src="https://unsplash.it/640/420?image=626" /></li>
<li selected><img src="https://unsplash.it/640/420?image=629" /></li>
</ul>
</div>
</div>
<div class="container-fluid text-center">
<h3>Welcome to IT Spectra</h3><br>
<p id="ccont">IT Spectra excels in providing custom software and
mobile apps that match your specications, which is
just one of its many advantages: Extensive Team of experienced
professionals. 15+ years of IT experience.
Unique Ideas Expand skilled resources. Well within
budget and time constraints. Gain competitive advantage
in the market..</p>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="about">
<h2>About Us</h2>
<p id="fcont">IT Spectra excels in providing
custom software and mobile apps
that match your specifications,
which is just one of its many
advantages</p>
</div>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="services">
<h2>Company</h2>
<p id="fcont">Company Overview
Meet The Team
Our Awesome Partners
Our Services</p>
</div>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="contact">
<h2>Address</h2>
<p>IT SPECTRA<br/>
Flat-1A,1st Floor,<br/>
Plot No.38,James Street,<br/>
Ram Nagar-North,<br/>
Madippakkam,Chennai-91.</br>
Phone : 044 - 4957 7990<br/>
E-mail : info#itspectra.com<br/>
Web : www.itspectra</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Are you trying to reduce the height of the nav bar?
If so then you can use the following css override:
.navbar {
height: auto !important;
}
I am creating an interface and I am unable to figure out as to why there is a huge gap between the names on the left side being displayed.
I have not set any kind of padding or any margin for any of the html elements.
I need the three blocks displayed to come within the specified height and not exceed its contents.
What am I doing wrong?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script src="http://cameronspear.com/downloads/bootstrap-hover-dropdown/bootstrap-hover-dropdown.js"></script>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<style>
.jumbotron {
padding: 0.5em 0.6em;
h1 {
font-size: 2em;
}
p {
font-size: 1.2em;
.btn {
padding: 0.5em;
}
}
}
.menuItem {
background-color: #e0e0ff;
width:295px;
height:183px;
border:2px solid #000;
}
.fontSize {
color: #00000;
font-family: Georgia, Times, serif;
font-size: 200%;
text-align: center;
}
.menuItem:hover { -moz-box-shadow: 0 0 50px #ccc;
-webkit-box-shadow: 0 0 50px #ccc; box-shadow: 0 0 50px #ccc;
}
</style>
</head>
<body>
<div class="container">
<div class="jumbotron">
<h2 style="text-align:center;">Head And Neck Therapy </h2>
</div>
<div style="width:1140px; height: 550px;border:2px solid #000;">
<div style="width:300px; height: 550px;display: inline-block">
<div class="menuItem fontSize"> Scan Images </div>
<div class="menuItem fontSize"> Patient Details </div>
<div class="menuItem fontSize"> Confirmation </div>
</div>
<div style="width:832px; height: 548px;display: inline-block"> </div>
</div>
</div>
</body>
Check out the following URL with the modified code. It might be what you're looking for. http://liveweave.com/Ci6YPG
Try wrapping the menu items in a float left div:
<div style="width:1140px; height: 550px;border:2px solid #000; background-color: blue">
<div style="float: left">
<div style="width:300px; height: 550px;display: inline-block; background-color: red">
<div class="menuItem fontSize"> Scan Images </div>
<div class="menuItem fontSize"> Patient Details </div>
<div class="menuItem fontSize"> Confirmation </div>
</div>
</div>
<div style="width:832px; height: 548px;display: inline-block; background-color: green">
</div>
</div>
You have your menuItem elements set to display: inline-block. That's positioning them based on the line-height which you're not setting and would end up being 20px. Try using display: block or set the line-height equal to the container's height.
Try removing the .menuItem height and div style="width:1140px; height: 550px;". You will get the spaces removed and then accordingly you can give width and height.