Control text not staying inside the container div

Posted on 2014-07-17
Last Modified: 2014-07-17
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>
                        <br style="clear: both" />

css page:    
    margin: 0 auto 1% auto;
    padding: 0 0 1% 0;
    border: 0; /* This removes the border around the viewport in old versions of IE */
    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;

.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

Question by:ICantSee
    LVL 53

    Accepted Solution

    In the CSS set  background-size: 100% 100%;

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


    Author Comment

    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.

    Author Comment

    I put the second 100% in there.. it looks good. THANK YOU

    Author Closing Comment

    Excellent ... Thank you
    LVL 53

    Expert Comment

    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.


    Featured Post

    How your wiki can always stay up-to-date

    Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
    - Increase transparency
    - Onboard new hires faster
    - Access from mobile/offline

    Join & Write a Comment

    Creating a CSS block that only applies to printing By default, all of your CSS applies to every possible view of your page - whether on screen, printed, landscape, touch-screen, or whatever.  You can, however, add CSS that only applies under certai…
    SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
    In this Micro Tutorial users will learn how to embed custom fonts into websites using @font-face in CSS Select a font: Ensure the EULA allows you to use @font-face: Download the font: Get the browser-compatible files you need: Edit your CSS       - Name …
    In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…

    746 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    16 Experts available now in Live!

    Get 1:1 Help Now