School Assignment? Project Due Tomorrow? Chat LIVE With A Programming Expert!

Programming Help

Web Development



What's Here?

  • Members: 306,973
  • Replies: 841,420
  • Topics: 140,599
  • Snippets: 4,465
  • Tutorials: 1,166
  • Total Online: 1,842
  • Members: 85
  • Guests: 1,757

Welcome to Dream.In.Code
Become an Expert!

Join 306,973 Programmers for FREE! Get instant access to thousands of experts, tutorials, code snippets, and more! There are 1,842 people online right now. Registration is fast and FREE... Join Now!




Height of "Content" div

 

Height of "Content" div, How to place more items in "content" area of page
javedparamount

4 Nov, 2009 - 10:04 PM
Post #1

New D.I.C Head
*

Joined: 28 Jul, 2009
Posts: 30


My Contributions
Hello everybody!

i have 2 web pages first one is "Home" and other one is "For Sale". In "For Sale" i have placed two "panels" in <div id=content> area. Now i want to place a new "panel" but height of "content" can not b increased by me to place 3rd panel. While in "Home" page, i have placed some text in <div id=content> area and as more text i include in "content" area the height of "content" automatically increase and "footer" moves down.

My problem is: how to place 3rd "panel" below 2nd "panel" in "content" area of "For Sale" page?

fallowing is my html code for "For Sale" page:
CODE

<link href="Stylesheet.css" type="text/css" rel="stylesheet" />
    <title>For Sale</title>
</head>
<body>
    <form id="form1" runat="server">
    
    <div id="container" style="z-index: 100; left: 0px; position: absolute; top: 0px">
<div id="top">


    </div>
<div id="navbar">
  <ul>
    <li><a href="c:/my documents/visual studio 2005/websites/meer enterprises/Home.aspx"><b>Home</b></a></li>
    <li><a href="#"><b>For Sale</b></a></li>
    <li><a href="#"><b>Wanted</b></a></li>
    <li><a href="RentRecord.aspx"><b>Rent Record</b></a></li>
    <li><a href="#"><b>Careers</b></a></li>
    <li><a href="#"><b>Staff</b></a></li>
    <li><a href="#"><b>Contact Us</b></a></li>
  </ul>
</div>


<div id="leftnav">

</div>


<div id="rightnav">
<img src="images/forsale.gif" style="width: 173px" />&nbsp;<br />
<marquee direction="up" scrolldelay="150" id="MARQUEE1"><UL><LI><A href=""
  target="_self">Hazro... ...... eeee ffff jjj k ggggggggg</A><BR /><BR
  /></LI><LI>Wah...............<BR /><BR
/></LI><LI>Islamabad.........</LI></UL></marquee>
    
    <img src="images/yahoo_avatar.gif"/>
    </div>

