Solved

CSS - Borders won't line up

Posted on 2014-02-20
6
734 Views
Last Modified: 2014-02-20
Having an issue I'm not sure can be fixed. Hoping someone here can help me.

When I style the outter DIV's with:
border-left: 1px solid #000;

Open in new window


the lines on the left don't line up:

left-borders-not-lined-up
I'll try different pixel sizes and stuff but it doesn't seem to fix it.
Something I should change?


HTML Code:
<html>
<head>
	<title>Website</title>
	<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>

<div id="container">
	<div id="header">
		<h1>Website</h1>
	</div>
	<div id="navigation">
		<ul>
			<li><a href="index.html">Home</a></li>
			<li><a href="#">Residential</a></li>
			<li><a href="#">Business</a></li>
			<li><a href="#">Training & Consulting</a></li>
			<li><a href="#">Store</a></li>
		</ul>
	</div>
	<div id="content-container">
		<div id="content">
			<h2>
				Welcome to computer support. How can I help you?
			</h2>
			
			<p>
			<a class="helpwizard" href="#">
			<u>I am residential customer in need of computer help</u><i></i>
			</a>
			</p>
			
			<p>
			<a class="helpwizard" href="#">
			<u>I need IT services for my business</u><i></i>
			</a>
			</p>
			
			<p>
			<a class="helpwizard" href="dellhw/dellhw.html">
			<u>I want to buy a new computer</u><i></i>
			</a>
			</p>

			</div>
		<div id="aside">
			<h3>
				Top Articles & Videos
			</h3>
			<p>
			<a href="#">article 1 </a> <br>
			<a href="#">article 2 </a> <br>
			<a href="#">article 3</a> <br>
			<a href="#">article 4 </a> <br> 
				
			</p>


		</div>
		<div id="footer">
			
		</div>
	</div>
</div>


</body>
</html>

Open in new window


CSS Style Code:
body {
/* Note: This gradient may render differently in browsers that don't support the unprefixed gradient syntax */
/* IE10 Consumer Preview */ 
background-image: -ms-linear-gradient(top left, #3d3d3d 0%, #00adee 100%);
/* Mozilla Firefox */ 
background-image: -moz-linear-gradient(top left, #3d3d3d 0%, #00adee 100%);
/* Opera */ 
background-image: -o-linear-gradient(top left, #3d3d3d 0%, #00adee 100%);
/* Webkit (Safari/Chrome 10) */ 
background-image: -webkit-gradient(linear, left top, right bottom, color-stop(0, #3d3d3d), color-stop(1, #00adee));
/* Webkit (Chrome 11+) */ 
background-image: -webkit-linear-gradient(top left, #3d3d3d 0%, #00adee 100%);
/* W3C Markup, IE10 Release Preview */ 
background-image: linear-gradient(to bottom right, #3d3d3d 0%, #00adee 100%);
}

#container
{
	margin: 0 auto;
	margin-top:20px;
	width: 900px;
    background: #fff;
		border-left: 1px solid #000;
border-right: 1px solid #000;
}

#header
{
height: 100px;

	padding: 20px;
}

#header h1 {
margin: 0;
color: #7b9d3c;
background: url(logo.png) top left no-repeat;
width: 470px;
height: 419px;
text-indent: -9999px;

}

#navigation
{
	float: left;
	width: 900px;
	background: #cccccc;
	border-left: 1px solid #000;
	border-right: 1px solid #000;
}

#navigation ul
{
	margin: 0;
	padding: 0;
	
}

#navigation ul li
{
	list-style-type: none;
	display: inline;
}

#navigation li a
{
	display: block;
	float: left;
	padding: 5px 10px;
	color: #000;
	text-decoration: none;
	border-right: 1px solid #fff;
}

#navigation li a:hover {
background: #000; 
color: #6fd8ff;


}

#content-container
{
	float: left;
	width: 900px;
	background: #fff url(/wp-content/uploads/layout-two-fixed-background.gif) repeat-y 100% 0;
	font-family:helvetica,arial,sans-serif;
	border-left: 1px solid #000;
	border-right: 1px solid #000;
}

#content
{
	clear: left;
	float: left;
	width: 560px;
	padding: 20px 0;
	margin: 0 0 0 30px;
	display: inline;
	
}

#content h2 {
margin: 0;
color: #00adee;
}

#aside
{
	float: right;
	width: 240px;
	padding: 20px 0;
	margin: 0 20px 0 0;
	display: inline;
}

#aside a
{
	display: block;

	padding: 5px 10px;
	color: #000;
	text-decoration: none;
	border-right: 1px solid #fff;
}

#aside a:hover {
background: #e1f7ff; 


}

#aside h3 { margin: 0; }

a.helpwizard:link {
color:#000;
display: block;
background-color: #e1f7ff;
text-decoration: none;
text-decoration: strong;
}

a.helpwizard:hover {
background-color: #00adee;
text-decoration: none;
text-decoration: strong;
color: #000;
}

a.helpwizard:visited {
color:#000;
display: block;
text-decoration: none;
text-decoration: strong;
}

#footer
{
	clear: both;
	background: #ccc;
	text-align: right;
	padding: 20px;
	height: 1%;
	
}

a.button {
   display:inline-block;
   width: 122;
   height: 102px; 
   background-position: left top;
   background-repeat: no-repeat;
   margin: 5px;
   color: #000;
   text-align: left;
}

a.button:hover {

background: rgba(158, 180, 82, .5);
}

a.button#battery { background-image: url('dellhw/images/dell-battery.png'); }
a.button#extmonitor { background-image: url('dellhw/images/dell-external-monitor.png'); }

Open in new window

0
Comment
Question by:garryshape
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 3
6 Comments
 
LVL 58

Accepted Solution

by:
Gary earned 500 total points
ID: 39873855
Add overflow:auto to your container and remove the left and right border from the other div's
0
 

Author Comment

by:garryshape
ID: 39873976
Cool thanks, I'm trying it out

Only thing is it adds scrollbars to the container after that

Should I increase the with of each div?
0
 
LVL 58

Expert Comment

by:Gary
ID: 39874022
Change the widths on the inner div's to 100% and not 900px
0
Increase your protection from Zero Day threats!

Running two Antivirus' is never a good idea.
Taking advantage of Multiple Security layers on the other hand can often save your hide.
See which top notch security software brands have been proven to happily coexist together.
Reduce your chances of becoming a statistic.

 

Author Comment

by:garryshape
ID: 39874060
Sorry I'm dumb, I put overflow: scroll; insetad of auto.

Looks great! TY
0
 
LVL 58

Expert Comment

by:Gary
ID: 39874066
That makes sense as I wasn't seeing any scrolling.
0
 

Author Closing Comment

by:garryshape
ID: 39874067
Thx So Much
It Worked
0

Featured Post

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

710 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question