HTML header image not same width of content.

northernknight
northernknight used Ask the Experts™
on
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
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Russ SuterSenior Software Developer

Commented:
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.
Systems Developer
Commented:
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.

Author

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

Ensure you’re charging the right price for your IT

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

Russ SuterSenior Software Developer
Commented:
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...
Russ SuterSenior Software Developer

Commented:
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.

Author

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

Author

Commented:
Thank you for your help.  I agree, this site needs a new build.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial