how to change the size of Element Id's runtime in css

[sbv]

Hi

I have a css with three Element Id's
1) LeftNav 2)Content 3) RightNav
In first i put all link's, in second all page contents (coming from database)
and lastly the extra information and advertisements in rightnav.
The problem i am facing is that as my center Element ID contains Data from Database,
it vary in size i.e on different pages different size. And also some time rightnav. So i put

height:auto; /*In my css*/

but all the three Element ID's how can be came in same height?

please help me. :(

Thanking you.

[ndeniche]

what about keeping in your database info about the element's size? that way you can load the info from the database and no more problems...

[sbv]

what about keeping in your database info about the element's size? that way you can load the info from the database and no more problems...

hi Nichito! thanks for reply. actually when my contents are get larger than the size i defined for content in css then the data comes out of my designed css pastern. How can i avoid that? Please see the image bellow, so that you can get the problem. Thanks again for reply. :icon_cool:

[MattEvans]

The easiest way to get that look is with a <table> element, especially if you want text in either of the two side columns. Otherwise.. you can do some tricks with background color, etc, to make it look like the other column's are supposed to be that long, or, you could nest the inner column inside a large element that acts like both side columns. Generally, in CSS only, you cant make 2 blocks be the same size when one of them depends on its content for size ( unless those elements are nested inside each other ).

[sbv]

The easiest way to get that look is with a <table> element, especially if you want text in either of the two side columns. Otherwise.. you can do some tricks with background color, etc, to make it look like the other column's are supposed to be that long, or, you could nest the inner column inside a large element that acts like both side columns. Generally, in CSS only, you cant make 2 blocks be the same size when one of them depends on its content for size ( unless those elements are nested inside each other ).

hi MattEvans
thanks for reply. But can you please make it more clear to me? i am not getting what you are trying to explain me. Are you telling me to use table in each page to display contents?
if so then i am dome same. but the problem is as shwon in img attached.

[MattEvans]

Can you post more of your code? Specifically, which CSS attributes are applied to the table, and to the large content section in the middle? Also, post the markup of the table, if you don't mind.

[DangerDev]

hi
for entire page use a table having 1 row and 3 column, and put
on first row - LeftNav
on second row - Content
on third row - RightNav
here make invisible the border of tables through css formating.

[sbv]

hi
for entire page use a table having 1 row and 3 column, and put
on first row - LeftNav
on second row - Content
on third row - RightNav
here make invisible the border of tables through css formating.

Hi DangerDev,
Thank you very much for your reply. Its really a good solution for this problem.
But actually i am updating an existing site which contains near about 400 pages of asp and HTML code. So i think it is not a so much good way for doing that. And its also that, if i did not get any other solution then, i need to do this only in each of 400 pages.
Still if you have any other solution for this, then please help me.
Thanks again. :)
Good Day.

[sbv]

Can you post more of your code? Specifically, which CSS attributes are applied to the table, and to the large content section in the middle? Also, post the markup of the table, if you don't mind.

Hi,
Thanks for reply.
Here is the code.

#rightnav
{
	background-color: #FFCC33;
	color: #FF3300;
	position: absolute;
	left: 698px;
	top: 41px;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	width: 210px;
	height: 1506px;
	border-right: solid 1px #FFFFFF;
	border-bottom: solid 45px #65AF45;
}
#leftnav
{
	background-color: White;
	position: absolute;
	left: 102px;
	top: 313px;
	height: 1234px;
	width: 210px; 

	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;

	float: left;
	border-left: solid 1px white;
	border-bottom: solid 45px #65AF45;

	font-size: 8pt;
	font-family: "Trebuchet	MS" , Geneva, Arial, Helvetica, SunSans-Regular, sans-serif;
	line-height: 4pt; 
	color: #134d27;
}
#content
{

	font-family: Arial, Helvetica, sans-serif;
	position: absolute;
	left: 283px;
	top: 313px;
	height: 1222px;
	width: 404px; 
	padding: 0px 5px 5px 5px;
	padding-bottom: 12px;
	text-justify: distribute-all-lines;
	border-bottom: solid 45px #65AF45;
	border-left: solid 1px #65AF45;
	background-color: White;
}

In pages directly i included Div's, Id's and classes. If you need more than this then please let me know. Thanks for Replay. Have a good day.

[sbv]

hey used tables as you said. but its not working. :(
and i am unable to get what can be the problem

[DangerDev]

Hi
can u post one or two page and corresponding css so that i can see what really problem is.

[SheSaidImaPregy]

Okay, thanks for dragging my attention here sbv. There's a couple ways of doing this.

As you have seen, the height element is kind of ambiguous and is browser dependent. It will work in one or two browsers, and not the popular ones, so it's useless.

To keep the format the same, you are going to have to place tables or do a ton of coding on the back end with a language, which you should avoid.

You need one master table with three columns, one for each div. Now you don't necessarily need divs in this example, but it is much easier to use back end css to apply and format the containing text and elements.

The width of each column is going to be the same as your divs before. By looking at the picture you supplied, if you wish to have that green bottom border, I would suggest adding another row to the table and supplying a background color to the row (tr). This will stop anything, on any columns, from overlapping the green footer and will keep all columns the same size, regardless of the divs' true size.

If I were you, I would avoid absolute positions and keep the page centered. No one likes having a large monitor and seeing the web page to the left. It's more preferred to be centered, which is not easy to do in absolute positions at all. I have modified your css code and supplied a table for you with the names of the divs. Place the information within these divs and you will have the outcome expected!

css:

#rightnav
{
	background-color: #FFCC33;
	color: #FF3300;
	width: 210px;
	border-right: solid 1px #FFFFFF;
}

#leftnav
{
	background-color: #FFFFFF;
	width: 210px; 
	border-left: solid 1px #FFFFFF;

	font-size: 8pt;
	font-family: "Trebuchet	MS" , Geneva, Arial, Helvetica, SunSans-Regular, sans-serif;
	line-height: 4pt; 
	color: #134d27;
}

#content
{
	font-family: Arial, Helvetica, sans-serif;
	width: 404px; 
	padding: 0px 5px 12px 5px;
	text-justify: distribute-all-lines;
	border-bottom: solid 45px #65AF45;
	border-left: solid 1px #65AF45;
	background-color: #FFFFFF;
}

#footer
{
	height: 45px;
	background-color: #65AF45;
}

table:

<table border="0" cellpadding="0" cellspacing="0" width="824">
  <tr>
    <td width="210">
      <div id="leftnav">

      </div>
    </td>
    <td width="404">
      <div id="content">

      </div>
    </td>
    <td width="210" style="background-color: #FFCC33;">
      <div id="rightnav">

      </div>
    </td>
  </tr>
  <tr id="footer">
    <td colspan="3" id="footer">
      &nbsp;
    </td>
  </tr>
</table>