Jump to content
Please Use CODE Tags

HTML body height

tomasesp
By tomasesp
in Programming
 Share
Posted

Hello,

I'm creating a website for a class I'm having trouble with the with a <div> I'm using as the body. I want the <div> height to expand by itself when I add new content, instead  of having a fix height. I don't want to make a new style page for each page i make to change the height for each one. The <div> I'm using as my main body is the green one shown in the pics.

 

this one of my pages  

<!DOCTYPE html>
<html>
<head>
    <link href="CSS/StyleSheet.css" rel="stylesheet" />
    <title></title>
    <meta charset="utf-8" />
</head>
<body>
    <div id="top">
        <div id="Info">
            <ul>
                <li><a href="ContactUs.html">Contact Us</a></li>
                <li>En Espa&ntilde;ol</li>
            </ul>
        </div>
        <div id="Banner" align="center">
            <img src="Pictures/ch1.png" height="250px" width="100%"/>
        </div>
        <div id="Nav">
            <ul>
                <li><a href="MainPage.html">Home</a></li>
                <li><a href="AboutUs.html">About Us</a></li>
                <li><a href="EventPage.html">Events</a></li>
                <li><a href="Calendar.html">Calendar</a></li>
            </ul>
        </div>
    </div>
    <div id="MainBody">
        <div id="UpCommingEvents">
            <h2 align="center">Upcoming Events</h2>
            <dl>
                <dt>March 1st</dt>
                <dd>Food drive at hahah st, Paterson nj</dd>
                <dt>March 6</dt>
                <dd>dsfggdfsgsdflgsdfjhglkdsjfglkjdfsgljdsfglkdsfjgl;kdsfjglsdfkgjsdlkgjdlskfgjldsfkjgdlskfgjdsflgkjsdl;fkgjsdlfkgjdlsfkgjsdl;fk</dd>
            </dl>
        </div>
        <div id="SecondBody" > 
            <h1 align="center">About Us</h1>         
            <p id="AboutUSPara">
                Consulted perpetual of pronounce me delivered. Too months nay end change relied 
                who beauty wishes matter. Shew of john real park so rest we on. Ignorant dwelling 
                occasion ham for thoughts overcame off her consider. Polite it elinor is depend.
                 His not get talked effect worthy barton. Household shameless incommode at no 
                objection behaviour. Especially do at he possession insensible sympathize boisterous 
                it. Songs he on an widen me event truth. Certain law age brother sending amongst why covered. 
            </p>
            <div class="AboutPeople" >
                <h3>Name Lastname</h3>
                <img src="Pictures/anonymousUser.jpg" class="floatleft"/>
                <p>Consulted perpetual of pronounce me delivered. Too months nay end change relied
                who beauty wishes matter. Shew of john real park so rest we on. Ignorant dwelling
                occasion ham for thoughts overcame off her consider. Polite it elinor is depend</p>
            </div>
            <div class="AboutPeople">
                <h3>Name Lastname</h3>
                <img src="Pictures/anonymousUser.jpg" class="floatleft" />
                <p>
                    Consulted perpetual of pronounce me delivered. Too months nay end change relied
                    who beauty wishes matter. Shew of john real park so rest we on. Ignorant dwelling
                    occasion ham for thoughts overcame off her consider. Polite it elinor is depend
                </p>
            </div>
            <div class="AboutPeople">
                <h3>Name Lastname</h3>
                <img src="Pictures/anonymousUser.jpg" class="floatleft" />
                <p>
                    Consulted perpetual of pronounce me delivered. Too months nay end change relied
                    who beauty wishes matter. Shew of john real park so rest we on. Ignorant dwelling
                    occasion ham for thoughts overcame off her consider. Polite it elinor is depend
                </p>
            </div>
            <div class="AboutPeople">
                <h3>Name Lastname</h3>
                <img src="Pictures/anonymousUser.jpg" class="floatleft" />
                <p>
                    Consulted perpetual of pronounce me delivered. Too months nay end change relied
                    who beauty wishes matter. Shew of john real park so rest we on. Ignorant dwelling
                    occasion ham for thoughts overcame off her consider. Polite it elinor is depend
                </p>
            </div>
            <div class="AboutPeople">
                <h3>Name Lastname</h3>
                <img src="Pictures/anonymousUser.jpg" class="floatleft" />
                <p>
                    Consulted perpetual of pronounce me delivered. Too months nay end change relied
                    who beauty wishes matter. Shew of john real park so rest we on. Ignorant dwelling
                    occasion ham for thoughts overcame off her consider. Polite it elinor is depend
                </p>
            </div>
            <div class="AboutPeople">
                <h3>Name Lastname</h3>
                <img src="Pictures/anonymousUser.jpg" class="floatleft" />
                <p class="AboutPeopleP">
                    Consulted perpetual of pronounce me delivered. Too months nay end change relied
                    who beauty wishes matter. Shew of john real park so rest we on. Ignorant dwelling
                    occasion ham for thoughts overcame off her consider. Polite it elinor is depend
                </p>
            </div>

        </div>
    </div>
    <div id="footer">
        <ul>
            <li><a href="MainPage.html">Home</a></li>
            <li><a href="AboutUs.html">About Us</a></li>
            <li><a href="EventPage.html">Events</a></li>
            <li><a href="Calendar.html">Calendar</a></li>
        </ul>
    </div>
