background color of mainContent

mindapolis · December 3, 2013

Hi, on http://anothermileministries.net/test1.php why doesn't the mainContent div cover the whole right side of the screen?

<?php
require_once('Ftest.php');
?>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
body {
	width:100%;
	margin:0;
}
a:link {
	color: #CDB093; 
}
a:hover {
	color:#735435; 
}
header {
		background-color: #735435;
} 
aside {
	float:left;
	background-color:#9D7348; 
	padding-bottom:  10%; 
	padding-left:  2%; 
	padding-top:  1%; 
}
#logo {
	float: left;
}
#lonPic{
	float: right;
	padding-top:2%;
	padding-right:2%; 
}
#headerAdjust {
	clear:both;
}
#photos {
	width: 400px; 
	margin-left:auto; 
	margin-right:auto; 
}

nav {
	padding-top:2%;
	padding-bottom:10%;
}
#mainContent {
	background-color: #e6dace;
	width:700px; 
	margin-left:auto;
	margin-right:auto;
}
#speakingEngagements {
	background-color: #BA9169; 
	height:20%;
	width:90%;
	border-color:#033; 
	border-style:  solid;
}
footer img {
	clear:both;
	width:100%;
	height:200px;
	background-image: url(assets/road.jpg);
	background-repeat: no-repeat;
	-webkit-background-size: cover;
	-moz-background-size: contain;
	background-size: cover;
}
	</style>
</head>

<body>
<header><!-- html5 tag<header>-->
<div id="logo">
  <img src="assets/logo.jpg" width="439" height="135" />
</div>

<div  id="lonPic">
<img src="assets/jenn2.jpg" width="100" height="144" /></div>
<div id="headerAdjust"></div>
<?php photos(); ?> 
</header>
<aside>  
	<nav>  
    	<a href="test1.php" tabindex="1" accesskey="h">Home</a><br />  
        <a href="aboutMe.php" tabindex="2" accesskey="a">About Me</a><br />  
        <a href="events.php" tabindex="3" accesskey="u">Upcoming Events</a><br />  
		<a href="contact.php" tabindex="4" accesskey="c">Contact Me</a>
    </nav>
<div id="speakingEngagements">
Upcoming Speaking Engagements <br />
upcoming <br />
events  <br />
will <br />
go <br />
here 
</div>
</aside>
<div id="mainContent">
<video width="640" height="360" controls preload="autoplay">
    <source src="assets/barbie.mp4" type="video/mp4" preload="autoplay">
    <source src="assets/barbie.ogv" type="video/ogg" preload="autoplay">
  <object type="application/x-shockwave-flash" data="/mov/player.swf"  
width="320" height="240" preload="autoplay">  
        <source src="assets/.m_barbie.mp4" type="video/mp4" preload="autoplay">
    <param name="allowfullscreen" value="true" preload="autoplay">  
    <param name="allowscriptaccess" value="always" preload="autoplay">  
    <param name="flashvars" value="file=/mov/scene.mp4" preload="autoplay">  
    <!--[if IE]><param name="movie" value="/mov/player.swf"><![endif]-->  
    <img src="/img/scene-preview.jpg" width="320" height="240" alt="Video">  
    <p>Sorry but your browser doesn't support HTML5 video.</p>  
  </object>  
</video>
</div>
<footer>
 <img src="assets/road.jpg" alt="road">
</footer>
</body>
</html>

dalecosp · December 3, 2013

Because you have "width: 700px;" on that element, maybe?

WebOutGateway · August 7, 2014

Hi, mindapolis!

What dalescosp have said is right. You have set a specific width that's why it doesn't cover the whole right side. Try to set the width of the #mainContent to auto.

#mainContent
{
  width: auto;
}

I hope this helps. Thank you.

Sign In

background color of mainContent

Recommended Posts

mindapolis

Link to comment

Share on other sites

dalecosp

Link to comment

Share on other sites

WebOutGateway

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information