2 replies [Last post]
ginger
Offline
newbie
Last seen: 2 years 22 weeks ago
Joined: 2012-02-19
Posts: 2
Points: 3

what css do i need so that when my wrap (content) div gets too long it doesn't over lap my footer div?

/* General
--------------------------------------------------*/
#wrap
{
width: 980px;
margin-right: auto;
margin-left: auto;
height:100%;
margin-top:100px;
clear:both;
position:relative;
}
#ContentPageContainer
{
height:100%;
clear:both;
}
h1
{
display: none;
}

#fadeshow1
{
display: block;
height: 405px;
width: 980px;
}
#footer
{
width: 980px;
margin-right: auto;
margin-left: auto;
padding-top: 20px;
position: relative;
clear: both;
color:White;
}

#lcol
{
width: 700px;
float: left;
height: 405px;
margin-bottom: 3px;

}
#rcol
{

background-color: #000000;
float: left;
height: 300px;
margin-top: 27px;
width: 240px;
color: #FFFFFF;
margin-bottom: 3px;
text-align:left;
}

#rcol p
{
font-size: 12px;
line-height: 17px;
padding-bottom: 12px;
}
#lcol.v2, #rcol.v2
{
width: 440px;
position: relative;
}

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 4 hours 58 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9148
Points: 3132

Welcome to the forum

Without the page's markup, we can't know on what the css rules are working. Please read the sticky posts listed at the top of the forum for the best ways to help us help you.

cheers,

gary

Unplanned code results in a tangled wad of brain-cramping confusion.

There are enough html & css demos and tutorials to be interesting. Please visit.

ginger
Offline
newbie
Last seen: 2 years 22 weeks ago
Joined: 2012-02-19
Posts: 2
Points: 3

Thanks for getting back.

Thanks for getting back. Here's some mark-up. Note that I am working on an asp.net project

Masterpage:

<div id="ContentPageContainer">
                <asp:ContentPlaceHolder ID="PageContent" runat="server">
                    <div id="lcol">
                        left column</div>
                    <div id="rcol">
                        right column</div>
                    <div id="portfolioContainer">
                        right column</div>
                </asp:ContentPlaceHolder>
            </div>
            <div class="hrhome">
                <hr />
            </div>
        </div>
    </asp:ContentPlaceHolder>
        <div class="clear">

HomePage

<div id="slider">
                <ul id="sliderContent">
                    <li class="sliderImage"><a href="">
                        <img src="example_images/wide/1.jpg" alt="1" /></a> <span class="bottom"><strong>Title
                            text 1</strong>
                            <br />
                            Content text...</span>
                    </li>
 
                    <div class="clear sliderImage">
                    </div>
                </ul>
            </div>

CSS for slider:

#slider
{
width: 680px; /* Same as image width */
height: 400px;
position: relative;
overflow: hidden;
z-index: -1;
margin-top:30px;
background-color:black;
}

.sliderImage
{
float: left;
position: relative;
display: none;
}
.sliderImage span
{
position: absolute;
font: 10px/15px Arial, Helvetica, sans-serif;
padding: 10px 13px;
width: 680px;
background-color: #000;
filter: alpha(opacity=70);
-moz-opacity: 0.7;
-khtml-opacity: 0.7;
opacity: 0.7;
color: #fff;
display: none;
}
.clear
{
clear: both;
}
.sliderImage span strong
{
font-size: 14px;
}
.top
{
top: 0;
left: 0;
}
.bottom
{
bottom: 0;
left: 0;
}
ul
{
list-style-type: none;
}