How can I deal with the collapsed parent? - html

The parent collapses when I do not specify a height..
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css" >
#parent{width:500px;border:#000 thin groove}
#parent p{float:left}
</style>
</head>
<body>
<div id="parent">
<p height="100px" width="100px">text</p>
</div>
</body>
</html>


Add overflow: hidden to your #parent div
Explanations as to why this works is at http://www.quirksmode.org/css/clearing.html

Related

div issue in html in all browser

I have two html code. In first code background is not coming. But In second code when i put clear:both; code then background is coming. Can you have any alternative easy option to show background instead of height. I dont want to put height and extra div structure.
First Code:-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>
<!-- please dont use height in background -->
<body>
<div style="background:#990000;">
<div style="float:left;">left part</div>
<div style="float:right">right part</div>
</div>
</body>
</html>
Second Code:-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>
<!-- please dont use height in background -->
<body>
<div style="background:#990000;">
<div style="float:left;">left part</div>
<div style="float:right">right part</div>
<div style="clear:both"></div>
</div>
</body>
</html>
Your kind revert shall be highly appriciated. Thanks in Advance.

Please Try code given below
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org /TR/xhtml1/DTD/xhtml1- transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>
<!-- please dont use height in background -->
<body>
<div style="background-color:#999000;overflow:hidden;">
<div style="float:left;">left part</div>
<div style="float:right">right part</div>
</div>
</body>
</html>
Add overflow:hidden. It will be work.
thanks

Hi now there are many option clear to parent div if you used floating
as like this first is
.mainclear{
background:#990000;
}
.mainclear:after{
content:'';
clear:both;
overflow:hidden;
display:block;
}
secound is
.mainclear{
background:#990000;
overflow:hidden;
}
your html code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>
<!-- please dont use height in background -->
<body>
<div class="mainclear">
<div style="float:left;">left part</div>
<div style="float:right">right part</div>
</div>
</body>
</html>
Demo first
---------\
Demo Second

Add overflow:auto to the parent div
<div style="background:#990000; overflow:auto">
DEMO

Why is there a blank line at the top of my html page?

Here is my html code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<div>
kjkj
</div>
</body>
</html>
Lve demo:
http://tinkerbin.com/O2MwkUTj
Why is there a blank line at the top of my web page?
I noticed that removing the div, or removing the doctype fixes the problem...

It is because Tinkerbin is getting confused.
If you put your HTML into a file it works fine. In Tinkerbin, the following happens in the preview:
<body>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<div>
kjkj
</div>
</body>
I presume it is removing some tags such as <html>, <head> and <body> when outputting your page in order to display inside a page created for the preview.

How do I fix this element overlapping issue when I zoom in IE7?

When I zoom in in IE7, the element with position relative gets overlapped..How can I fix this?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HTML5</title>
<style type="text/css" media="all">
.wrapper{width:500px;height:1000px;border:1px red solid;}
.block1{border:1px red solid;width:100px ;height:100px;position:relative;}
.block2{border:1px red solid;width:100px ;height:100px;}
.block3{border:1px red solid;width:100px ;height:100px;}
</style>
</head>
<body>
<div class="wrapper">
<div class="block1">A</div>
<div class="block2">B</div>
<div class="block3">C</div>
</div>
</body>
</html>
I tries adding zoom:1 to .block1 also but it didn't work

.block1 {
zoom: 1 ;
}
Try something like this, Hope this helps.

How can I solve this clear off inconsistency in Firefox and IE7?

When I am clearing an element in Firefox4,it goes to the next line leaving some spacing in between and in IE7, it goes to the next line without leaving any space..
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
#a{border:#000 thin groove;float:left;}
#b{border:#000 thin groove;float:left;clear:left;}
</style>
</head>
<body>
<p id="a">Testing</p>
<p id="b">Testingb</p>
</body>
</html>

Most browsers now have a default margin-top and margin-bottom greater than zero for p elements. Internet Explorer doesn't.
Adding p { margin: 0; } to your styles will fix it.

Div height not support

Div height is not support in below code
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>New Page 1</title>
</head>
<style type="text/css">
.Footer{
background-color:red;
width:673px;
height:1px;
}
</style>
<title>Fist</title>
</head>
<body>
<div class="Footer"></div>
</body>
</body>
</html>
But its work below code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>New Page 1</title>
</head>
<style type="text/css">
.Footer{
background-color:red;
width:673px;
height:1px;
}
</style>
<title>Second</title>
</head>
<body>
<div class="Footer"></div>
</body>
</body>
</html>
How to set div height in 1st coding

why are you using 2 body tags??????????????
add < befor div tag

In first piece of code you have:
div class="Footer"></div>
which should be:
<div class="Footer"></div>
You also do not have a doctype set for your first example. I would suggest adding something like:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<body>
div class="Footer"></div>
</body>
You can add < before div tag