div issue in html in all browser - html

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

Related

Upgrading Doctype from XHTML 1.0 Transitional to HTML5 causes layout differences in simple html page

I am upgrading doctype for some application and I see the differences in layout. I created small demo to show the problem.
The old doctype:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
New doctype:
<!doctype html>
And I see this difference: notice second line is lower
This is happening when span element has font-size css attribute.
What is happening here? How do I debug it? Why layout is different?
Source for the page with old doctype:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en">
<head>
<meta charset="utf-8">
<title>The Transitional</title>
</head>
<body>
<div>
<h1>
<div>
<div>
<span>
<div><span>Is Your County Obese?</span></div>
<div><span style="font-size: 12px;">Select your county to see how it compares with other counties in the country</span></div>
</span>
</div>
</div>
</h1>
</div>
</body>
</html>
Source for the page with new layout:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>The HTML5</title>
</head>
<body>
<div>
<h1>
<div>
<div>
<span>
<div><span>Is Your County Obese?</span></div>
<div><span style="font-size: 12px;">Select your county to see how it compares with other counties in the country</span></div>
</span>
</div>
</div>
</h1>
</div>
</body>
</html>
Source of the side-by-side view:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>The HTML5</title>
</head>
<body>
<div style="display: flex" >
<iframe src="doctype1.html" style="width: 30%; height: 300px;" ></iframe>
<iframe src="doctype2.html" style="width: 30%; height: 300px;" ></iframe>
</div>
</body>
</html>
Here is a properly structured version:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>The HTML5</title>
</head>
<body>
<div id="top">
<h1>Is Your County Obese?</h1>
<p>Select your county to see how it compares with other counties in the country</p>
</div>
</body>
</html>

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 deal with the collapsed parent?

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

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