AboutPricingCommunityTeamsStart Free TrialLog in
Avatar of northernknight
northernknight
Flag for United States of America asked on

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
HTMLWeb Development
Avatar of undefined
Last Comment
northernknight
8/22/2022 - Mon
Russ Suter
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.
ASKER CERTIFIED SOLUTION
Tamati Iro
THIS SOLUTION ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
See Pricing Options
Start Free Trial
GET A PERSONALIZED SOLUTION
Ask your own question & get feedback from real experts
Find out why thousands trust the EE community with their toughest problems.
northernknight
ASKER
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

SOLUTION
Russ Suter
THIS SOLUTION ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
See Pricing Options
Start Free Trial
⚡ FREE TRIAL OFFER
Try out a week of full access for free.
Find out why thousands trust the EE community with their toughest problems.
Russ Suter
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.
Experts Exchange has (a) saved my job multiple times, (b) saved me hours, days, and even weeks of work, and often (c) makes me look like a superhero! This place is MAGIC!
Walt Forbes
northernknight
ASKER
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

northernknight
ASKER
Thank you for your help.  I agree, this site needs a new build.
Plans and Pricing
Resources
Product
Podcasts
Careers
Contact Us
Teams
Certified Expert Program
Credly Partnership
Udemy Partnership
Privacy Policy
Terms of Use

© 1996-2023 Experts Exchange, LLC. All rights reserved. Covered by US Patent