3 replies [Last post]
leadwing
Offline
newbie
Last seen: 10 years 46 weeks ago
Joined: 2009-10-30
Posts: 2
Points: 3

This is driving me insane...
All I want is for my div elements to scale with whatever is inside it...

My HTML:

<body>
	<div id="container">
		<div id="upper">
				<div id="left">
					<div id="menu">
						<jdoc:include type="modules" name="left" />
					</div>					
					<div id="quotes">
					</div>
				</div>
				<div id="right">
					<div id="wrapper3">
						<div id="edge_t">
							<div id="corner_tr">
							</div>
						</div>
						<div id="wrapper4">
					 		<div id="content">
								<jdoc:include type="component" />
							</div>
							<div id ="edge_r">
							</div>
						</div>
 
					</div>
				</div>
		</div>
			<div id="bottom">
				<div id="corner_bl">
				</div>
				<div id="edge_b">
					<div id="corner_br">
					</div>
				</div>
			</div>		
	</div>
</body>

My CSS:

html {
	height: 100%;
}
body {
    font-family: Tahoma;
    margin: 0;
    padding: 0;
    font-size: 13px;
    color: #000000;
	height:100%;
}
a:link, a:visited {
    text-decoration: underline;
    font-weight: normal;
	font-size: 0px;
    color: #000;
    outline: none;
    text-align: left;
}
#container {
    background-image:url('../images/title.jpg');
	background-repeat:no-repeat;
	background-position:top; 
	padding-top:196px;
    width:997px;
    margin-left: auto;
    margin-right: auto;
    background-color: #ffffff;
	height: 100%;
}
#wrapper3 {
    width:725px;
	height: 100%;
}
#wrapper4 {
    width:725px;
	height: 100%;
}
#left {
    width: 272px;
	height: 100%;
	float: left;
    background-image:url('../images/edge_l.jpg');
	background-repeat:repeat-y;
    padding: 0px;
}
#right {
	height: 100%;
    width: 725px;
    padding: 0px;
	float: right;
}
#bottom {
	width: 997px;
	float:left;
	clear:both;
}
#upper {
	width: 997px;
	height: 100%;
}
#edge_b {
	width: 725px;
	height: 18px;
	float: right;
    background-image:url('../images/edge_b.jpg');
    background-repeat:repeat-x;
}
#edge_t {
    width: 725px;
    height: 19px;
    background-image:url('../images/edge_t.jpg');
    background-repeat:repeat-x;
}
#edge_r {
    width: 18px;
    height: 100%;
    float: right;
    background-image:url('../images/edge_r.jpg');
    background-repeat:repeat-y;
}
#corner_tr {
    width: 18px;
    height: 19px;
    background-image:url('../images/corner_tr.jpg');
    float: right;
}
#corner_br {
    width: 18px;
    height: 19px;
    background-image:url('../images/corner_br.jpg');
    float: right;
}
#corner_bl {
	width: 272px;
	height: 18px;
	float: left;
    background-image:url('../images/corner_bl.jpg');
}
#menu {
    float: left; 
    width: 272px;
    height: 287px;
    background-color: #ffffff;
}
#quotes { 
    float: left; 
    width: 272px; 
    height: 100%;
     }
#content { 
	height: 100%;
    float: left; 
    width: 707px; 
    height: 100%;
    background-color:#ffffff;
    text-align: left;
}

I want my #container #left #wrapper3 #wrapper4 #left #right #edge_r #content etc.
simply to fit whatever is inside the content div.

I'm using Joomla

Any help would be GREATLY apreciated Smile

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 14 weeks 7 hours ago
Timezone: GMT-4
Joined: 2009-10-09
Posts: 2043
Points: 2268

First thing that's going to

First thing that's going to come up is something about invalid code. No doctype, head or html tags.

Next, you're going to be asked to show the rendered code, not the includes.

Then you can work on clearing your floats. Tongue

leadwing
Offline
newbie
Last seen: 10 years 46 weeks ago
Joined: 2009-10-30
Posts: 2
Points: 3

Well I have doctype and all

Well I have doctype and all that hehe Tongue

Here's a screenshot of the bottom of the page, as you can see the border which I made doesnt fit around the content (in this case a photo)
screenshot.jpg

Sorry I can't just link the site, its hosted locally at the moment.

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 14 weeks 7 hours ago
Timezone: GMT-4
Joined: 2009-10-09
Posts: 2043
Points: 2268

The markup is really

The markup is really confusing with an overabundance of divs and you don't show your content which makes it hard to even mock up your layout. Hmm. First thing I'd do is remove height:100%; from #content. Ask "yourself 100% of what?" and see if there's a good answer.