.NET Tutorials, Forums, Interview Questions And Answers
Welcome :Guest
Sign In
Win Surprise Gifts!!!

Top 5 Contributors of the Month
Gaurav Pal
Post New Web Links

CSS Layout Problem when height is fixed to 100%

Posted By:      Posted Date: August 31, 2010    Points: 0   Category :ASP.Net
Hi all,I'm using 3 column DIV layouts for my aspx page which i downloaded it from james tyler website.My problem is when i set height of all the div layers to some 750px it is looking good and when i remove the height, all the DIV layers are getting shortened and looking awakward.I mean if the left menu DIV contains only 3 items, the whole div's height is being reduced to fit those only 3 menu items. I need to maintain 100% height for all DIV layers and my DOCTYPE is XHTML1.0 STRICT. Can anyone please help me out as i'm stuck here.. Here is my CSS and Markup:/* Header styles */ #header { clear:both; float:left; width:100%; } #header { border-bottom:1px solid #57B6DD; } #header p, #header h1, #header h2 { padding:.4em 15px 0 15px; margin:0; } #header ul { clear:left; float:left; width:100%; list-style:none; margin:10px 0 0 0; padding:0; } #header ul li { display:inline; list-style:none; margin:0; padding:0; } #header ul li a { display:block; float:left; margin:0 0 0 1px; padding:3px 10px; text-align:center; background:#eee; color:#000; text-decoration:none; position:relative; left:15px; line-height:1.3em; } #header ul li a:hover { background:#369; color:#fff; } #header ul li a.active, #header ul li a.active:hover { color:#fff; background:#000; font-weight:bold; } #header ul li a span { display:block; } /* 'widths' sub menu */

View Complete Post

More Related Resource Links

Crystal Reports can grow fields with large amounts of text layout problem


A can grow field in the details section of a crystal report may have so much text that the section will be larger than the remaining space available on the page (the space below the previous record).  The section has vertical lines on it with Extend to bottom of section when printing set to true.  The section starts on a new page (and may continue on the following one).  I want it to start on the page where the last record was laid out, and continue to the new page without leaving a gap with vertical lines on it.  I'm using Crystal Reports 9 and I can't work out how to do it. Has anyone got a solution?

A layout, mouse selection, ListView problem/question

I'm having a problem with a particular layout scenario, and how it interacts with a left mouse click in certain situations. I have 3 rows in a Grid.  The first is a ListView (Master), with the Row Height set to '*'. It's ItemSource is bound to a collection in a ViewModel, and its SelectedItem is bound to a value in the ViewModel.  When the SelectedItem is null, it should take up its entire container (the other 2 rows are invisible). The second row is the GridSplitter.  It's visibility is bound to a value in the ViewModel.  It's only visible when the SelectedItem in the Master ListView is not null.  It's GridRow height is set to Auto, and it's height is explicitly set to 5 (via a style). The third row is a sub-ListView that shows Detail data for the Master SelectedItem in the top ListView.  It's GridRow Height is set to zero by default, and if an item is selected in the Master ListView, it should become visible and have a set height (400 to start, via a binding on the Height of the row). The desired effect is that when an item is selected in the Master ListView, the Detail ListView becomes visible and the GridSplitter allows you to resize the top and bottom as needed.  If necessary, the ScrollBars become visible in the Master ListView to show any items that are now obscured by the Detail ListView (via the automatic scrolling featur

height of fixed height div appears to vary depending on content

why would text content of a fixed height div with a background image push the background image down and make the div higher? In the following, without the "overflow:hidden;" the div draws with a height > 180px. And the background image starts lower vertically than it does when there is not <h1> text content or when overflow:hidden. Also, when I put a border around the div (  border: 1px solid black ), the background image snaps back up to the top, with the <h1> text overlaying it as I want it to. <div style="background-image:url('images/green city header.png');              background-repeat:no-repeat;       background-position:left bottom;        height: 180px;"><h1>efg</h1></div> The text content is not overflowing. And even if it did, why would overflow text increase the height of a container?Same behavior in IE8 and Chrome. thanks,  

problem with update panel height

I am using ajax update panel to show a tree without postback there is a label that is at the top of the panel I am hiding the label while showing the tree. document.getElementById('ctl00_phldDialogBody_lbltext').style.display = "none"; in the javascript but even after hiding the space of the label is still left blank causing the tree to be moved down pls help to fix it i want the tree to be at the same position

.RDLC report layout...huge problem!!

 Hi!I'm designing a layout for a report in VS2008 using SSRS/RDLC format. And every time I setup a part of that report i test it on my workstation to see if everything is ok. But, today, i finished the first page of that report and uploaded it to my hosting server (were it's going to be used), and when i press the button to convert the report to .pdf and download it the layout is completely ruined :-/When i do the same thing in my workstation every thing 'comes out' beautifully, but up on the server it doesn't :(Why is that happening? Can anyone help me?

