Good afternoon.
I'm trying to create a page with a bottom div that has inside two divs, one floating left and the other in the right. I tried in IE6 and it works fine, but in Firefox 1.0 the elements inside the bottom div are positioned outside the div. It seems that the div height is incorrectly calculated.
Can someone help me?
Here is the code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<style>
* {
padding: 0px;
margin: 0px;
}
html, body {
width: 99%;
height: 100%;
}
#content {
width: 100%;
height: 80%;
border: 1px dashed Black;
}
#bottom {
width: 100%;
padding-top: 5px;
padding-bottom: 5px;
vertical-align: middle;
border: 1px solid Red;
}
#access {
float: left;
}
#navigation {
float: right;
}
</style>
<head>
</head>
<body>
<div id="content">
</div>
<div id="bottom">
<div id="access">
<a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Link1</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Link2</a>
</div>
<div id="navigation">
<a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Link3</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Link4</a>
</div>
</div>
</body>
</html>
Thanks in advance,
MigrateTry adding the following to #bottom:
height: 5%;
Also, move your opening <head> tag to just under the <html> tag. In addition, be sure to comment out the style section.Lee thanks for the answer.
That partially resolves my problem because although it works for the example I've showed, I want the bottom div to have it's size calculated by the elements inside it. To better ilustrate my problem see the next example:
<div id="bottom">
<div id="access">
<a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Link1</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Link2</a>
</div>
<div id="navigation">
<a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Link3</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Link4</a>
<p>Test</p>
<p>Test</p>
<p>Test</p>
</div>
</div>
I've inserted 3 <p> tags to the div and this works fine in IE, because the div adapts it's height, but in Firefox I have to put the height tag.
I want this behaviour because this page is dynamic and elements inside the bottom div can vary.
Thanks again,
MigrateStraight from the CSS Specs on the float property.:
Text flows normally up to the inner box, which is pulled out of the flow and floated to the right margin
Floated elements are not part of the document flow, and therefore, parent elements won't be containing them, floated elements basically become areas of which the document cannot flow to (unless specifically placed there with positioning). However, one solution is to put in another div, and set it to clear both floats. This empty div won't be allowed to take up the space of the floated elements, and must jump to the next available line. Since it is part of the document flow, the parent div will expand so as to enwrap it. Try this:
<!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" xml:lang="en" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="Content-Style-Type" content="text/css" />
<title></title>
<style type="text/css">
* {
padding: 0px;
margin: 0px;
}
html, body {
width: 99%;
height: 100%;
}
#content {
width: 100%;
height: 80%;
border: 1px dashed #000;
}
#bottom {
width: 100%;
padding-top: 5px;
padding-bottom: 5px;
border: 1px solid #ff0000;
}
#access {
display:inline;
float: left;
width:50%;
}
#navigation {
display:inline;
float: right;
width:50%;
}
#c {
clear:both;
}
</style>
</head>
<body>
<div id="content">
</div>
<div id="bottom">
<div id="access">
<a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Link1</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Link2</a>
</div>
<div id="navigation">
<a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Link3</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Link4</a>
<p>Test</p>
<p>Test</p>
<p>Test</p>
</div>
<div id="c"></div>
</div>
</body>
</html>Hello MstrBob.
Thanks for the answer. That resolved my problem.
Best Regards,
Migrate
I'm trying to create a page with a bottom div that has inside two divs, one floating left and the other in the right. I tried in IE6 and it works fine, but in Firefox 1.0 the elements inside the bottom div are positioned outside the div. It seems that the div height is incorrectly calculated.
Can someone help me?
Here is the code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<style>
* {
padding: 0px;
margin: 0px;
}
html, body {
width: 99%;
height: 100%;
}
#content {
width: 100%;
height: 80%;
border: 1px dashed Black;
}
#bottom {
width: 100%;
padding-top: 5px;
padding-bottom: 5px;
vertical-align: middle;
border: 1px solid Red;
}
#access {
float: left;
}
#navigation {
float: right;
}
</style>
<head>
</head>
<body>
<div id="content">
</div>
<div id="bottom">
<div id="access">
<a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Link1</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Link2</a>
</div>
<div id="navigation">
<a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Link3</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Link4</a>
</div>
</div>
</body>
</html>
Thanks in advance,
MigrateTry adding the following to #bottom:
height: 5%;
Also, move your opening <head> tag to just under the <html> tag. In addition, be sure to comment out the style section.Lee thanks for the answer.
That partially resolves my problem because although it works for the example I've showed, I want the bottom div to have it's size calculated by the elements inside it. To better ilustrate my problem see the next example:
<div id="bottom">
<div id="access">
<a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Link1</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Link2</a>
</div>
<div id="navigation">
<a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Link3</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Link4</a>
<p>Test</p>
<p>Test</p>
<p>Test</p>
</div>
</div>
I've inserted 3 <p> tags to the div and this works fine in IE, because the div adapts it's height, but in Firefox I have to put the height tag.
I want this behaviour because this page is dynamic and elements inside the bottom div can vary.
Thanks again,
MigrateStraight from the CSS Specs on the float property.:
Text flows normally up to the inner box, which is pulled out of the flow and floated to the right margin
Floated elements are not part of the document flow, and therefore, parent elements won't be containing them, floated elements basically become areas of which the document cannot flow to (unless specifically placed there with positioning). However, one solution is to put in another div, and set it to clear both floats. This empty div won't be allowed to take up the space of the floated elements, and must jump to the next available line. Since it is part of the document flow, the parent div will expand so as to enwrap it. Try this:
<!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" xml:lang="en" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="Content-Style-Type" content="text/css" />
<title></title>
<style type="text/css">
* {
padding: 0px;
margin: 0px;
}
html, body {
width: 99%;
height: 100%;
}
#content {
width: 100%;
height: 80%;
border: 1px dashed #000;
}
#bottom {
width: 100%;
padding-top: 5px;
padding-bottom: 5px;
border: 1px solid #ff0000;
}
#access {
display:inline;
float: left;
width:50%;
}
#navigation {
display:inline;
float: right;
width:50%;
}
#c {
clear:both;
}
</style>
</head>
<body>
<div id="content">
</div>
<div id="bottom">
<div id="access">
<a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Link1</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Link2</a>
</div>
<div id="navigation">
<a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Link3</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Link4</a>
<p>Test</p>
<p>Test</p>
<p>Test</p>
</div>
<div id="c"></div>
</div>
</body>
</html>Hello MstrBob.
Thanks for the answer. That resolved my problem.
Best Regards,
Migrate