[SOLVED] Div resize to image

[FlyingIsFun1217]

Hey!

 

I've got a CSS div that is used to hold the contents of my page. Sometimes though, I've got content that is too large for the div container, and it extends outward (out of the div). Is there any way to have it expand only with its contents?

 

Thanks!

FlyingIsFun1217

[FlyingIsFun1217]

Ok, I've made it to automatically expand, but now the column next to it doesn't expand downward with it (I want them to always be the same height):

 

body
{
min-width:		800px;
width:			auto;
margin:			0%;
padding:		0%;
font-family:		georgia;
height:			auto;
}

div.boxSingle
{
padding:		5px;
background: 		#E4E3FE;
border:			1px solid #666581;
width:			100px;
font-family: 		georgia;
color: 			#47465A;
}

div.boxDouble
{
padding:		5px;
background:		#E4E3FE;
border:			1px solid #666581;
width:			200px;
font-family: 		georgia;
color: 			#47465A;
}

div.adminBox
{
padding:		5px;
background: 		#E4E3FE;
border:			1px solid #666581;
width:			40%;
font-family: 		georgia;
color: 			#47465A;
}

div.sidebarMenu
{
padding:		5px;
background:		#E4E3FE;
border:			1px solid #666581;
width:			95%;
font-family:		georgia;
color:			#47465A;
}

div.imageTitle
{
color:			#47465A;
text-decoration:	underline;
font-weight:		bold;
}

table.main
{
border-collapse:	collapse;
border-style:		solid solid solid solid;
border-width:		1px 1px 1px 1px;
padding:		0px 50px 50px 0px;
border-color:		#666581 #666581 #666581 #666581;
border-spacing:		10px;
background-color:	#E4E3FE;
}

table.main td
{
border-width:		1px 1px 1px 1px;
padding:		1px 25px 1px 25px;
border-style:		none none none none;
-moz-border-radius: 	0px 0px 0px 0px;
}

#header
{
background:		#ddd;
min-height:		100px;
max-height:		125px;
height:			17%;
text-align:		center;
text-decoration:	underline;
}

#header h1
{
margin:			0%;
}

#sidebar
{
float:			left;
width:			20%;
background:		#99c;
min-height:		500px;
height:			auto;
}

#container
{
float:			right;
width:			80%;
background:		#9c9;
min-height:		500px;
height:			auto;
}

#footer
{
clear:			both;
background:		#cc9;
height:			5%;
}

#footer p
{
margin:			0%;
padding:		10px;
background:		#ddd;
}

a:link
{
color: 			#4F6A90;
text-decoration: 	underline;
}

a:visited
{
color: 			#374A64;
text-decoration: 	underline;
}

a:active
{
color: 			#374A64;
text-decoration: 	underline;
}

a:hover
{
color: 			#374A64;
text-decoration: 	underline;
}

 

Thanks!

FlyingIsFun1217

[haku]

Google 'faux columns'. It's the technique you want for this.

[FlyingIsFun1217]

Alright, thanks for the help; I'm looking it up right now

 

FlyingIsFun1217

[FlyingIsFun1217]

The only problem with that technique is that I am using percentage-based widths for the 'columns', so if the window is resized, the width of the div will be at a different width of the background image...

 

Well, this is getting really... interesting...

 

FlyingIsFun1217

[FlyingIsFun1217]

Can't modify, so...

 

I just redesigned the site to use stacked div's, so all is good now, just have a new problem I see fit to use a different topic (as it's subject is a little different).

 

FlyingIsFun1217