• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 252
  • Last Modified:

Control text not staying inside the container div

I use css liquid layouts for the websites that I do. I have an app that allows a visitor to sign up for an upcoming event. That form has a container div with another div with a background image, then a unnumbered list with several items.

The page max-width is set to 1048px.

When the page is resized the background image does not resize with the rest of page which causes the list items to eventually overflow the background image.

CSS is directly after aspx page:
  <div class="FlamingHotSponsorWrapperDiv">
                    <div class="FlamingHotSponsorDiv Center">
                        <div class="FlamingHotSponsorAlignmentDiv">
                            <input id="FlamingHotSponsorshipCheckbox" type="checkbox" value="1000.00" runat="server" class="LargeCheckbox" />
                            <asp:Label ID="FlamingHotSponsorshipLabel" CssClass="FlamingHotSponsorLabel" Text="Flaming Hot Sponsor $1,000" runat="server"></asp:Label>
                            <ul id="Ul1" class="FlamingHotSponsorUL" runat="server">
                                <li class="FlamingHotSponsorLi"> 6 tickets to the event</li>
                                <li class="FlamingHotSponsorLi">&bull; Company logo on flyers, table tents, and in event program book</li>
                                <li class="FlamingHotSponsorLi">&bull; Logo on event t-shirts &bull;</li>
                                <li class="FlamingHotSponsorLi">Name on banner displayed at the event</li>
                                <li class="FlamingHotSponsorLi">&bull; Name in <i><i>Vista</i></i>, KBA's newsletter</li>
                                </ul>
                        </div>
                        <br style="clear: both" />
                </div>

css page:    
body
{
    margin: 0 auto 1% auto;
    padding: 0 0 1% 0;
    border: 0; /* This removes the border around the viewport in old versions of IE */
    width:100%;
    max-width: 1024px;
    background: #808080; /* The min-width property does not work in old versions of Internet Explorer */
    font-size: 90%;
    font-family: 'Gill Sans MT Condensed';
}
    .FlamingHotSponsorWrapperDiv {
    clear: both;
    margin-top:21%;
    width:100%;
   
}

.FlamingHotSponsorDiv {
    background-image: url('images/FlamingHotSponsorBannerNoText.png');
    background-repeat: no-repeat;
    background-position: left;
    padding-left: 8%;
    padding-right: 8%;

}

.FlamingHotSponsorUL {
    /*position: relative;*/
    padding-top: 0px;
    margin-top: 0px;
}

.FlamingHotSponsorLi {
    display: inline-block;
    font-size: x-large;
    color: #000000;
    
}

.FlamingHotSponsorLabel {
    font-size: 250%;
    font-weight: bold;
    color: #E63375;
    margin-bottom: 0;
    text-transform: uppercase;
}
.FlamingHotSponsorAlignmentDiv {
    padding-top: 2%;
}
.Center {
    text-align: center;
}

Open in new window

0
ICantSee
Asked:
ICantSee
  • 3
  • 2
1 Solution
 
COBOLdinosaurCommented:
In the CSS set  background-size: 100% 100%;

That will allow it to resize but it may distort it as well.

Cd&
0
 
ICantSeeAuthor Commented:
Thanks for the reply... is there supposed to be 2 100% entries or only one?

The app is running at the following address. the  "Flaming Hot Sponsor" breaks when its resized.


https://keystoneblind.org/sizzler
0
 
ICantSeeAuthor Commented:
I put the second 100% in there.. it looks good. THANK YOU
0
 
ICantSeeAuthor Commented:
Excellent ... Thank you
0
 
COBOLdinosaurCommented:
Sorry; a little slow getting back.  It needs both for x and y dimensions.  backgrounds are different from foreground images where giving just the width will cause the browser to calculate the height needed to maintain the aspect ratio.

Glad I could help a little.

Cd&
0

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now