</body>
</html>

This my Style page 

body {
    margin:0px;
    background-color:white;
}
#top{
    background-color:white;
}
#Info ul li{
    list-style-type:none;
    float:right;
    text-align:center;
    border:1px;
    width:100px;
}
#SocialMedia{
    font-size:20px;
}
#Nav{
    background-color:aquamarine;
    align-content:center;
}
#Nav ul{
    height: 25px;
    width:1000px;
    margin:0 auto;
}
#Nav ul li{
    list-style-type:none;
    width:225px;
    float:left;
    text-align:center;
    border:1px;
}
li a{
    text-decoration:none;
    color:black;
    line-height:20px;
    display:block;
}
#MainBody{
    background-color:ghostwhite;
    width:1000px;
    height:1400px;
    margin-left:auto;
    margin-right:auto;
}
#UpCommingEvents{
    background-color:ghostwhite;  
    border:1px solid black;
    margin:20px;
    padding:5px;
    float:left;
    width:200px;  
}
#UpCommingEvents h2{
    align-content:center;
    border-bottom:1px solid black;
    background-color:ghostwhite;
}
#UpCommingEvents dl dd{
    word-wrap:break-word;
}
#SecondBody{
    float:right;
    width:700px;
    padding:1px;
}
#AboutUSPara{
    align-items:center;
}
.AboutPeople{
    padding:15px;
    float:inherit;
    border-bottom: 2px solid #000000;
}
.floatleft{
    width:100px;
    height:100px;
    float:left;
}
#footer{
    align-content:center;
    
}
#footer ul{
    height: 25px;
    width:1000px;
    margin:0 auto;
}
#footer ul li{
    list-style-type:none;
    width:225px;
    float:left;
    text-align:center;
    border:1px;
}

 

Capture1.PNG

Capture2.PNG

Link to comment
https://linustechtips.com/topic/568392-html-body-height/
Share on other sites
Link to post
Share on other sites
Posted

can you link me an example of what you are talking about?

edit: Thought you meant have it expand by dragging pictures in or something just dont set a height for the div and you should be fine.

Thats that. If you need to get in touch chances are you can find someone that knows me that can get in touch.

Link to comment
https://linustechtips.com/topic/568392-html-body-height/#findComment-7462579
Share on other sites
Link to post
Share on other sites
Posted
Just now, tomasesp said:

Hey I updated the post with some pics, the green is the div I'm using as my main body.

So whats the issue here besides you needing to do alot more CSS?

Thats that. If you need to get in touch chances are you can find someone that knows me that can get in touch.

Link to comment
https://linustechtips.com/topic/568392-html-body-height/#findComment-7462614
Share on other sites
Link to post
Share on other sites
Posted
  • Author
Just now, thekeemo said:

So whats the issue here besides you needing to do alot more CSS?

