I'm trying to make an image go ALL the way right on a DIV but it's not happening:\
<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<style>* { margin:0;padding:0; }
#login {
background:red;
width:200px;
xpadding:5px;
}
#login a, #login a:visited {
color:blue;
text-decoration:none;
font:12px verdana;
}
</style>
<title>Untitled 1</title>
</head>
<body>
<div id="login"><div style="float:right;margin-right:5px;"><img src="https://si0.twimg.com/sticky/default_profile_images/default_profile_0_normal.png" /> </div>
<div style="float:right;color:red;text-align:right;">#Testing<br />Logout</div>
<div style="clear:both;"></div></div>
</body>
</html>
Try that on say... http://htmledit.squarefree.com/ that and you'll see red is still visible on the right-hand side of the border when it should float all the way right.
<div style="float:right,margin-right:5px;">
margin-right:5px
Take off the margin-right:5px; on your inner DIV around the image.
<div style="float:right;">
Well the float has "margin-right:5px;" in its style attribute. That's causing a 5-pixel margin on the right... if you remove that, it will go all the way to the right.
You asked to make the image go all the way to the right on a div, but you didn't say which div. The img is already all the way to the right on its immediate parent, but that div is 5 pixels from the right of its parent ("login").
Setting the margin to 0 inside your image div gets the image all the way over.
<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<style>body { margin:0;padding:0; }
#login {
background:red;
width:200px;
xpadding:5px;
}
#login a, #login a:visited {
color:blue;
text-decoration:none;
font:12px verdana;
}
</style>
<title>Untitled 1</title>
</head>
<body>
<div id="login"><div style="float:right;margin-right:0px;"><img src="https://si0.twimg.com/sticky/default_profile_images/default_profile_0_normal.png" /> </div>
<div style="float:right;color:red;text-align:right;">#Testing<br />Logout</div>
<div style="clear:both;"></div></div>
</body>
</html>
Do like that:
<div id="login"><div style="float:right;padding-left:10px;"><img src="https://si0.twimg.com/sticky/default_profile_images/default_profile_0_normal.png" /> </div>
Related
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
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.
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 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
When I added
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
line to the top of my html file, my css rules disappear in firefox. Also i can't see them with firebug.
Do you have any idea about this problem ?
Make sure that the files are sent by the server with the correct MIME type (text/css). Have a look in the error console ( IIRC the menu should be Tools / Error Console in the English version).
Usually, if the file ends with .css, this should happen automatically, however there are still badly configured servers around. If you are using a Apache web server, you may be able to correct this with a .htaccess file, otherwise you'll need to ask your support.
Details: https://developer.mozilla.org/en/incorrect_mime_type_for_css_files
You need to add attributes to your start-html tag to get it right. This is done since XHTML really is XML.
<!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" xml:lang="en" lang="en">
<head>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
...
</body>
</html>
The code above suggest you to have the style.css file in the root-catalog of your website.
Please check it
http://www.w3schools.com/tags/tag_doctype.asp
i think you have more idea of doctype
<!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">
html, body {
padding:0;
margin:0;
height:100%;
}
#wrap {
background:red;
height:100%;
overflow:hidden;
}
#right {
background:blue;
float:left;
width:30%;
height:100%;
}
#left {
background:yellow;
float:left;
width:70%;
height:100%;
}
</style>
</head>
<body>
<div id="wrap">
<div id="left"> Content </div>
<div id="right"> Side Content </div>
</div>
</body>
</html>