How to fix the alignment of the navigation items? - html

I'm having an issue where I can't see to get the 'Log in' text to be aligned with the rest of the navigation bar. Using margin or padding doesn't seem to push it up at all, and I managed to get it 3 pixels out by using line-height:0 but it wasn't enough. Ideas?
This is the design that I'm trying to achieve.
HTML
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link href="EvositeCSS.css" rel="stylesheet" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"> </script>
<link href='http://fonts.googleapis.com/css?family=Bree+Serif' rel='stylesheet' type='text/css'>
<script src="EvositeJS.js"> </script>
</head>
<body>
<div class="wrapper">
<div class="NavBar">
<div class="VictoriaHouse">
<img src="Images/VictoriaHouse.JPG" alt="Victoria House & Viney Court">
</div>
<div class="ActivePage">
<img src="Images/Triangle.PNG"> </img>
</div>
<div class= "LoginContainer">
<div class="DownTriangle">
<span class="glyphicon glyphicon-triangle-bottom" </span>
</div>
<h1 class="LoginTxt">Log in </h1>
</div>
<ul>
<li> <a href="Evosite.html" class="NavHome" id="Current")> Home </a> </li>
<li> News </li>
<li> Tenants </li>
<li> Heritage </li>
<li> About Us </li>
<li> Book the Meeting Room </li>
<li> Contact Us </li>
</ul>
</div> <!-- Ends NavBar <-->
</div> <!-- Ends wrapper -->
</body>
</html>
CSS
#charset "utf-8";
/* CSS Document */
.wrapper {
width:100%;
height:100%;
margin-left:auto;
margin-right:auto;
}
.VictoriaHouse {
padding-left:270px;
padding-top:20px;
padding-bottom:20px;
padding-right:140px;
float:left;
}
/* NavBar formatting */
.NavBar {
float:inline-block;
text-decoration:none;
}
ul {
float:inline-block;
padding-top:45px;
}
li {
display: inline;
}
a {
font-family: Bree Serif;
font-size:20px
}
a:link {
color:#002D62;
background-color:white;
}
a:visited {
color:#002D62;
text-decoration:none;
background-color:white;
}
a:hover {
text-decoration:none;
color: #007D68; /* Green */
}
a:active{
text-decoration:none;
color: #F68E56; /* orange */
}
.NavLink {
margin-left:20px;
text-decoration:none;
}
.NavHome {
margin-left:30px;
text-decoration:none;
}
.NavContact {
margin-left:20px;
text-decoration:none;
}
#Current {
color: #F68E56; /* orange */
}
.ActivePage {
float:left;
padding-top:25px;
padding-left:50px;
width:auto;
}
.LoginTxt {
font-family: Bree Serif;
font-size:20px;
color:#FF5A40;
padding-left:25px;
float:left;
}
.LoginContainer {
border-style:solid;
border-width:1.5px;
border-radius:5px;
border-color:#F68E56;
width:120px;
height:40px;
float:right;
margin-right:300px;
margin-top:40px;
}
.DownTriangle {
padding-left:90px;
padding-top:15px;
float:left;
position:relative;
}
.LoginTxtContainer {
margin-top:10px;
}


There are a couple of issues need to be fixed first.
1 <img> is a self-closing tag, remove </img> from <img src="Images/Triangle.PNG"> </img>, or use <img src="" />
2 It's missing a closing > here <span class="glyphicon glyphicon-triangle-bottom" </span>
3 Remove the ) from <a href="Evosite.html" class="NavHome" id="Current")>
The best way to get the login button in the right place is to adjust the structure slightly, to move it next to the navigation bar. And don't use <h1> for it, as it's not a headline.
I rewrote most of the CSS, removed all the unnecessary styles, see the details and demo below.
CodePen Demo
/* For Demo Only */
#import url("https://fonts.googleapis.com/css?family=Bree+Serif");
#import url("https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css");
/* CSS Document */
body {
font-family: "Bree Serif";
}
.wrapper {
width: 1200px;
margin: 0 auto;
padding: 20px;
}
/* NavBar formatting */
.NavBar {
overflow: auto;
font-size: 20px;
}
.VictoriaHouse,
.MainNavigation {
float: left;
}
.MainNavigation {
padding-top: 30px;
}
.MainNavigation ul {
margin: 0;
padding: 0 0 0 20px;
}
.MainNavigation li {
display: inline-block;
vertical-align: top;
}
.MainNavigation a {
margin: 0 10px;
text-decoration: none;
color: #000;
display: block;
position: relative;
}
.MainNavigation #Current:after,
.MainNavigation a:hover:after {
content: url("http://i.imgur.com/zN4WiYV.png");
color: #F68E56;
width: 100%;
text-align: center;
position: absolute;
top: -20px;
left: 0;
}
.MainNavigation a:hover {
color: #007D68;
}
.LoginContainer {
float: right;
margin-top: 25px;
border: 1px solid #F68E56;
border-radius: 5px;
width: 120px;
height: 40px;
line-height: 40px;
text-align: center;
}
.LoginContainer .LoginTxt {
text-decoration: none;
color: #FF5A40;
}
.LoginTxt .glyphicon {
font-size: 14px;
color: #000;
}
.LoginTxt:hover .glyphicon {
color: #FF5A40;
}
<div class="wrapper">
<div class="NavBar">
<div class="VictoriaHouse">
<img src="http://i.imgur.com/eB6yyLi.jpg" alt="Victoria House & Viney Court" />
</div>
<div class="MainNavigation">
<ul>
<li> Home </li>
<li> News </li>
<li> Tenants </li>
<li> Heritage </li>
<li> About Us </li>
<li> Book the Meeting Room </li>
<li> Contact Us </li>
</ul>
</div>
<div class="LoginContainer">
<a class="LoginTxt" href="#"> Log in <span class="glyphicon glyphicon-triangle-bottom"></span> </a>
</div>
</div>
<!-- Ends NavBar <-->
</div>
<!-- Ends wrapper -->


