Solved

Expand div tag for more data in exist.

Posted on 2011-09-08
5
183 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 2
5 Comments
 
LVL 40

Expert Comment

by:gurvinder372
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:
gurvinder372 earned 500 total points
ID: 36502778
then replace line 6
height: 550px;

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

Expert Comment

by:gurvinder372
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: Postgres Monitoring System

A PHP and Perl based system to collect and display usage statistics from PostgreSQL databases.

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

Suggested Solutions

Title # Comments Views Activity
How to make footer stick to bottom 9 53
Checkout Page Input Field not aligned 1 29
Show tab when enter div and change underline color 3 90
Using Specialized Fonts in CSS 1 39
Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
As a result of several questions about how to use Bootstrap I thought it would be a good idea to write down the development aspect of creating a Bootstrapped website in as little time as possible. Part 1 of this article will only concentrate on g…
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…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

756 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