Height of "Content" div

How to place more items in "content" area of page

Page 1 of 1

2 Replies - 1711 Views - Last Post: 06 November 2009 - 09:25 PM

#1 javedparamount  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 38
  • Joined: 28-July 09

Height of "Content" div

Post icon  Posted 04 November 2009 - 11:04 PM

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:
<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:
#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;
	
	
	}



Is This A Good Question/Topic? 0
  • +

Replies To: Height of "Content" div

#2 sam_benne  Icon User is offline

  • D.I.C Addict
  • member icon

Reputation: 16
  • View blog
  • Posts: 732
  • Joined: 16-January 08

Re: Height of "Content" div

Posted 05 November 2009 - 12:44 AM

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.
Was This Post Helpful? 0
  • +
  • -

#3 javedparamount  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 38
  • Joined: 28-July 09

Re: Height of "Content" div

Posted 06 November 2009 - 09:25 PM

View Postsam_benne, on 4 Nov, 2009 - 11:44 PM, said:

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)
<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"
#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
#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: 06 November 2009 - 09:27 PM

Was This Post Helpful? 0
  • +
  • -

Page 1 of 1