<div id="content">
<h2>For Sale</h2>
     <asp:Panel ID="Panel1" runat="server" Height="160px" Style="z-index: 100; left: 172px;
        position: absolute; top: 353px" Width="551px" BorderColor="DarkGray" BorderStyle="Solid" BorderWidth="2px" ScrollBars="Vertical">
        <asp:GridView ID="GridView" runat="server" Height="1px" Style="z-index: 100; left: 11px;
            position: absolute; top: 11px" Width="506px" PageSize="5">
            <HeaderStyle BackColor="LawnGreen" BorderStyle="None" HorizontalAlign="Center" VerticalAlign="Middle" />
            <RowStyle HorizontalAlign="Center" VerticalAlign="Middle" />
            <EditRowStyle HorizontalAlign="Center" VerticalAlign="Middle" />
            <AlternatingRowStyle BackColor="DarkSeaGreen" />
        </asp:GridView>
         &nbsp;&nbsp;
    </asp:Panel>
    
  
    <asp:Panel ID="panel2" runat="server" Height="124px" Style="z-index: 101; left: 175px;
        position: absolute; top: 551px" Width="550px" Visible="False" BorderColor="DarkGray" BorderStyle="Solid" BorderWidth="2px">
        <asp:TextBox ID="txtboxpropertyid" runat="server" Style="z-index: 100; left: 94px;
            position: absolute; top: 2px" Width="51px"></asp:TextBox>
        <asp:TextBox ID="TextBox3" runat="server" Style="z-index: 101; left: 88px; position: absolute;
            top: 30px" Width="59px"></asp:TextBox>
        <asp:TextBox ID="TextBox5" runat="server" Style="z-index: 102; left: 250px; position: absolute;
            top: 2px" Width="185px"></asp:TextBox>
        <asp:TextBox ID="TextBox6" runat="server" Style="z-index: 103; left: 254px; position: absolute;
            top: 33px" Width="185px"></asp:TextBox>
        <asp:TextBox ID="TextBox8" runat="server" Style="z-index: 118; left: 256px; position: absolute;
            top: 61px" Width="185px"></asp:TextBox>
        <asp:TextBox ID="TextBox4" runat="server" Style="z-index: 105; left: 88px; position: absolute;
            top: 58px" Width="59px"></asp:TextBox>
        &nbsp;&nbsp;
        <asp:TextBox ID="TextBox7" runat="server" Style="z-index: 108; left: 93px; position: absolute;
            top: 93px" Width="348px"></asp:TextBox>
        <asp:Label ID="Label2" runat="server" Style="z-index: 109; left: 0px; position: absolute;
            top: 0px" Text="Property_ID" Width="47px"></asp:Label>
        <asp:Label ID="Label5" runat="server" Style="z-index: 110; left: 1px; position: absolute;
            top: 28px" Text="Demand:" Width="47px"></asp:Label>
        <asp:Label ID="Label7" runat="server" Style="z-index: 111; left: 191px; position: absolute;
            top: 4px" Text="Name:" Width="47px"></asp:Label>
        <asp:Label ID="Mobile" runat="server" Style="z-index: 112; left: 191px; position: absolute;
            top: 33px" Text="Mobile:" Width="47px"></asp:Label>
        <asp:Label ID="Label9" runat="server" Style="z-index: 113; left: 191px; position: absolute;
            top: 62px" Text="Email:" Width="47px"></asp:Label>
        <asp:Label ID="Label6" runat="server" Style="z-index: 114; left: 5px; position: absolute;
            top: 59px" Text="Offer:" Width="47px"></asp:Label>
        &nbsp;&nbsp;
        <asp:Label ID="Label8" runat="server" Style="z-index: 117; left: 1px; position: absolute;
            top: 94px" Text="Address:" Width="89px"></asp:Label>
    </asp:Panel>
            
            
            
             <asp:Button ID="Submitt" runat="server" Style="z-index: 106; left: 646px; position: absolute;
             top: 624px" Text="Submitt"/>
    &nbsp; &nbsp;

&nbsp; &nbsp;
    
    <asp:Button ID="btnoffer" runat="server" Style="z-index: 104; left: 447px; position: absolute;
             top: 521px" Text="Offer" />
            
            
            
            
            
         <asp:Label ID="Label1" runat="server" Style="z-index: 105; left: 185px; position: absolute;
             top: 520px" Text="Click Offer Button to Post Your Offer" Width="250px"></asp:Label>&nbsp;
</div>



<div id="footer">      
    Footer
</div>
</div>
   </form>
    
</body>
</html>


css coding:
CODE

#container
{
width: 100%;
margin: 0px auto;
color: #333;
border: 1px solid gray;
line-height: 130%;

}

#top
{
    height:250px;
    background-image:url(images/headerfinal.jpg);  
}

#links
{
    padding-top:160px;
    padding-left:70px;
    
    
}

#navbar ul {
    margin: 0;
    padding: 7px;
    list-style-type:none;
    text-align: center;
    background-color: white;
    
    }

#navbar ul li {  
    display: inline;
    }

#navbar ul li a {
    text-decoration:bold;
    padding: .2em 1em;
    color: #fff;
    background-color: #941c00;
    }

#navbar ul li a:hover {
    color:#adef52;
    background-color:black;
    }


#leftnav
{
float: left;
width: 168px;
margin: 0;
padding: 0em;
border-right:double Maroon;

}


#image1
{
    text-align:center;}
    

#rightnav
{
float: right;
width: 160px;
overflow:hidden;
margin: 0;
padding: 0em;
background-repeat:no-repeat;
height:inherit;
border-color:Maroon;
border-left-style:double;
}


  
    
