2 replies [Last post]
ginger
Offline
newbie
Last seen: 4 years 27 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: 1 hour 50 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9580
Points: 3646

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

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

ginger
Offline
newbie
Last seen: 4 years 27 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;
}