HTML header image not same width of content.

I am working on an outdated html website, http://thelegalprocessgroup.com/index.htm  It is an expandable website and with wider screens the content ends up getting wider than the header.  The header image is currently 1260 wide.

Is there a way to stop the content from spreading farther right than the image?
PI.JPG
LVL 1
northernknightAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Russ SuterCommented:
Quick and dirty...

You could add style="max-width: 1260px;" to the <div id="page_content"> element.

That would fix your immediate issue. If it were me working on this website I'd redesign the whole thing with a responsive design methodology.
0
Tamati IroSystems DeveloperCommented:
I would also redesign the whole thing for responsive design if given time to, but otherwise
I reckon add a <div class="container"> to wrap the whole content(including the header image). Then add to css
.container{
max-width:1260px;
margin-left:auto;
margin-right:auto;
}

This way if the page is viewed on a larger screen the content(including the header image) will be centered and at the same time stop the content from spreading out. hope it helps.
1

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
northernknightAuthor Commented:
Thanks for the info.  I used the container max width.

A couple problems I have now is:
1. The masthead bottom border drops down below the masthead
2. The footer is missing.  Not sure if I changed something to mess up the footer when I was trying to fix the border issue.
Here is the master page code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html dir="ltr" xmlns="http://www.w3.org/1999/xhtml">



<head>

<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />

<!-- #BeginEditable "doctitle" -->

<title></title>

<!-- #EndEditable -->

<link href="styles/style2.css" rel="stylesheet" type="text/css" />

<style type="text/css">

.style1 {
	font-size: medium;
	color: #000000;
}

.style2 {

	font-size: small;

	color: #C0C0C0;

}

.style3 {

	font-size: medium;

	color: #FBAA33;

	text-align: center;

}

.style4 {
	color: #000000;
}

.style7 {

	text-align: center;

}

.auto-style1 {
	font-size: small;
	color: #000066;
}

</style>

</head>



<script type="text/javascript" src="https://s3.amazonaws.com/static.dudamobile.com/DM_redirect.js"></script> 

<script type="text/javascript">DM_redirect("http://mobile.dudamobile.com/site/thelegalprocessgroup1");</script>



<body>



<!-- Begin Container -->
<div class="container">

<div id="container">

	<!-- Begin Masthead -->

	<div id="masthead" class="style7">

		<img alt="Private Investigations" height="236" src="headernew4.jpg" width="1260" />

		<p>&nbsp;</p>

	</div>

	<!-- End Masthead -->

	<!-- Begin Page Content -->
	

	<div id="page_content" style="left: 0px; top: 4px; height: 166px">

		<!-- Begin Sidebar -->

		<div id="sidebar" style="left: -1px; top: 64px; width: 225px; height: 738px;">

			<ul>

				<li><a href="index.htm">Home</a></li>

				<li><a href="services/services.htm">PI Services</a></li>

				<li><a href="processserving/processserving.htm">Process Serving</a></li>

				<li><a href="infidelity/infidelity.htm">Infidelity</a></li>



				<li><a href="locate/locate.htm">Locate People</a></li>

				<li><a href="about/about.htm">About Us</a></li>



				<li><a href="contact/contact.htm">Contact Us</a></li>

			</ul>

		</div>

		<!-- End Sidebar -->

		<!-- Begin Content -->

		<div id="content">

			<!-- #BeginEditable "content" -->

			<h2>

			<br />

			Headline 2</h2>

			<p>insert content here</p>

			<!-- #EndEditable --></div>

		<!-- End Content --></div>

	<div class="style7">

	<!-- End Page Content -->

		<span class="style4">Website designed and hosted by 

		</span><a href="http://www.lakecountywebsites.com" target="_blank">

		<img alt="Lake County Websites" height="35" longdesc="web design and hosting in Lake County California" src="logo791400_mdcrop.jpg" width="227" /></a><!-- Begin Footer --></div>

	<div id="footer" class="style3" style="height: 151px">

		<a href="default.htm"><span class="style1">Home</span></a><span class="style1"> |

		</span>

		<a href="services/services.htm"><span class="style1">PI Services</span></a><span class="style1"> |

		</span>

		<a href="processserving/processserving.htm"><span class="style1">Process Serving</span></a><span class="style1"> |

		</span>

		<a href="infidelity/infidelity.htm"><span class="style1">Infidelity-Cheating</span></a><span class="style1"> |

		</span>

		<a href="locate/locate.htm"><span class="style1">Locate People</span></a><span class="style1"> |

		</span>

		<a href="about/about.htm"><span class="style1">About Us</span></a><span class="style1"> |

		</span>



        <a href="contact/contact.htm"><span class="style1">Contact Us</span></a><span class="style1"> |

		

		<a href="http://www.thelegalprocessgroup.com/site_map/site_map.htm" class="style1">Site Map</a></span><br class="style1" />

		<span class="auto-style1">Copyright © 2009 TheLegalProcessGroup. All Rights Reserved.<br />

		</span></div>
	
</div>
	<!-- End Footer --></div>

<!-- End Container -->

</body>
<!-- #EndTemplate -->

</html>

Open in new window

0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

Russ SuterCommented:
Your masthead bottom is too tall because you have an extra HTML element in there.

<p>&nbsp;</p>

Delete that and it will look fine.

I'm looking at the footer now...
1
Russ SuterCommented:
Your footer isn't missing. It's just positioned wrong. Move your footer so it's inside the content div and it should look roughly correct.

This site really could use some help with its layout but it looks a heck of a lot better now than when you started.
0
northernknightAuthor Commented:
Thanks Russ,

