Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations TouchToneTommy on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Preventing the overlap of elements

Status
Not open for further replies.

TheDust

Programmer
Aug 12, 2002
217
US
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":

Code:
<head>
<style type=&quot;text/css&quot;>
#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=&quot;implementColor(colorScheme)&quot;>
<div id=&quot;mainframe&quot;>
    <div id=&quot;flower1&quot;></div>
    <div id=&quot;flower2&quot;></div>
    <div id=&quot;date&quot;>
	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.
 
aVisualCouldHelp = 'true'

else somewere(try = &quot;width:100%;&quot;);
 
Experiment: Did you try just giving #date a small left margin? Try to set relative positioning to see if it akes a difference.

No point using width: 100%, a div will expand to that anyway unless you have specified float or something.





- É -
 
The trick here is that this dotted box that is being overlapped is the output of a blogger. It will be repeated over and over, so it needs to be able to adapt and act just like a table would... it needs to recognize the flower div blocks and stop there. Is this possible?
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top