You had a couple of problems in your HTML/CSS. I managed to simplify and fix them, check this fiddle
Also, here's the code snippets...
CSS
/* CSS Document */
.wrapper {
width:100%;
height:100%;
margin-left:auto;
margin-right:auto;
}
.VictoriaHouse {
padding-left:270px;
padding-top:20px;
padding-bottom:20px;
padding-right:140px;
float:left;
}
/* NavBar formatting */
.NavBar {
float:inline-block;
text-decoration:none;
}
ul {
display:inline-block;
padding-top:45px;
}
li {
display: inline;
}
a {
font-family: Bree Serif;
font-size:20px
}
a:link {
color:#002D62;
background-color:white;
}
a:visited {
color:#002D62;
text-decoration:none;
background-color:white;
}
a:hover {
text-decoration:none;
color: #007D68; /* Green */
}
a:active{
text-decoration:none;
color: #F68E56; /* orange */
}
.NavLink {
margin-left:20px;
text-decoration:none;
}
.NavHome {
margin-left:30px;
text-decoration:none;
}
.NavContact {
margin-left:20px;
text-decoration:none;
}
#Current {
color: #F68E56; /* orange */
}
.ActivePage {
float:left;
padding-top:25px;
padding-left:50px;
width:auto;
}
.LoginContainer {
border-style:solid;
border-width:1.5px;
border-radius:5px;
border-color:#F68E56;
float:right;
margin-right:300px;
margin-top:40px;
line-height: 40px;
padding-left: 20px;
}
.LoginTxt {
font-family: Bree Serif;
font-size:20px;
color:#FF5A40;
display: inline-block;
margin:0;
}
.LoginContainer .downArrow {
padding-left: 10px;
padding-right: 5px;
}
HTML
<div class="wrapper">
<div class="NavBar">
<div class="VictoriaHouse">
<img src="Images/VictoriaHouse.JPG" alt="Victoria House & Viney Court"/>
</div>
<div class="ActivePage">
<img src="Images/Triangle.PNG"/>
</div>
<div class= "LoginContainer">
<h1 class="LoginTxt">Log in</h1>
<span class="downArrow glyphicon glyphicon-triangle-bottom"></span>
</div>
<ul>
<li> <a href="Evosite.html" class="NavHome" id="Current")> Home </a> </li>
<li> News </li>
<li> Tenants </li>
<li> Heritage </li>
<li> About Us </li>
<li> Book the Meeting Room </li>
<li> Contact Us </li>
</ul>
</div> <!-- Ends NavBar <-->
</div> <!-- Ends wrapper -->

Related

How to add a margin to a paragraph?

I want to make a website and I am paragraphs with border. I tried margin on css but doesn't work. How to make paragraph margin on this?
This is my HTML code:
body{
margin:0px;
font-family:Calibri;
background-color:#58d68d ;
}
/* Navigation Bar */
ul{
margin:0px;
padding:0px;
overflow:hidden;
background-color:white;
top:0px;
width:100%;
}
li.brand{
margin-left:100px;
}
li.active{
background-color:#FAFAFA;
}
li.right{
float:right;
}
li.right-space{
float:right;
margin-right:100px;
}
li{
float: left;
}
li, a{
font-size:18px;
display:block;
color:#58d68d;
text-align:center;
padding:7px 12px;
text-decoration:none;
transition:0.4s;
}
li:hover, a:hover{
background-color:#FAFAFA;
}
/* Intro */
h1{
margin-top:20px;
margin-left:100px;
font-size:100px;
color:white;
margin-bottom:0px;
}
h2{
margin-top:0px;
margin-bottom:50px;
margin-left:100px;
color:white;
max-width:1000px;
opacity:0.7;
}
/* Packs Section */
div.packs{
width:100%;
height:500px;
background-color:white;
}
p{
margin:50px;
display:inline;
padding:7px 12px;
border-left:6px solid red;
background-color:lightgrey;
}
<!-- Navigation Bar -->
<nav>
<ul>
<!-- Left -->
<li class="brand">Packet.ml</li>
<li class="active">About</li>
<!-- Right -->
<li class="right-space">Application</li>
<li class="right">Download</li>
<li class="right">Packets</li>
</ul>
</nav>
<!-- Intro -->
<header>
<h1>Packet</h1>
<h2>Any application, software programm or game in one place! Packets everywhere!</h2>
</header>
<!-- Packs Section -->
<section>
<div class="packs">
<p>Edition Packet</p>
<p>Full Packet</p>
<p>User Pro Packet</p>
</div>
</section>
I tried margin:50px;, but not work. This command action only on margin-left and right.
Any ideas?

