I have this simple xhtml:
<?xml version="1.0" encoding="UTF-8"?>
<!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" style="height: 100%;">
<head>
</head>
<body style="height: 100%;">
<div style="height: 100%; overflow: auto; background-color: #00f;">
<div style="height: 400px; margin-bottom: 2000px; background-color: #f00;"></div>
</div>
</body>
</html>
It shows two rectangles - but the lower (blue) one doesn't show the 2000px margin. It is only as tall as the window. Why? Or more importantly, how do I make it to show? I can add some dummy text like 'aaa' between those two </div> </div> but I don't feel that's the right way of doing it.
Thanks a lot for help!
If you want 2000px of blue beneath the 400px div, make this change:
Change the height of the containing div to be the height of it's contents + the 2000px space.
<?xml version="1.0" encoding="UTF-8"?>
<!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" style="height: 100%;">
<head> </head>
<body style="height: 100%;">
<div style="height: 2400px; overflow: auto; background-color: #00f;">
<div style="height: 400px; background-color: #f00;">
</div>
</div>
</body>
</html>
Remove your height: 100% from <body>:
<?xml version="1.0" encoding="UTF-8"?>
<!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" style="height: 100%;">
<head>
</head>
<body>
<div style="height: 100%; overflow: auto; background-color: #00f;">
<div style="height: 400px; margin-bottom: 2000px; background-color: #f00;"></div>
</div>
</body>
</html>
Get rid of the height declaration in the blue background div.
<?xml version="1.0" encoding="UTF-8"?>
<!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" style="height: 100%;">
<head>
</head>
<body style="height: 100%;">
<div style="background-color: #00f;overflow:auto">
<div style="height: 400px; margin-bottom: 2000px; background-color: #f00;"></div>
</div>
</body>
</html>
It's because you have a height set on the containing div. Margins aren't content, so they don't trigger overflow. You could add another div around the innermost div, and give it a 1px padding, or, as others have suggested, you could adjust your existing containing divs.
lotusvskoi: Thanks but then the body scrolls, not the outer div.
endash: Yes! This is it! Thank you a lot, also for the explanation. Wrapping the innermost div inside another div with padding: 1px works great!
Final version, for archiving:
<?xml version="1.0" encoding="UTF-8"?>
<!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" style="height: 100%;">
<head>
<style>
</style>
</head>
<body style="height: 100%;">
<div style="height: 100%; overflow: auto; background-color: #00f;">
<div style="padding-bottom: 1px;">
<div style="height: 400px; margin-bottom: 2000px; background-color: #f00;">
</div>
</div>
</div>
</body>
</html>
Related
I have written some code where a div should overlap IFrame. In Chrome its working fine, where as in IE IFrame overlaps div. Below is the code. Any idea on how to fix this issue such that it works fine with both IE and Chrome?
<!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>
<title>IFrame Div</title>
</head>
<body>
<div top="86px" left="5px" width="500px" height="500px" z-index="20000" style="width: 1000px;
border-color: red; height: 500px; position: absolute !important; border-color: red;
left: 5px; top: 86px; border-width: 5px; background-color: #E6E6E6; opacity: .8;">
</div>
<iframe src="http://samplepdf.com/sample.pdf" height="700px" width="600px"></iframe>
</body>
</html>
Give the iframe: z-index:-999;
Or you could use in-line CSS: <iframe src="http://samplepdf.com/sample.pdf" height="700px" width="600px" style="z-index:-999;"></iframe>
I have one floating header div set to 1000px inside another div (width 1000px) and followed by a div with a smaller width. The problem is this table inside this div is on the left of the header.
If I add some character above the table, it is ok. Is this a bug?
This works fine in IE and Google Chrome.
<!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>
<title></title>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<style>
#container
{
margin: 0px auto;
width: 1000px;
}
#header
{
margin-top: 15px;
width: 1000px;
float: left;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
aaa
</div>
<div style="width: 900px;">
<table>
<tr>
<td>
the wow
</td>
</tr>
</table>
</div>
</div>
</body>
</html>
The question is not clear. If what you want is to display the table below the header, simply take out the
float: left;
Please make clear what you want.
I'm somewhat new to html and css and I am having a really strange issue with this ASP.NET page. The following code draws the div (should be 50x50) as 50x100 in IE9. It may be drawing twice. In Compatibility mode it works just fine. As you can see it's a super-simple piece of code.
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="DivAlignmentTest.Default" %>
<!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 runat="server">
<title></title>
<style type="text/css">
html, body
{
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
}
#Div1
{
width: 50px;
height: 50px;
background-color: Red;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div id="Div1" />
</form>
</body>
</html>
Any help would be appreciated,
Jason
Change
<div id="Div1" />
to
<div id="Div1"></div>
should make it work properly.
You cant self close a div tag
Try:
<div id="Div1"></div>
I am attempting to use a div to create a background for an SVG image, but the div is not displaying. I'm not sure if it is legal to mix SVG and XHTML with the XHTML inside the SVG?
Here is a snippet of the HTML...
<?xml version="1.0" encoding="UTF-8"?>
<!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"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:v="urn:schemas-microsoft-com:vml">
...
<body>
...
<svg:svg class="searchPoint" height="2048px" id="searchPoint" version="1.1" width="2560px">
<div lang="" id="mmh_0" dir="ltr" widgetid="mmh_0" class="mmh"
style="left: -3px; top: -3px; height: 100px; width: 100px; display: block; z-index: auto;">
</div>
<svg:image class="searchPoint" height="15" id="1079043"
title="1079043" width="15" x="1183.0"
xlink:href="http://myHost/myUri/styles/mapIcons/SearchLocation.gif"
xmlns:xlink="http://www.w3.org/1999/xlink" y="1129.0"/>
</svg:svg>
...
</body>
...
For what it is worth, you can put a div inside a VML element in IE.
Yes you can, you need to put it in a foreignObject tag
I have an extremely simple page that isn't displaying properly in IE6. In this browser, the left nav pushes down a table that's in the content area. Can anyone help me get the table to stay at the top of its container where it should be, rather than getting pushed down by content in the left div?
Here's the html code for the page:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css" media="screen">
body
#nav
{
float: left;
width: 180px;
background-color: #999;
}
#content
{
margin-left: 210px;
background-color: #999;
}
</style>
</head>
<body>
<div id="nav">
<div>left content</div>
</div>
<div id="content">
<table style="width: 100%; background-color: #666666">
<tr><td>table</td>
</tr>
</table>
</div>
</body>
</html>
Here's a url so you can see what it looks like:
http://www.morganpackard.com/cssTest.html
Give your table a width of 99% instead.
Another solution is to make the table float left and have a width of 100%....
You could just make the content float left too:
#content
{
float:left;
...
}
don't forget to adjust the margin-left though
Other solution that doesn't quite work for other browsers though:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css" media="screen">
#nav
{
float: left;
width: 180px;
background-color: #999;
}
#content
{
float: right;
}
</style>
</head>
<body>
<div id="container">
<div id="nav">
<div>left content</div>
</div>
<div id="content">
<table style="width: 100%; background-color: #666666">
<tr><td>table</td>
</tr>
</table>
</div>
</div>
</body>
</html>
Notice the container and the float:right;
If all else fails, go with a table layout *ducks and covers* from the CSS purists:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css" media="screen">
#nav
{
width: 180px;
background-color: #999;
}
#content
{
background-color: #999;
}
</style>
</head>
<body>
<table style="width:100%;">
<tr>
<td id="nav">
<div>left content</div></td>
<td id="content">
<table style="width: 100%; background-color: #666666">
<tr><td>table</td>
</tr>
</table></td>
</tr>
</table>
</body>
</html>