Solved

CSS - Borders won't line up

Posted on 2014-02-20
6
629 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
  • 3
  • 3
6 Comments
 
LVL 58

Accepted Solution

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

Author Comment

by:garryshape
Comment Utility
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
Comment Utility
Change the widths on the inner div's to 100% and not 900px
0
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 

Author Comment

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

Looks great! TY
0
 
LVL 58

Expert Comment

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

Author Closing Comment

by:garryshape
Comment Utility
Thx So Much
It Worked
0

Featured Post

Enabling OSINT in Activity Based Intelligence

Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

Join & Write a Comment

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.
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
This Micro Tutorial will demonstrate how nuggets on the Web are formatted by using Chrome Developer Tools. These tools would not only view the site's CSS but it can also modify it and save the CSS to use on your own site.

762 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

Need Help in Real-Time?

Connect with top rated Experts

8 Experts available now in Live!

Get 1:1 Help Now