marginwon't work in inline elements, which you are setting the p so set p as inline-block
body {
margin: 0px;
font-family: Calibri;
background-color: #58d68d;
}
/* Navigation Bar */
ul {
margin: 0px;
padding: 0px;
overflow: hidden;
background-color: white;
top: 0px;
width: 100%;
}
li.brand {
margin-left: 100px;
}
li.active {
background-color: #FAFAFA;
}
li.right {
float: right;
}
li.right-space {
float: right;
margin-right: 100px;
}
li {
float: left;
}
li,
a {
font-size: 18px;
display: block;
color: #58d68d;
text-align: center;
padding: 7px 12px;
text-decoration: none;
transition: 0.4s;
}
li:hover,
a:hover {
background-color: #FAFAFA;
}
/* Intro */
h1 {
margin-top: 20px;
margin-left: 100px;
font-size: 100px;
color: white;
margin-bottom: 0px;
}
h2 {
margin-top: 0px;
margin-bottom: 50px;
margin-left: 100px;
color: white;
max-width: 1000px;
opacity: 0.7;
}
/* Packs Section */
div.packs {
width: 100%;
height: 500px;
background-color: white;
}
p {
margin: 50px;
display: inline-block;
padding: 7px 12px;
border-left: 6px solid red;
background-color: lightgrey;
}
<!-- Navigation Bar -->
<nav>
<ul>
<!-- Left -->
<li class="brand">Packet.ml
</li>
<li class="active">About
</li>
<!-- Right -->
<li class="right-space">Application
</li>
<li class="right">Download
</li>
<li class="right">Packets
</li>
</ul>
</nav>
<!-- Intro -->
<header>
<h1>Packet</h1>
<h2>Any application, software programm or game in one place! Packets everywhere!</h2>
</header>
<!-- Packs Section -->
<section>
<div class="packs">
<p>Edition Packet</p>
<p>Full Packet</p>
<p>User Pro Packet</p>
</div>
</section>

You are using display: inline; for paragraphs, try display: inline-block; instead.
Here is an working example:
body {
margin: 0px;
font-family: Calibri;
background-color: #58d68d;
}
/* Navigation Bar */
ul {
margin: 0px;
padding: 0px;
overflow: hidden;
background-color: white;
top: 0px;
width: 100%;
}
li.brand {
margin-left: 100px;
}
li.active {
background-color: #FAFAFA;
}
li.right {
float: right;
}
li.right-space {
float: right;
margin-right: 100px;
}
li {
float: left;
}
li,
a {
font-size: 18px;
display: block;
color: #58d68d;
text-align: center;
padding: 7px 12px;
text-decoration: none;
transition: 0.4s;
}
li:hover,
a:hover {
background-color: #FAFAFA;
}
/* Intro */
h1 {
margin-top: 20px;
margin-left: 100px;
font-size: 100px;
color: white;
margin-bottom: 0px;
}
h2 {
margin-top: 0px;
margin-bottom: 50px;
margin-left: 100px;
color: white;
max-width: 1000px;
opacity: 0.7;
}
/* Packs Section */
div.packs {
width: 100%;
height: 500px;
background-color: white;
}
p {
margin: 50px;
display: inline-block;
padding: 7px 12px;
border-left: 6px solid red;
background-color: lightgrey;
}
<!DOCTYPE HTML>
<html lang="en-us">
<head>
<title>Packet</title>
<!-- PLUGINS -->
<link rel="icon" href="packet.ico" />
<script src="plugin/mobile.js"></script>
<link rel="stylesheet" type="text/css" href="plugin/packet.css">
</head>
<body>
<!-- Navigation Bar -->
<nav>
<ul>
<!-- Left -->
<li class="brand">Packet.ml
</li>
<li class="active">About
</li>
<!-- Right -->
<li class="right-space">Application
</li>
<li class="right">Download
</li>
<li class="right">Packets
</li>
</ul>
</nav>
<!-- Intro -->
<header>
<h1>Packet</h1>
<h2>Any application, software programm or game in one place! Packets everywhere!</h2>
</header>
<!-- Packs Section -->
<section>
<div class="packs">
<p>Edition Packet</p>
<p>Full Packet</p>
<p>User Pro Packet</p>
</div>
</section>
</body>
</html>

Recreating Google Homepage (html/css): Questions regarding positioning

