Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
?
Solved

Expand div tag for more data in exist.

Posted on 2011-09-08
5
Medium Priority
?
190 Views
Last Modified: 2012-05-12
Hello EE,

I have the following markup below. The problem that I face is that I may need to add more <li> tags to each of the following <ul> below and if so I need to expand the <div id="content"> accordingly. Please see my Markup along with the CSS for this.

Thanks in advance!!!
HTML Markup:

<div id="content">
            <div id="web">
            </div>
            <div id="services">
                <div id="sis">
                    <h1>Backpack | <b>SIS</b></h1>
                    <ul>
                        <li><img src="Images/sis-1.png" class="image" alt="Managing student information efficiently." /><b>Managing student information efficiently.</b></li>
                        <li class="desc">Backpack manages all student and school information in one central place, so administration is easy.</li>
                        <li><img src="Images/sis-2.png" class="image" alt="Powerful reporting functionality." /><b>Powerful reporting functionality.</b></li>
                        <li class="desc">Performance charts for grades, attendance, class, and school performance can easily be generated, and compared to other classes and schools.</li>
                        <li><img src="Images/sis-3.png" class="image" alt="Affordable solution." /><b>Affordable solution.</b></li>
                        <li class="desc">While Backpack can be installed on site, it is also vailable as a hosted service, reducing the cost of up front investments. In either case, there are no upfront investments.</li>
                        <li><img src="Images/sis-3.png" class="image" alt="Affordable solution." /><b>Affordable solution.</b></li>
                        <li class="desc">While Backpack can be installed on site, it is also vailable as a hosted service, reducing the cost of up front investments. In either case, there are no upfront investments.</li>
                    </ul>
                    <a href="Services/sis.aspx" class="btn">Learn More</a>
                </div>
                <div id="community">
                    <h1>Backpack | <b>Community</b></h1>
                    <ul>
                        <li><img src="Images/community-1.png" class="image" alt="Our social network brings familes together." /><b>Our social network brings familes together.</b></li>
                        <li class="desc">Students, parents, and teachers all log into the same network, making communication easy, and increasing engagement.</li>
                        <li><img src="Images/community-2.png" class="image" alt="Built with security and safety in mind." /><b>Built with security and safety in mind.</b></li>
                        <li class="desc">Backpack is “fenced off”, so only approved parties have access. Everything is encrypted and kept secure.</li>
                        <li><img src="Images/community-3.png" class="image" alt="Better transparency and accountability." /><b>Better transparency and accountability.</b></li>
                        <li class="desc">Parents can view all of their child’s information and receive email updates about their performance, so there’s no need to send notes home.</li>
                        <li><img src="Images/community-3.png" class="image" alt="Better transparency and accountability." /><b>Better transparency and accountability.</b></li>
                        <li class="desc">Parents can view all of their child’s information and receive email updates about their performance, so there’s no need to send notes home.</li>
                    </ul>
                    <a href="Services/community.aspx" class="btn">Learn More</a>
                </div>
            </div>

Open in new window

CSS:

#content
{
    width: 960px;
    height: 550px;
    margin-top: 25px;
    overflow: hidden;
    background-color: #fff;
    -moz-border-radius: 3em 3em 3em 3em;
    border-radius: 3em 3em 3em 3em;
    
    -webkit-box-shadow: 0 3px 2px rgba(0,0,0,.2);
	-moz-box-shadow: 0 3px 2px rgba(0,0,0,.2);
	box-shadow: 0 3px 2px rgba(0,0,0,.2);

}

#content #web
{
    width: 960px;
    height: 200px;
    background-color: #f7f1e1;
    overflow: hidden;
    -moz-border-radius: 3em 3em 0em 0em;
    border-radius: 3em 3em 0em 0em;
}

#content #services
{
    padding-top: 20px;
    padding-bottom: 20px;
}

#content #services #sis
{
    float: left;
    width: 410px;
    padding-left: 30px;
}

#content #services #sis h1
{
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 16px;
    font-weight: bold;
    color: #000;
    text-align: center;
}

#content #services #sis h1 b
{
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 16px;
    font-weight: normal;
    color: #53a4bb;
    text-align: center;
}

#content #services #sis ul
{
    list-style: none;
    padding-top: 20px;
}

#content #services #sis ul li
{
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 13px;
    font-weight: normal;
    color: #000;
    line-height: 1.2em;
}

#content #services #sis ul li b
{
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 13px;
    font-weight: bold;
    color: #53a4bb;
}

#content #services #sis ul li .image
{
    float: left;
    margin-right: 10px;
}

#content #services #sis .desc
{
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 13px;
    font-weight: normal;
    color: #000;
    padding-bottom: 20px;
    line-height: 1.2em;
}

#content #services #community
{
    float: right;
    width: 410px;
    padding-right: 30px;
}

#content #services #community h1
{
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 16px;
    font-weight: bold;
    color: #000;
    text-align: center;
}

#content #services #community h1 b
{
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 16px;
    font-weight: normal;
    color: #53a4bb;
    text-align: center;
}

#content #services #community ul
{
    list-style: none;
    padding-top: 20px;
}

#content #services #community ul li
{
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 13px;
    font-weight: normal;
    color: #000;
    line-height: 1.2em;
}

#content #services #community ul li b
{
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 13px;
    font-weight: bold;
    color: #53a4bb;
}

#content #services #community ul li .image
{
    float: left;
    margin-right: 10px;
}

#content #services #community .desc
{
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 13px;
    font-weight: normal;
    color: #000;
    padding-bottom: 20px;
    line-height: 1.2em;
}

Open in new window

0
Comment
Question by:asp_net2
  • 3
  • 2
5 Comments
 
LVL 40

Expert Comment

by:Gurvinder Pal Singh
ID: 36502757
just try replacing line 5
 width: 960px;

by

min-width: 960px;
width:auto;
0
 
LVL 4

Author Comment

by:asp_net2
ID: 36502768
I'm confused, the width is fine. It's the height is what the problem is. The data disappears once the data reaches past 550px.
0
 
LVL 40

Accepted Solution

by:
Gurvinder Pal Singh earned 2000 total points
ID: 36502778
then replace line 6
height: 550px;

by
min-height: 550px;
height:auto;
0
 
LVL 40

Expert Comment

by:Gurvinder Pal Singh
ID: 36502784
data is disappearing because you have mentioned
overflow: hidden;
in line 8 and 24

remove these two lines
0
 
LVL 4

Author Closing Comment

by:asp_net2
ID: 36502803
Thanks.
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.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how add a full-size background image to a webpage using CSS3. Create a new HTML document with an internal stylesheet.: In CSS, define the html element to have a background image. Use a high resolution image.: In t…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).
Suggested Courses
Course of the Month10 days, 1 hour left to enroll

569 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