mindapolis Posted December 3, 2013 Share Posted 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> Quote Link to comment https://forums.phpfreaks.com/topic/284494-background-color-of-maincontent/ Share on other sites More sharing options...
dalecosp Posted December 3, 2013 Share Posted December 3, 2013 Because you have "width: 700px;" on that element, maybe? Quote Link to comment https://forums.phpfreaks.com/topic/284494-background-color-of-maincontent/#findComment-1461150 Share on other sites More sharing options...
WebOutGateway Posted August 7, 2014 Share Posted 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. Quote Link to comment https://forums.phpfreaks.com/topic/284494-background-color-of-maincontent/#findComment-1487069 Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.