I'm doing a project on recreating the Google homepage with html and css. I am for the most part finished with the project, but I've noticed a few quirks that are irritating me. I've spent a great deal of time on each of these quirks, but can't get things to way I want them to look. These are the following quirks:
The icon in the top right-hand corner isn't inline with the rest of the text.
For some reason I can't center the buttons properly.
Not sure how to handle the white space surrounding the grey footer.
JSFiddle of The Code
If you have any input on any of the above issues, I would forever be thankful!
<body>
<div id="wrapper">
<div id="header">
<ul class="navbar">
<li class="navli"> +You
</li>
<li class="navli">Gmail
</li>
<li class="navli">Images
</li>
<li class="navli" id="icon">
<img src="http://bit.ly/1NHEwTW" height="auto" width="30" />
</li>
<li class="navli">theonlybrianlie#gmail.com
</li>
</ul>
</div>
<div id="body">
<div class="logo">
<img src="https://www.google.com/images/srpr/logo11w.png" />
</div>
<div class="searchbar">
<input type="text" id="search1" />
</div>
<div id="buttons">
<input class="button" id="googlesearch" value="Google Search" type="submit">
<input class="button" id="secondbutton" value="I'm Feeling Lucky" type="submit">
</div>
</div>
<div id="footer">
<div id="leftfoot">
<ul>
<li class="lf"> Advertising
</li>
<li class="lf"> Business
</li>
<li class="lf"> About
</li>
</ul>
</div>
<div id="rightfoot">
<ul>
<li class="rf"> Privacy
</li>
<li class="rf"> Terms
</li>
<li class="rf"> Settings
</li>
</ul>
</div>
</div>
</div>
.button {
font-family:Arial;
font-size:11px;
font-weight:bold;
display:inline;
height:30px;
border:1px solid #dcdcdc;
background:#f2f2f2;
padding-left: 10px;
}
body, html {
height:100%
}
#wrapper {
min-height:100%;
position: relative;
padding:0;
margin:0;
}
.logo img {
display:block;
width: 269px;
height:95px;
margin:auto;
margin-top: 80px;
padding-top: 112px;
}
#header {
width:100%;
height:100px;
/*background-color:green*/
;
}
.navbar {
/*background-color: red;*/
float: right;
}
.navli {
display: inline-block;
font-family: Arial;
}
.navli a {
text-decoration:none;
color: #404040;
font-size: 13px;
padding-left: 15px;
}
.navli a:hover {
text-decoration:underline;
}
#icon {
margin-top:10px;
padding-left:15px;
bottom:0;
position:relative;
}
.searchbar {
width:400px;
height:28px;
margin: auto;
display:block;
/*background-color:red;*/
padding-top:10px;
}
#search1 {
width:400px;
height:28px;
margin: auto;
}
#buttons {
display:block;
/*background-color:blue;*/
height: 22px;
width:250px;
margin: auto;
margin-top: 10px;
}
#footer {
position: absolute;
bottom:0;
height:60px;
width:100%;
background-color:#f2f2f2;
clear:both;
display:block;
border-top: 1px solid #e4e4e4;
}
#leftfoot {
width:300px;
left:0;
/*background-color:blue;*/
display: inline-block;
}
.lf {
display: inline-block;
}
.lf a {
text-decoration:none;
color: #404040;
font-size: 13px;
font-family: Arial;
padding-left: 15px;
}
.lf a:hover {
text-decoration: underline;
}
#rightfoot {
width:250px;
float:right;
/*background-color:blue;*/
padding:0;
margin:0;
}
.rf {
display: inline-block;
margin:auto;
}
.rf a {
text-decoration:none;
color: #404040;
font-size: 13px;
padding-left: 15px;
font-family: Arial;
}
.rf a:hover {
text-decoration: underline;
}

For your top right icon not inline with the rest of the menu, i would alter the CSS like this
.navli {
display: inline-block;
font-family: Arial;
float: left;
height: 30px;
line-height: 30px;
}
#icon {
/* margin-top: 10px; */
padding-left: 15px;
/* bottom: 0; */
/* position: relative; */
}
For your buttons not centering:
Add text-align:center; to #buttons
And for the white space on footer:
There's a margin on your body, so change your body,html to this:
body, html {
height: 100%;
margin: 0;
}
UPDATE
Here's the JSFiddle - Full Screen Preview - JSFiddle View

I'll try to answer these as concisely as possible:
1- the heading is inline, and your icon is taller than the rest of the inline elements. play with the margin and padding for your text elements there.
2- place your buttons in a div or section element of their own, and use text-align: center to center them on the page
3- add a class="container-fluid" to your footer element.

Can't place a div where I want it?