I have most of the CSS down, is just the height of that div I'm having issues with. I'm not sure if i'm suppose to be using a different tag than the 'height' but I have tried everything.  

Link to comment
https://linustechtips.com/topic/568392-html-body-height/#findComment-7462650
Share on other sites
Link to post
Share on other sites
Posted
14 minutes ago, tomasesp said:

I have most of the CSS down, is just the height of that div I'm having issues with. I'm not sure if i'm suppose to be using a different tag than the 'height' but I have tried everything.  

have you tried removing the height tag because I dont think you need it. Also try .mainbody instead of #mainbody

Thats that. If you need to get in touch chances are you can find someone that knows me that can get in touch.

Link to comment
https://linustechtips.com/topic/568392-html-body-height/#findComment-7462693
Share on other sites
Link to post
Share on other sites
Posted
9 hours ago, tomasesp said:

Hello,

I'm creating a website for a class I'm having trouble with the with a <div> I'm using as the body. I want the <div> height to expand by itself when I add new content, instead  of having a fix height. I don't want to make a new style page for each page i make to change the height for each one. The <div> I'm using as my main body is the green one shown in the pics.

 

this one of my pages  


<!DOCTYPE html>
<html>
<head>
    <link href="CSS/StyleSheet.css" rel="stylesheet" />
    <title></title>
    <meta charset="utf-8" />
</head>
<body>
    <div id="top">
        <div id="Info">
            <ul>
                <li><a href="ContactUs.html">Contact Us</a></li>
                <li>En Espa&ntilde;ol</li>
            </ul>
        </div>
        <div id="Banner" align="center">
            <img src="Pictures/ch1.png" height="250px" width="100%"/>
        </div>
        <div id="Nav">
            <ul>
                <li><a href="MainPage.html">Home</a></li>
                <li><a href="AboutUs.html">About Us</a></li>
                <li><a href="EventPage.html">Events</a></li>
                <li><a href="Calendar.html">Calendar</a></li>
            </ul>
        </div>
    </div>
    <div id="MainBody">
        <div id="UpCommingEvents">
            <h2 align="center">Upcoming Events</h2>
            <dl>
                <dt>March 1st</dt>
                <dd>Food drive at hahah st, Paterson nj</dd>
                <dt>March 6</dt>
                <dd>dsfggdfsgsdflgsdfjhglkdsjfglkjdfsgljdsfglkdsfjgl;kdsfjglsdfkgjsdlkgjdlskfgjldsfkjgdlskfgjdsflgkjsdl;fkgjsdlfkgjdlsfkgjsdl;fk</dd>
            </dl>
        </div>
        <div id="SecondBody" > 
            <h1 align="center">About Us</h1>         
            <p id="AboutUSPara">
                Consulted perpetual of pronounce me delivered. Too months nay end change relied 
                who beauty wishes matter. Shew of john real park so rest we on. Ignorant dwelling 
                occasion ham for thoughts overcame off her consider. Polite it elinor is depend.
                 His not get talked effect worthy barton. Household shameless incommode at no 
                objection behaviour. Especially do at he possession insensible sympathize boisterous 
                it. Songs he on an widen me event truth. Certain law age brother sending amongst why covered. 
            </p>
            <div class="AboutPeople" >
                <h3>Name Lastname</h3>
                <img src="Pictures/anonymousUser.jpg" class="floatleft"/>
                <p>Consulted perpetual of pronounce me delivered. Too months nay end change relied
                who beauty wishes matter. Shew of john real park so rest we on. Ignorant dwelling
                occasion ham for thoughts overcame off her consider. Polite it elinor is depend</p>
            </div>
            <div class="AboutPeople">
                <h3>Name Lastname</h3>
                <img src="Pictures/anonymousUser.jpg" class="floatleft" />
                <p>
                    Consulted perpetual of pronounce me delivered. Too months nay end change relied
                    who beauty wishes matter. Shew of john real park so rest we on. Ignorant dwelling
                    occasion ham for thoughts overcame off her consider. Polite it elinor is depend
                </p>
            </div>
            <div class="AboutPeople">
                <h3>Name Lastname</h3>
                <img src="Pictures/anonymousUser.jpg" class="floatleft" />
                <p>
                    Consulted perpetual of pronounce me delivered. Too months nay end change relied
                    who beauty wishes matter. Shew of john real park so rest we on. Ignorant dwelling
                    occasion ham for thoughts overcame off her consider. Polite it elinor is depend
                </p>
            </div>
            <div class="AboutPeople">
                <h3>Name Lastname</h3>
                <img src="Pictures/anonymousUser.jpg" class="floatleft" />
                <p>
                    Consulted perpetual of pronounce me delivered. Too months nay end change relied
                    who beauty wishes matter. Shew of john real park so rest we on. Ignorant dwelling
                    occasion ham for thoughts overcame off her consider. Polite it elinor is depend
                </p>
            </div>
            <div class="AboutPeople">
                <h3>Name Lastname</h3>
                <img src="Pictures/anonymousUser.jpg" class="floatleft" />
                <p>
                    Consulted perpetual of pronounce me delivered. Too months nay end change relied
                    who beauty wishes matter. Shew of john real park so rest we on. Ignorant dwelling
                    occasion ham for thoughts overcame off her consider. Polite it elinor is depend
                </p>
            </div>
            <div class="AboutPeople">
                <h3>Name Lastname</h3>
                <img src="Pictures/anonymousUser.jpg" class="floatleft" />
                <p class="AboutPeopleP">
                    Consulted perpetual of pronounce me delivered. Too months nay end change relied
                    who beauty wishes matter. Shew of john real park so rest we on. Ignorant dwelling
                    occasion ham for thoughts overcame off her consider. Polite it elinor is depend
                </p>
            </div>

        </div>
    </div>
    <div id="footer">
        <ul>
            <li><a href="MainPage.html">Home</a></li>
            <li><a href="AboutUs.html">About Us</a></li>
            <li><a href="EventPage.html">Events</a></li>
            <li><a href="Calendar.html">Calendar</a></li>
        </ul>
    </div>