I tried moving it but it didn't seem to work.  I seem to have some pages that show the footer and others including the home page that are getting cut off at the bottom.  I have included the css in case something there is causing it.
@import url("layout.css");
body {
      background: #808080;
      font-family: Arial, Helvetica, sans-serif;
      font-size: medium;
      color: #C0C0C0;
      background-color: #808080;
}
#container {
      background-color: #A9A9A9;
      border-left: thin #000000 solid;
      border-right: thin #000000 solid;

      background: #A9A9A9;
      width: 100%;
      overflow:hidden
}

#masthead {

      

      border-bottom: medium #FBAA33 ridge;

      overflow: auto;

      text-align: right;

      background-color: #A9A9A9;

      border-top-color: #FBAA33;

      border-top-style: ridge;

      border-top-width: medium;

}
.container{
 max-width:1260px;
 margin-left:auto;
 margin-right:auto;
 }

#page_content {

      position: relative;

}

#sidebar {

      position: relative;

      float: left;

      width: 200px;

      background-color: #516272;

      top: 45px;

}

#content {
      margin-left: 220px;
      padding: 10px;
      background-color: #A9A9A9;
      min-height: 1px;
      color: #000000;
}

#footer {

      background-color: #A9A9A9;

      background: #A9A9A9;

      font: medium serif;

      clear: both;

      width: 99%;

      overflow: auto;

      padding-top: 1%;

      padding-right: 0;

      padding-bottom: 1%;

      padding-left: 1%;

}

#masthead img {

      float: left;

}

#masthead p {
      font-size: small;
      margin: 0;
      margin-right: 1%;
}
h1,h2,h3,h4,h5,h6 {
      font-family: Arial, Helvetica, sans-serif;
      color: #000000;
}
/* Styles for Navigation */
#sidebar ul {
      list-style-type: none;
      width: 100%;
      display: block;
      margin: 0;
      padding: 0;
}
#sidebar li {
      display: block;
      border: thin #FBAA33 solid;
}
#sidebar a {
      font-weight: bold;
      font-size: x-large;
      color: #FBAA35;
      padding: 15%;
      display: block;
      border-bottom: thin #441D16 solid;
}
#sidebar a:hover {
      font-weight: bold;
      font-size: x-large;
      color: #393939;
      border-bottom: thin #441D16 solid;
      background-color: #FBAA33;
}
/* Styles for Footer */
#footer p {
      font-size: medium;
}
#footer a {
      color: #000000;
      text-decoration: underline;
}
#footer a:hover {
      color: #393939;
      text-decoration: none;
}
a {
      color: #000066;
      text-decoration: underline;
}
a:hover {
      color: #78a;
      text-decoration: underline;
}
.style_bold {
      font-weight: bold;
}
.style_italic {
      font-style: italic;
}
@import url("layout.css");
body {
	background: #808080;
	font-family: Arial, Helvetica, sans-serif;
	font-size: medium;
	color: #C0C0C0;
	background-color: #808080;
}
#container {
	background-color: #A9A9A9;
	border-left: thin #000000 solid;
	border-right: thin #000000 solid;

	background: #A9A9A9;
	width: 100%;
	overflow:hidden
}

#masthead {

	

	border-bottom: medium #FBAA33 ridge;

	overflow: auto;

	text-align: right;

	background-color: #A9A9A9;

	border-top-color: #FBAA33;

	border-top-style: ridge;

	border-top-width: medium;

}
.container{
 max-width:1260px;
 margin-left:auto;
 margin-right:auto;
 }

#page_content {

	position: relative;

}

#sidebar {

	position: relative;

	float: left;

	width: 200px;

	background-color: #516272;

	top: 45px;

}

#content {
	margin-left: 220px;
	padding: 10px;
	background-color: #A9A9A9;
	min-height: 1px;
	color: #000000;
}

#footer {

	background-color: #A9A9A9;

	background: #A9A9A9;

	font: medium serif;

	clear: both;

	width: 99%;

	overflow: auto;

	padding-top: 1%;

	padding-right: 0;

	padding-bottom: 1%;

	padding-left: 1%;

}

#masthead img {

	float: left;

}

#masthead p {
	font-size: small;
	margin: 0;
	margin-right: 1%;
}
h1,h2,h3,h4,h5,h6 {
	font-family: Arial, Helvetica, sans-serif;
	color: #000000;
}
/* Styles for Navigation */
#sidebar ul {
	list-style-type: none;
	width: 100%;
	display: block;
	margin: 0;
	padding: 0;
}
#sidebar li {
	display: block;
	border: thin #FBAA33 solid;
}
#sidebar a {
	font-weight: bold;
	font-size: x-large;
	color: #FBAA35;
	padding: 15%;
	display: block;
	border-bottom: thin #441D16 solid;
}
#sidebar a:hover {
	font-weight: bold;
	font-size: x-large;
	color: #393939;
	border-bottom: thin #441D16 solid;
	background-color: #FBAA33;
}
/* Styles for Footer */
#footer p {
	font-size: medium;
}
#footer a {
	color: #000000;
	text-decoration: underline;
}
#footer a:hover {
	color: #393939;
	text-decoration: none;
}
a {
	color: #000066;
	text-decoration: underline;
}
a:hover {
	color: #78a;
	text-decoration: underline;
}
.style_bold {
	font-weight: bold;
}
.style_italic {
	font-style: italic;
}

Open in new window

0
northernknightAuthor Commented:
Thank you for your help.  I agree, this site needs a new build.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
HTML

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.