#content
{
margin-left: 172px;
border-left: 0px solid gray;
margin-right: 165px;
border-right: 0px solid gray;
padding: 1em;
max-width: 36em;
text-align:justify;
background-color:InfoBackground;
height:auto;

}
#content background-image
{left:0px;
    margin-right:10px;
}


    

#footer
{
clear: both;
margin: 0;
padding: .5em;
color: #333;
background-color: #ddd;
border-top: 1px solid gray;
text-align:center;
bottom:0px;
}

#rightnav ul
{ margin:1em;
    word-spacing:normal;
    white-space:pre-wrap;
    padding-bottom:3em;
}
    

#content h2 { margin: 0 0 .5em 0; }
#rightnav img
{
    clear:both;
    top:0px;
    height:100px;
    width:160px;
    margin:0 0 0em 0;
    top:0px;
    
    
    }
User is offlineProfile CardPM
+Quote Post


sam_benne

RE: Height Of "Content" Div

4 Nov, 2009 - 11:44 PM
Post #2

D.I.C Addict
Group Icon

Joined: 16 Jan, 2008
Posts: 645



Thanked: 8 times
Dream Kudos: 400
My Contributions
What you can do if you want the content DIV to stay the same size but to have more content, which is what I think you are wanting is in your CSS on the #content part is to give your content DIV a fixed height then to add overflow-y: scroll;

What that does is add an overflow to your div meaning that it will have its on scroll box vertically. But remember this is CSS3 but will still work however, if you want it to be validated on W3C it wont get validated.
User is offlineProfile CardPM
+Quote Post

javedparamount

RE: Height Of "Content" Div

6 Nov, 2009 - 08:25 PM
Post #3

New D.I.C Head
*

Joined: 28 Jul, 2009
Posts: 30


My Contributions
QUOTE(sam_benne @ 4 Nov, 2009 - 11:44 PM) *

What you can do if you want the content DIV to stay the same size but to have more content, which is what I think you are wanting is in your CSS on the #content part is to give your content DIV a fixed height then to add overflow-y: scroll;

What that does is add an overflow to your div meaning that it will have its on scroll box vertically. But remember this is CSS3 but will still work however, if you want it to be validated on W3C it wont get validated.



Thank you for your consideration. However i do not want to add scroll bar for the content area.

in my page there is a portion "rightnav" when i add more images to this area height of "rightnav" increased. But when i add more items in "content" area height does not increase.
Fallowing is my coding for "rightnave"(html)
CODE

<div id="rightnav">
<img src="images/forsale.gif" style="width: 173px" />&nbsp;<br />
<marquee direction="up" scrolldelay="150" id="MARQUEE1"><UL><LI><A href=""
  target="_self">Hazro... ...... eeee ffff jjj k ggggggggg</A><BR /><BR
  /></LI><LI>Wah...............<BR /><BR
/></LI><LI>Islamabad.........</LI></UL></marquee>
    <img src="images/yahoo_avatar.gif"/>
       </div>


Css for "rightnav"
CODE

#rightnav
{
float: right;
width: 160px;
overflow:hidden;
margin: 0;
padding: 0em;
background-repeat:no-repeat;
height:inherit;
border-color:Maroon;
border-left-style:double;
}

and fallowing is my code for "content"
Css coding
CODE

#content
{
margin-left: 172px;
border-left: 0px solid gray;
margin-right: 165px;
border-right: 0px solid gray;
padding: 1em;
max-width: 36em;
text-align:justify;
background-color:InfoBackground;
overflow:hidden;

}


I think there is no difference in the css for "rightnav" and css for "content" then why the height of "rightnav" increased by adding more objects and can not increased the height of "content" when i add more objects in "content".

This post has been edited by javedparamount: 6 Nov, 2009 - 08:27 PM
User is offlineProfile CardPM
+Quote Post

Fast ReplyReply to this topicStart new topic

Time is now: 11/21/09 05:02AM
Invision Power Board v2.1.7 © 2009  IPS, Inc.
Licensed to: MediaGroup1

Live Help!

Be Social

Dream.In.Code RSS Feed Dream.In.Code LinkedIn Group Follow Us On Twitter Fan Us On Facebook

Tutorials

Programming

Web Development

Reference Sheets

Code Snippets

DIC Chatroom

Bye Bye Ads

Monthly Drawing

Thumb Drive

Top Contributors

Top 10 Kudos This Month