Here is the code. That blue div with the test "new code goes here?" is the one that I'm trying to line up properly.
http://codepen.io/mlynn/pen/MYZEoM
I'm trying to place this div so that the top of it is perfectly aligned with the top of the div to its left, like so: http://i.imgur.com/3gDhrqs.png
Any help appreciated. Not sure why this is seeming so hard.
HTML:
<!DOCTYPE html>
<!--
-->
<html lang="en">
<head>
<link type="text/css" rel="stylesheet" href="css/styletime.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="js/init.js"></script>
</head>
<body>
<section id="heady">
<div style="text-align: left;padding:25px 70px;display:inline-block;float:left;"><b>Site</b></p></div>
<div style="text-align: right;padding:25px 70px;display:inline-block;float:right;">
Home |
Generic |
Elements |
Sign Up
</div>
</section>
<section id="wrapper">
<br><br>
<img src="images/blacksquare.png" width="525" height="197"></img>
<br><br><br>
<div>
<div style="vertical-align:top;display:inline-block;float:left;">
<ul class="navbar cf">
<!-- <li>item 2</li> -->
<li style="width:200px;">
Category
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
</ul>
</li>
</ul>
</div>
<div class="container lister" style="display:inline-block;float:left;vertical-align:top;padding:0px 0px 0px 10px;">
<form action="">
<input type="text" id="todo" placeholder="Enter a To-do and hit enter" autocomplete="off">
</form>
<!-- <ul class="active">
<li>Work X</li>
<li>Sleep X</li>
<li>Repeat X</li>
</ul> -->
</div>
<div class="container lister" style="display:inline-block;float:left;vertical-align:top;padding:0px 0px 0px 10px;">
<ul class="active">
<!--
<li>Work X</li>
<li>Sleep X</li>
<li>Repeat X</li>
-->
</ul>
</div>
</div>
<div style="float:right;vertical-align:top;width:450px;height:800px;background:blue;margin:0 0 0 0;">
New div goes here??
</div>
</section>
<section id="feety">
I believe I exist
</section>
</body>
</html>
CSS
/*adder*/
#import url(http://fonts.googleapis.com/css?family=Open+Sans:400, 300, 600);
* {
padding:0;
margin:0;
}
html {
background:teal;
}
body {
/*background:url('https://snap-photos.s3.amazonaws.com/img-thumbs/960w/4657039731.jpg');*/
}
a {
color: #D9D9D9;
text-decoration: none;
}
a:active, a:hover {
text-decoration: underline;
}
#heady {
text-align: center;
width:100%;
height:75px;
background-color:#222222; /*Back Colors*/
font-family: Tahoma;
font-size: 16px;
color:white;
position:relative;
}
#wrapper {
text-align: center;
width:1000px;
height:1000px;
margin-left:auto;
margin-right:auto;
background-color:teal; /*Back Colors*/
font-family: Tahoma;
font-size: 16px;
position:relative;
}
#feety {
text-align: center;
width:100%;
height:100px;
background-color:darkslateblue; /*Back Colors*/
font-family: Tahoma;
font-size: 16px;
color:white;
position:relative;
}
/* clearfix */
/**
* For modern browsers
* 1. The space content is one way to avoid an Opera bug when the
* contenteditable attribute is included anywhere else in the document.
* Otherwise it causes space to appear at the top and bottom of elements
* that are clearfixed.
* 2. The use of `table` rather than `block` is only necessary if using
* `:before` to contain the top-margins of child elements.
*/
.cf:before,
.cf:after {
content: " "; /* 1 */
display: table; /* 2 */
}
.cf:after {
clear: both;
}
.cf {
* zoom: 1;
}
ul.navbar {
background:white;
border-style:solid;
border-color:#ccc;
border-width:1px;
width: 132px;
border-radius: 4px;
margin-left:10px;
margin-right:5px;
font-size:14px;
height:33px;
}
.ActiveListItem:after {
content: "\25BC\00a0\00a0"; /*carat and spaces*/
float:right;
font-weight:900;
padding: 0px 0px;
font-size:100%;
line-height:17px; /*keeps carat in center of text*/
}
ul.navbar li a.ActiveListItem {
background:white !important;
color:black;
padding:3px 5px !important;
font-weight:normal !important;
margin-left:14px;/* got the activeitem centered with the list text this way*/
margin-right:0px;
margin-top:5px;
margin-bottom:6px;
width:100px;
}
ul.navbar li {
position: relative;
width:130px;
}
ul.navbar li a {
display: block;
color: white;
padding:10px 5px;
text-decoration:none;
transition: all .2s ease-in;
}
ul.navbar li a:hover,
ul.navbar li:hover > a {
background:#a6d0e1; /*Leaving for now, but keep in mind things bold slowly when you change this to gradient*/
color: #333;
font-weight:900;
}
ul.navbar li ul {
margin-top: 1px;
position: absolute;
background: #222;
font-size: 14px;
/* min-width: 200px; */
display: none;
z-index: 99;
box-shadow: inset 0 2px 3px rgba(0,0,0,.6),
0 5px 10px rgba(0,0,0,.6);
}
ol, ul { list-style: outside none none; }
.hidden { display: none; }
/*Lister*/
.container {
width: 60%;
margin: 0px auto;
}
form { }
.lister input, ul {
background: #eee;
border-radius: 5px;
/* width: 100%; */
box-sizing: border-box;
font-family:"Tahoma";
}
.lister input {
width:300px; /*width of todo input box*/
height:33px;
padding: 10px 10px 10px 20px;
border: 1px solid #ccc;
float:left;
margin-bottom:20px;
font-size:14px;
}
.lister ul {
/*list-style: square inside;*/
padding: 10px; /* padding for outside area of list*/
width:447px;
}
.active { border: 1px solid #ccc; }
.inactive { display: none; }
.lister li {
padding: 10px; /*controls height of list items*/
font-size:16px; /*font size of list items*/
font-weight: 600;
color: #34495e;
text-align:left;
}
.lister li:nth-child(odd) {
background: #dadfe1;
border-radius: 5px;
}
.lister li > a {
float: right;
text-decoration: none;
color: #22313f;
font-weight: bold;
transition: all .2s ease-in-out;
}
.lister li > a:hover {
font-size: 110%;
color: #c0392b;
}
/*.lister li:before {
content: "";
float:right;
font-weight:900;
padding: 0px 0px;
font-size:100%;
line-height:20px;
}
.CategoryIcon {
float:right;
color:red;
padding:40px 40px;
} */

The main div which holds your inputs can be given a class and floated to the left with a set width.
HTML:
<div class="inputs"></div>
<div style="float:right;vertical-align:top;width:450px;height:800px;background:blue;margin:0 0 0 0;">
New div goes here??
</div>
CSS:
.inputs {
float: left;
width: 400px;
}
Here is the fixed code.

Try this: (Updated PEN)
<!DOCTYPE html>
<!--
-->
<html lang="en">
<head>
<link type="text/css" rel="stylesheet" href="css/styletime.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="js/init.js"></script>
</head>
<body>
<section id="heady">
<div style="text-align: left;padding:25px 70px;display:inline-block;float:left;"><b>Site</b></p></div>
<div style="text-align: right;padding:25px 70px;display:inline-block;float:right;">
Home |
Generic |
Elements |
Sign Up
</div>
</section>
<section id="wrapper">
<br><br>
<img src="images/blacksquare.png" width="525" height="197"></img>
<br><br><br>
<div style="float: left; width: 50%;">
<div style="vertical-align:top;display:inline-block;float:left;">
<ul class="navbar cf">
<!-- <li>item 2</li> -->
<li style="width:200px;">
Category
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
</ul>
</li>
</ul>
</div>
<div class="container lister" style="display:inline-block;float:left;vertical-align:top;padding:0px 0px 0px 10px;">
<form action="">
<input type="text" id="todo" placeholder="Enter a To-do and hit enter" autocomplete="off">
</form>
<!-- <ul class="active">
<li>Work X</li>
<li>Sleep X</li>
<li>Repeat X</li>
</ul> -->
</div>
<div class="container lister" style="display:inline-block;float:left;vertical-align:top;padding:0px 0px 0px 10px;">
<ul class="active">
<!--
<li>Work X</li>
<li>Sleep X</li>
<li>Repeat X</li>
-->
</ul>
</div>
</div>
<div style="float:right;vertical-align:top;width:450px;height:800px;background:blue;margin:0 0 0 0;">
New div goes here??
</div>
</section>
<section id="feety">
I believe I exist
</section>
</body>
</html>

Add a class of left column to the left div. Then do this CSS:
.leftcolumn{
width: 50%;
float: left;
}

Try this,
You should remove container class from <div class="lister">
and add below styles,
.container {
width: 50%;
margin: 0px auto;
float:left
}
Demo

How to reduce extra white space on a web page

In this image, on left side there is half side view of website and on the right side there is extra space which I want to omit. Also look at the bottom there is a bar which I don't want.
How do I remove this extra space?
css
/* CSS Document */
body{
padding:0px;
margin:0px;
background-image: url(../images/tile.jpg);
background-repeat: repeat;
}
img{
border:0px;
}
.flt{
float:left;
}
#wh_bg{
width:1000px;
margin:auto;
}
#bg_bg{
width:1000px;
float:left;
margin-left: -40px;
margin-top: -50px;
}
/*top panel starts here*/
.logo{
float:left;
margin:89px 0px 0px -15px;
position:relative;
top: 0px;
left: 0px;
}
#menu{
width:1000px;
float:left;
height:56px;
}
.men_tp{
width:900px;
float:left;
display:inline;
padding:24px 0px 0px 70px;
}
.men_tp a{
float:left;
color:#686666;
font:bold 12px/15px tahoma;
text-decoration:none;
margin-left:25px;
}
/*top panel ends here*/
/*content panel starts here*/
#content{
width:1000px;
float:left;
}
.img_txt{
float:left;
position:relative;
margin:-10px 0px 0px 10px;
}
.img_tp{
width:865px;
float:left;
background:url(../images/img_tp.gif) no-repeat;
height:15px;
}
#con{
width:865px;
float:left;
background:url(../images/part_bg.gif) repeat-y;
}
.con1{
width:560px;
float:left;
display:inline;
padding-left:4px;
padding-top:10px;
}
.con2{
width:280px;
float:left;
padding-left:20px;
display:inline;
padding-top:10px;
}
.txt{
width:560px;
float:left;
margin-top:35px;
color:#515455;
font:12px/18px georgia;
}
.wor{
float:right;
position:relative;
margin:-30px 10px 0px 0px;
}
#part2{
width:1000px;
float:left;
}
#cen{
width:640px;
float:left;
height:237px;
background:#009BD9;
}
.cont{
float:left;
margin:10px 0px 0px 0px;
}
.con_txt{
width:211px;
color:#515455;
float:left;
font:12px/16px georgia;
margin:10px 0px 0px 20px;
}
.abt_txt{
width:550px;
float:left;
margin-top:15px;
color:#FFF;
font:12px/18px georgia;
}
#link{
width:257px;
float:left;
padding:10px 0px 0px 15px;
}
.copy{
width:700px;
float:left;
margin:10px 0px 0px 200px;
color:#D4D0D0;
font:12px/18px georgia;
}
.copy a{ color:#D4D0D0; font:12px/18px georgia; }
/*footer panel ends here*/
.contecnt1
{
width:400px;
height:480px;
margin-top: 100px;
padding-top : 60px;
font-family:Candara;
font-variant:normal;
}
.imgg
{
margin-left:40px;
margin-top:-40px;
}
.imggss
{
margin-left:40px;
margin-top: -100px;
}
.para
{
text-align:justify;
color:Black;
float:left;
width:990px;
padding-left:20px;
}
.img_wrper
{
background-image:url("images/Malaysian-Flag.png");
width :990px;
height:492px;
margin-bottom:10px;
margin-top:150px;
}
.contPers
{
margin-bottom: 10px;
margin-top: 230px;
padding-right: 10px;
margin-left:65px;
}
.contPers1
{
width: 990px;
height: 800px;
margin-bottom: 10px;
margin-top: 230px;
background-color:#E6E6FA;
padding-right: 10px;
}
.contPers2
{
width: 990px;
height: 1100;
margin-bottom: 10px;
margin-top: 210px;
background-color:#E6E6FA;
padding-right: 10px;
margin-left:70px;
}
.pers
{
font-family:Candara;
font-size:18px;
padding-left:18px;
padding-top:30px;
font-weight:normal;
}
.persjbssr
{
font-family: Candara;
font-size: 18px;
padding-left: 18px;
padding-top: 30px;
font-weight: normal;
}
.pes1
{
font-family:Candara;
font-size:20px;
padding-left:18px;
font-weight:normal;
margin-left: -70px;
}
.para1
{
padding-left:18px;
font-size:15px;
font-weight:normal;
font-family:Candara;
text-align:justify;
margin-left:-70px;
width:1000px;
}
.imggs
{
margin-left:10px;
margin-right:40px;
width:100px;
}
.imggs1
{
margin-left:20px;
width:100px;
height:120px
}
.imggs2
{
margin-left:20px;
width:150px;
}
html of index file
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script src="js/MyMenu1.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script type="text/javascript">
<!--
function Text_Newsletter_onclick() {
}
// -->
</script>
<style type="text/css">
.style1
{
width: 100%;
}
</style>
</head>
<body>
<div id="headerrrr">
<ul>
<li>Home</li>
<li>About Us</li>
<li>+603 2201 1665</li>
</ul>
</div>
<div id="wh_bg">
<div id="bg_bg">
<div><img class="logo" src="images/logo.png" alt="" width="320" height="60" /></div>
<div class="social">
<ul>
<li>Connect US :</li>
<li><img src="images/fb.jpg" alt="facebook" /></li>
<li><a><img src="images/linkde.jpg" alt="facebook" /></a></li>
</ul>
</div>
<div id="menu">
<div id="wrap">
<ul class="navbar">
<li>HOME</li>
<li>ABOUT US
<ul id="Ul1">
<li><a id="A1" href="">abc</a></li>
<li>def</li>
<li>xyz</li>
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
<li><a href="">ddd/li>
</ul>
</li>
<li>eee
<ul id="Ul2">
<li><a id="A2" href="">fff</a></li>
<li><a href="">ggg/a></li>
<li>hhh</li>
</ul>
</li>
<li>iii </li>
<li></li>
<li>ghj</li>
<li>
<ul id="subnavlist">
<li class="b"><a id="subcurrent" href="#"></a>
<ul class="c">
<li class="a">A</li>
</ul>
</li>
<li>Data Collection Services</li>
<li>Editing & Proof Reading</li>
</ul>
</li>
<li id="active">CONTACT US</li>
</ul>
</div>
</div>
</div>
<div align="center"><img class="imaeslidr" src="images/Slider Animation/Slider2.gif" alt="" width="1050" height="375" /></div>
<div class="blankSeparator"> </div>
<div class="indxim" style="background-image: url(''); width: 1050px; height: 800px;">
<div class="contecntA ">
<div class="indpara">
<h2 class="hindx">About US</h2>
<p class="paraindex">Read More</a></p>
<h2 class="hindx"></h2>
<p class="paraindex"></p>
<h2 class="hindx">Research</h2>
<p class="paraindex"></p>
</div>
<div class="sidebar">
<h2 class="indxparaz">HOT LINKS</h2>
<ul class="sidebar">
<li>Up Coming Events</li>
<li>Membership</li>
<li>Registration</li>
<li>Our Personnel</li>
<li>Gallery</li>
</ul>
<br /><br />
<h2 class="indxparaz2">Our Personnel</h2>
<span class="con_txtslider"> <img src="images/personeslider.gif" alt="" /> </span></div>
</div>
</div>
<div class="blankSeparator"> </div>
<div class="footer22">
<h2 class="footerhead">Newsletter</h2>
<hr /><input id="Text1" class="footertxt" type="text" /><br /> <input id="Submit1" class="footerbutton" type="submit" value="submit" />
<div>
<h2 class="footerhead1">UpComing Events</h2>
<div class="foopara2"><a class="eventss" href="Upcomngevents.html">Events Available</a></div>
</div>
<h2 class="footerhead2">Contact Us</h2>
<div class="foopara">Call now to find out how: +603 2201 1665 <br /><br /> <a class="email" href="https://secure.ipage.com/secure/login.bml" target="_blank"> <img src="images/email-login.png" alt="signin" /> </a></div>
<br /><br /><br /><hr />
<div class="ffpara">
<p class="ffpara">© Copyright 2014, </p>
</div>
<div class="ffpara2">
<p class="ffpara2">T: E:</p>
</div>
</div>
</div>
</body>
</html>

ok i notice it where is mistake in menu bar when i remove width=140% it is fine and extra space is gone but when i add width=140% it occur extra space and also menu look like this see this link
image
menu bar code
.wrap {
width: 100%; /* Spans the width of the page */
height: 40px;
margin: 0; /* Ensures there is no space between sides of the screen and the menu */
z-index: 99; /* Makes sure that your menu remains on top of other page elements */
position: relative;
background-color: #366b82;
}
.navbar {
height: 50px;
border-right: 1px solid #54879d;
margin: 0px;
padding: 0px;
position:absolute;
margin-left:40px;
}
.navbar li {
height: auto;
width: 131px; /* Each menu item is 150px wide */
float: left; /* This lines up the menu items horizontally */
text-align: center; /* All text is placed in the center of the box */
list-style: none; /* Removes the default styling (bullets) for the list */
font: normal bold 12px/1.2em Arial, Verdana, Helvetica;
padding: 0;
margin: 0;
background-color: #366b82;
}
.navbar a {
padding: 18px 0; /* Adds a padding on the top and bottom so the text appears centered vertically */
border-left: 1px solid #54879d; /* Creates a border in a slightly lighter shade of blue than the background. Combined with the right border, this creates a nice effect. */
border-right: 1px solid #1f5065; /* Creates a border in a slightly darker shade of blue than the background. Combined with the left border, this creates a nice effect. */
text-decoration: none; /* Removes the default hyperlink styling. */
color: white; /* Text color is white */
display: block;
}
.navbar li:hover, a:hover {background-color: #54879d;}
.navbar li ul {
display: none; /* Hides the drop-down menu */
height: auto;
margin: 0; /* Aligns drop-down box underneath the menu item */
padding: 0; /* Aligns drop-down box underneath the menu item */
}
.navbar li:hover ul {
display: block; /* Displays the drop-down box when the menu item is hovered over */
}
.navbar li ul li {background-color: #54879d;}
.navbar li ul li a {
border-left: 1px solid #1f5065;
border-right: 1px solid #1f5065;
border-top: 1px solid #74a3b7;
border-bottom: 1px solid #1f5065;
}
.navbar li ul li a:hover {background-color: #366b82;}
.navbar li ul li ul li {
margin-top:-50px;
margin-left:130px;
display:block;
}

Horizontal nav menu with submenus

I have this nav menu:
http://jsfiddle.net/laziale/T45tD/4/
I want to know how I can fix the menu that the nav menu will be expandable with submenus. I entered some sample data.
Here is the source code:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link type="text/css" rel="stylesheet" href="App_Themes/Main/style.css" />
<link type="text/css" rel="stylesheet" href="App_Themes/Main/reset.css" />
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div class="pagetop">
<div class="head pagesize">
<div class="head_top">
<div class="topbuts">
<ul class="clear">
</ul>
</div>
<div class="user clear">
<span class="user-detail">
</span>
</div>
<div class="logo clear">
<a href="#" title="Home">
<img src="Images/logo.jpg" class="picture" />
<span class="textlogo">
</span>
</a>
</div>
</div>
<div class="menu">
<ul class="clear">
<li class="active">Client
<ul>
<li class="subNav">Client Summary</li>
</ul>
</li>
<li>Agent
<ul>
<li class="subNav">Agent Summary
<ul>
<li class="subNav">Link1y</li>
<li class="subNav">Link2</li>
</ul></li>
</ul>
</li>
<li>System Utility
<ul>
<li class="subNav">Link1
<li class="subNav">Link2
<li class="subNav">Link3
</ul>
</li>
<li>Report</li>
<li>Maintenance</li>
<li>About Us</li>
<li>Contact Us</li>
</ul>
</div>
</div>
</div>
<div>
</div>
</form>
</body>
</html>
and the css:
body {
min-width:1000px;
text-align:center;
margin:0px;
font-family:Arial;
font-size:12px;
color:#666666;
background:#8D8D8D;
}
.pagetop {
width:100%;
min-width:1000px;
background-color: #333333;
border-bottom: 4px solid #007FAA;
position:relative;
z-index:100;
min-height:149px;
}
.head_top {
position:relative;
min-height:114px;
}
.topbuts {
position:absolute;
top:0px;
right:0px;
}
.topbuts ul {
float:right;
}
.topbuts li {
float:left;
margin-left:2px;
font-size:11px;
font-weight: bold;
}
.topbuts li a {
background:#007FAA;
text-decoration:none;
display:block;
color:#FFFFFF;
line-height:16px;
padding:1px 12px 2px 12px;
}
ol ul {
list-style:none;
}
.head {
padding:0px;
}
.pagesize {
width:1000px;
margin: 0px auto;
text-align:left;
}
.user {
clear:both;
float:right;
padding-top:27px;
}
.user-detail {
display: block;
float:right;
text-align:right;
}
.user-detail .name {
display: block;
line-height:normal;
text-align:left;
float:right;
font-size:18px;color:#FFFFFF;
padding:2px 0px 7px 0px;
}
.user-detail .text {
color: #bbbbbb;
clear:both;
font-size:11px;
line-height:18px;
color:#FFFFFF;
display:block;
}
.logo {
padding-top:20px;
}
.logo a {
text-decoration:none;
}
.logo .picture {
float:left;
margin-right:10px;
}
.logo .textlogo {
float:left;
}
.logo .title {
display:block;
font-family:Arial;
font-size:20px;
color:#FFFFFF;
font-weight: bold;
margin-top:5px;
letter-spacing: -0.02em;
}
.logo .text {
display:block;
font-weight: bold;
color: #BBBBBB;
position:relative;
top: -2px;
}
.menu ul {
font-size:13px;
}
.menu li {
float:left;
margin-right:3px;
padding-bottom:5px;
position:relative;
}
.menu li .active a {
background: #FFFFFF;
color: #333333;
text-shadow: 1px 1px 1px #BBBBBB;
}
.menu li a {
display:block;
line-height:16px;
padding: 7px 15px 7px 5px;
color: #FFFFFF;
text-decoration:none;
font-weight:bold;
text-shadow: 1px 1px 1px #333333;
-moz-border-radius: 3px 3px 3px 3px;
-webkit-border-radius: 3px 3px 3px 3px;
border-radius: 3px 3px 3px 3px;
background:url('..images/button_glas1.png') center center repeat-x #555555;
}
a {
color: #006577;
text-decoration:none;
}

You can use the superfish jQuery plugin.
Here is a demo

Either you can use javascript and hide all unwanted elements until you hover the right menu element, either you do it with CSS using something like this:
#navmenu .submenu{
display:none; /* dosen't show sub menus */
overflow:visible; /* shows overflow */
}
#navmenu li:hover > .submenu{ /* when you hover an li element change children following settings */
display:block; /* display elements */
}
HTML code example that works:
<div id="navmenu">
<ul>
<li>Réalisations
<ul class="submenu">
<li>Web</li>
<li>T-shirt</li>
<li>Autres prestations</li>
</ul>
</li>
<li> Galeries
<ul class="submenu gallery">
<li>Boston</li>
<li>Brig</li>
<li>Fleurs</li>
<li>Grèce</li>
<li>Nocturne</li>
<li>Noir&blanc</li>
<li>Paris</li>
<li>Portrait</li>
<li>Perspective</li>
</ul>
</li>
<li>News</li>
<li>Contact</li>
</ul>
There are many tutorials on the web for more examples ;)