RDLC layout Problem


hi all

I have some problem about  rdlc report's layout,please help me

i have a table with some columns in that which some of them set for Hide Duplicates,now i want to show a special character  such as '-' or "" or ... instead of empty in duplicates column,see it:    

          name        family    tel 

          a                 b          c

          k                 z          ""    (real value is 'c' and  i want show "")

          u                 i           j


spmetal generated class and content type (for page layout) retrieve problem


I'm working with a console application to generate my sites and subsites (hierarchy). And i've got a problem with a generated spmetal class.


this doesn't work:


static void Main(string[] args)


            string SITE = string.Concat("http://"Environment.MachineName);         



Report layout problem

I have a report in which i placed a tablix and it contains several rows. Among these rows I display only one row based on a data field value using the hidden property of the TextBox in the row. The problem is that the other rows still occupy space on the report even though they are hidden. How can I overcome this?

fixed widht height rows master page


Hi all:
I have a master page with three rows. What i want is that header should be fixed to top. Footer should always be fixed to bottom and center area should have a vertical scroll (top to bottom ) only if the contents size increases. and it should look same on all resolution. What should be style sheet for body and rows. I read somehwere that I need to use div. I used it for scrolling but it shrinks/expands with resolution.
    font-family: Ver

problem for configuring fixed port


i am creating a website in vs2008...

now i want that it should be running on the fixed port every time..

what should i do?

plz help me with step by step explanation...

thanks in advance...

layout table width problem


I have a small problem with my two column layout which has two tables side by side. The left table is set to 80% and the right to 20% percent since I have to deal with a huge range of screen resolutions.
from screen as wide as 1900px to some as low as 1024 wide.

The problem exists in the top right cell which contains a Rich Image Field to add an image which I add images of about 250px in width. Everything displays fine on a larger screen resolution, but resizing the windows seems to the reduce the width of
of the right table causing the entire right table to move under the left column. Is there a way I can fix the width of the right table so this doesn't happen?


<table style="padding-top:0px; width:100%;" border="0" cellpadding="0" cellspacing="0" ID

Problem with the layout of the parameter panel


I work on several server or vm, and did not have this problem before until this new vm.  For all my reports, the parameter section of the reports is not displayed properly.  It usually displays the parameters on a grey background, in this case it's totally white.  Also, the section containing the arrows to go to a page, the zoom, the find/next, the refresh...has the same problem also.  Where can I look to solve this?



browser compatibility problem with datagrid with fixed header using CSS way


Hi Everybody,

I am trying to create a datagrid with fixed header and I was using the CSS way to implement this using:


However, this only works in IE and not in FF. The other alternative that I found was to create the header in a separate table and to use scrollbars on the datagrid. But, I want to stick to the first option and want to make it work on both browsers. The problem is I don't know how. Any inputs on this is greatly appriciated.


Redirect Page Layout: relative URL problem with content accessed by multiple URLs



I try to use the "Redirect Page" Layout to allow page to redirect to internal (relative url) content.

I ask users to put the URL in relative form: /doclist/docs/myfile.docx but when saved, the value takes the complete domain.


Then when we access the page using multiple URLs, the url is absolute and users can't access content (since I have one URL private for edition and multiple for reading).


Do you have any idea how I can fix this issue?


Thank you,



How can I set web parts to always be a specified fixed width and height?

Is that possible? I don't want their size to be changed.

Height problem with background


I can't get the height of my background to fill beyond the screen. For example, if the page needs scrolling, the background only fills 100% of the "viewable" screen and not the entire page. I'm pretty sure it's got something to do with the "page" div, because the others fill the entire page.

Here's my code:

    <form runat="server">
    <div id="page" class="page">


and the css:


form {height:100%;}

body {
    background: #DDD;
    font-size: .80em;
    font-family: "lucida grande",tahoma,verdana,arial,sans-serif;
    margin: 0px;
    padding: 0px;
    color: #666;

.page {
    width: 1000px;
    background-color: #fff;
    margin: 0px auto;
    border: 0;



Problem : Modifying a usercontrol layout force a rebuild.



When editing a UserControl (.ascx) in my project, it forces a rebuild of the website when requesting the page. This really gets annoying when programming any large project, the build time goes up to 15sec+. 

In the last few days I found myself looking at a blank screen more often than programming. This gets frustrating, all the waiting.

Any Solutions??

I miss PHP.

ASP.NetWindows Application  .NET Framework  C#  VB.Net  ADO.Net  
Sql Server  SharePoint  Silverlight  Others  All   

Hall of Fame    Twitter   Terms of Service    Privacy Policy    Contact Us    Archives   Tell A Friend