</body>
</html>

This my Style page 


body {
    margin:0px;
    background-color:white;
}
#top{
    background-color:white;
}
#Info ul li{
    list-style-type:none;
    float:right;
    text-align:center;
    border:1px;
    width:100px;
}
#SocialMedia{
    font-size:20px;
}
#Nav{
    background-color:aquamarine;
    align-content:center;
}
#Nav ul{
    height: 25px;
    width:1000px;
    margin:0 auto;
}
#Nav ul li{
    list-style-type:none;
    width:225px;
    float:left;
    text-align:center;
    border:1px;
}
li a{
    text-decoration:none;
    color:black;
    line-height:20px;
    display:block;
}
#MainBody{
    background-color:ghostwhite;
    width:1000px;
    height:1400px;
    margin-left:auto;
    margin-right:auto;
}
#UpCommingEvents{
    background-color:ghostwhite;  
    border:1px solid black;
    margin:20px;
    padding:5px;
    float:left;
    width:200px;  
}
#UpCommingEvents h2{
    align-content:center;
    border-bottom:1px solid black;
    background-color:ghostwhite;
}
#UpCommingEvents dl dd{
    word-wrap:break-word;
}
#SecondBody{
    float:right;
    width:700px;
    padding:1px;
}
#AboutUSPara{
    align-items:center;
}
.AboutPeople{
    padding:15px;
    float:inherit;
    border-bottom: 2px solid #000000;
}
.floatleft{
    width:100px;
    height:100px;
    float:left;
}
#footer{
    align-content:center;
    
}
#footer ul{
    height: 25px;
    width:1000px;
    margin:0 auto;
}
#footer ul li{
    list-style-type:none;
    width:225px;
    float:left;
    text-align:center;
    border:1px;
}

 

Capture1.PNG

Capture2.PNG

Change the 

#top{
    background-color:white;
}

to 

#top{
    background-color:white;
    width: auto;
    height: auto;
}

 

Link to comment
https://linustechtips.com/topic/568392-html-body-height/#findComment-7464080
Share on other sites
Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing Programming

×