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 derfloh on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

CSS - contend exceeding background

Status
Not open for further replies.

ralphtrent

Programmer
Jun 2, 2003
958
US
Hello
I have a page where i list contacts. right now I have a background-color or white and a border to surround the data. The data comes from a database. The content is going past the border/background color. I found that setting the position to static works, but then I can not place the data in the correct location because I need to use abosulte position for that. Any idea on what I can do? Pretty much, i need the background to grow with the content.

Thanks
 
Absolutely positioning takes the element out of the flow of the document, and so will not have any effect on the background. You have no choice but to not use abs.pos. if you want it to affect the content.

Having said that, I would advise you post a cut-down test-harness showing what your output is like, and see if anyone here can advise on how to achieve the look you're after without using abs.pos.

Hope this helps,
Dan

[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
 
Ok Here is a [a href=']link[/a] to a gif of the problem I am having.

I have in my html a wrap div, my css for this div looks like this:
Code:
#wrap
{	
	margin: 0 auto;
	background: #fff;
	border: 1px solid #000;
	color: #000;
	width: 777px;
	height:100%;
}

I have a div tag surrounding the data that I am having a problem with, its css looks like this
Code:
#ContactUs_Analyst
{
	top:191pt;
	height:100%;
	position: absolute;
	font-size:10pt;
	width:50%;
	text-align:left;
	left:50%;
}
Please let me know if need any other data.
 
I guess my question is, why do you need to position this second div absolutely? From the example this is not visible. If it is just a specific position in the wrapper div, you can handle that position with margins. If there are usually more things around it, then floating is probably a better option.
 
Here is the layout of the [a href="[URL unfurl="true"]http://www.aonj.com/rmt/css_help_2.gif"[/URL]]page[/a]. (sorry its so big. I am using 3 ASP:Repeaters to show the data. I want the managment on one side and I want the analyst on the other side. I am trying to do this with out tables. So I have put the directors and Managers in one dive and set their location, and I can do the same for the analyst, but I can not get the background to "grow" with the content.

Hope that helps.
 
As I said, use [tt]overflow: auto;[/tt] on the wrapper, then float both divs holding the two lists. Use margins to position those two divs where you want them.
 
If I Use the overflow: auto, Im gonna get a scroll bar, how do I avoid that?

Thanks
 
Don't put a height in your container. If your container has a height of auto, overflow: auto; will not cause scrollbars. Have you tried that or are you just expecting scrollbars to appear?
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top