I would like to float a div so that it is horizontally centered within another div. Vertically it should be at the top of the containing div.
I would like this floated div to be a transparent layer on top of the containing div. This transparent floated will contain text.
Is it possible to achieve this effect?hmmm, I don't believe that you can float to the center (only left or right). But you can give the margins an auto value to equalize the position like:
.divclassZ {
margin-left: auto;
margin-right: auto;
}I have used the following code:
.brochure1_draft_message {
width: 50%;
position: relative;
left: 25%;
top: 20px;
border: 1pt solid red;
}
This places the brochure1_draft_message div in the correct place. However the problem I have now is that the containing div is moved down by the height of the floated div. Hope this makes sense.hmmm,
I just typed up a test:
<!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>
<title>test</title>
<meta http-equiv="content-type"
content="text/html;charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<style>
<!--
#container {
width: 500px;
margin-left: auto;
margin-right: auto;
background: #ccc;
height: 500px;
}
.brochure1_draft_message {
width: 50%;
position: relative;
left: 25%;
top: 20px;
border: 1pt solid red;
}
-->
</style>
</head>
<body>
<div id="container">
<div class="brochure1_draft_message">
stuff stuff stuff
</div>
</div>
</body>
</html>
that seems to work fine from a positioning standpoint. I didn't change your code at all concerning the "brochure1_draft_message" class style.
IanThanks for your help. I think I have found a solution.
See
<!-- w --><a class="postlink" href="http://www.property-description.com/w9_2an">www.property-description.com/w9_2an</a><!-- w -->
I set the containing div to relative positioning
and then used the following CSS for the child div:
.brochure1_draft_message {
width: 50%;
position: absolute;
left: 25%;
top: 20px;
border: 1pt solid red;
padding: 5px;
text-align: center;
background-color: white;
}
Let me know if I there is any flaw in the above solution. It seems to work fine in both firefox and explorer 6. havent tried 5.
Thanks for you helpthat seems (at first glance) to produce the same result as the my most previous post (although with more lines of code).
Oh well, 6 of one-two dozen of another
thanks for your help. bye
I would like this floated div to be a transparent layer on top of the containing div. This transparent floated will contain text.
Is it possible to achieve this effect?hmmm, I don't believe that you can float to the center (only left or right). But you can give the margins an auto value to equalize the position like:
.divclassZ {
margin-left: auto;
margin-right: auto;
}I have used the following code:
.brochure1_draft_message {
width: 50%;
position: relative;
left: 25%;
top: 20px;
border: 1pt solid red;
}
This places the brochure1_draft_message div in the correct place. However the problem I have now is that the containing div is moved down by the height of the floated div. Hope this makes sense.hmmm,
I just typed up a test:
<!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>
<title>test</title>
<meta http-equiv="content-type"
content="text/html;charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<style>
<!--
#container {
width: 500px;
margin-left: auto;
margin-right: auto;
background: #ccc;
height: 500px;
}
.brochure1_draft_message {
width: 50%;
position: relative;
left: 25%;
top: 20px;
border: 1pt solid red;
}
-->
</style>
</head>
<body>
<div id="container">
<div class="brochure1_draft_message">
stuff stuff stuff
</div>
</div>
</body>
</html>
that seems to work fine from a positioning standpoint. I didn't change your code at all concerning the "brochure1_draft_message" class style.
IanThanks for your help. I think I have found a solution.
See
<!-- w --><a class="postlink" href="http://www.property-description.com/w9_2an">www.property-description.com/w9_2an</a><!-- w -->
I set the containing div to relative positioning
and then used the following CSS for the child div:
.brochure1_draft_message {
width: 50%;
position: absolute;
left: 25%;
top: 20px;
border: 1pt solid red;
padding: 5px;
text-align: center;
background-color: white;
}
Let me know if I there is any flaw in the above solution. It seems to work fine in both firefox and explorer 6. havent tried 5.
Thanks for you helpthat seems (at first glance) to produce the same result as the my most previous post (although with more lines of code).
Oh well, 6 of one-two dozen of another
thanks for your help. bye