Question

Take a look at my page here:

REMOVED

I have a big red div taking up the entire content area. I plan on having it stretch across the entire page horizontally. I’m going to be using a carousel effect to allow my clients to sign up for an appointment one step at a time. The div is a child of another div but I need it to be wider than it. The center content area is a static width and is centered with margin:auto;. Is there a way to make my child div as wide as the whole page while hopefully only using css?

Answer 1

**<div id="servicesteps"> </div>**

is the red div just remove it from your <div clas="shadow" id="content">

and put it above footer div and it should work

your final body tag will look something like this

    <div id="header"><div id="headpadding"></div><a href="index.html"><div class="headbutton noselect">Home</div></a><a href="services.html"><div class="headbutton noselect">Services &amp; Pricing</div></a><a href="details.html"><div class="headbutton noselect">service details</div></a><a href="get.html"><div class="headbutton noselect">Request Service</div></a><div class="headbutton noselect">Contact</div></div>
    <div id="content" clas="shadow"><div class="noselect" id="logo"></div><div id="buttonarea"><a style="display:table-cell;" href="details.html"><div class="noselect greenbutton"><span class="buttontitle">GET THE DETAILS</span>Learn about what we do before you come over!</div></a><span style="width:51px;display:table-cell;">&nbsp;</span><a style="display:table-cell;" href="get.html"><div class="noselect bluebutton "><span class="buttontitle">REQUEST SERVICE</span>Get your computer serviced in the next 48 hours!</div></a></div><!-- InstanceBeginEditable name="content" -->
    <div class="fold noselect"><span style="background-color:#4F69FF;">Request Service</span></div>
    <table id="currentstatus">

    </table>

    <!-- InstanceEndEditable --></div>
<div id="servicesteps">

    </div>
<div id="footer">Dade Lamkins (DadeFixMyComputer.com) Copyright 2011.</div>