I'm rec-creating my site in complete CSS (no tables)... I have a blogger that starts at the top of a page, but first must wrap around 2 images that have been positioned in div tags using CSS. The header for each blog entry has a border and such, but until it clears the 2 images aligned left at top, the border sneaks behind the images. The text does not. It flows around whatever elements are aligned within the main frame. My question is does anyone know how I can set a 100% width for the element but have it recognize and not hide its borders behind other div elements that are already occupying that screen space? Here's my code (with "date" being the element being hidden behind elements "flower1" and "flower2":
Any ideas? I wish I could post an example of what this looks like, but right now my server is down. If that would be of assistance, please let me know and I'll post it as soon as it is up and running again... thanks.
Code:
<head>
<style type="text/css">
#flower1, #flower2, #flower3 {
float:left;
clear:left;
padding:0px;
margin-right:-9px;
position:relative;
top:-5px;
left:-5px;
}
#flower1 {
width:169px;
height:43px;
}
#flower2 {
width:120px;
height:15px;
}
#date {
border:1px dashed #ffffff;
margin:0px;
padding:2px;
font-size:14px;
clear:none;
}
</style>
</head>
<body onLoad="implementColor(colorScheme)">
<div id="mainframe">
<div id="flower1"></div>
<div id="flower2"></div>
<div id="date">
Tuesday, September 2nd, 2003
</div>
</div>
</body>
Any ideas? I wish I could post an example of what this looks like, but right now my server is down. If that would be of assistance, please let me know and I'll post it as soon as it is up and running again... thanks.