DIV dispaly problem in Firefox

hi all, i am fetching problem to coding nesting div. like:

<div id=" main">
     <div id=" left">
     content goes here...
     </div>
    
     <div id=" right">
      content goes here...
     </div>
</div>

Code (markup):

here main div height not fine in FF but ok in IE. i have used min-height:100% for main div but not working can u help me?

 

Without the complete markup, we can only guess. Showing html is only half the picture. In any case, Firefox will show what you wrote. Never, ever trust IE to do anything right.

 

thaks drhowarddrfine fro ur reply.
ok my css was like:

#main{width:100%; min-height:100%; border:1px solid #000000;}
#left{width:200; height:100%; float:left;  border:1px solid #000000;}
#rgiht{width:700; height:100%; float:right;  border:1px solid #000000;}

Code (markup):

now the dispaly problem is in FF that: height of left right div is OK but
main div not showing any height BUT it is ok in IE

 

did u reset all values through css ?

 

how can i do that mahendra rajeshirke's Avatar
mahendra rajeshirke?

 

google search for "reset css styles"

ty
best

try
http://meyerweb.com/eric/tools/css/reset/
http://sixrevisions.com/css/css-tips/css-tip-1-resetting-your-styles-with-css-reset/

 

1) does #main's parent have a height declared on it? If not, that min-height does nothing - and since you only declare min-height those 100% heights on 'right' and 'left' are automatically changed back to 'auto' Percentage heights on the whole are pretty much made of /FAIL/.

2) your content are floats, but you've set up no float wrapping behavior; something that is often tricky/painful when combined with min-height in standards compliant browsers. You are getting float wrapping in IE since the width declaration is tripping haslayout, but using width:100% the same time as 'border' means you are getting 100% width PLUS 2px, so that's also problematic.

3) 200 and 700 WHAT? EM, PX, PT, Quijada, Widgets, propylaptics's?

#main {
	overflow:hidden;
	zoom:1; /* can't use height or widht for haslayout thanks to border */
	border:1px solid #000;
}

#left {
	width:200px;
	float:left;
	border:1px solid #000;
}
#right {
	width:700px;
	float:right;
	border:1px solid #000;
}

Code (markup):

I'm assuming this is what you are trying to do - get it to wrap it's floats, NOT add 100% min-height... unless you really want that min-height:100%; in which case you need to add

html, body {
	position:relative; /* opera/safari 'fix' */
	height:100%:
}

Code (markup):

for that min-height to work. Remember the rule, percentage heights are ignored unless it's parent has an EXPLICIT height declared on it, the exception being the topmost element (which can be EITHER 'body' or 'html' depending on browser). Regardless of how you go about it you are NOT going to be able to make #left and #right stretch to the height of #main - that's just not how it works. This is why usually developers will put a faux-column image on the wrapping element.

Though just adding the CSS is NOT what our resident stooges fan was asking for. When DrHowardDrFine said "complete markup" he meant EVERYTHING since you doctype (or lack therein), what the elements presented in are wrapped in for parent elements (is it straight in body, or is there another wrapper?), and other CSS on the page could all radically effect how what you are trying to do is going to work. Snippets don't cut it.

Oh and people, DIV's in EVERY browser start out 0/0, so unless you are worried about 0/0 on body, needing a reset isn't related to his problem.

 

thank u very much deathshadow. i got my solution.

it was cool solution

 

i have same problem, i'll try the solution from deathshadow..