No replies
SwitchNix
Offline
newbie
Last seen: 13 years 20 weeks ago
Timezone: GMT+2
Joined: 2008-04-16
Posts: 4
Points: 0

Hello,

I'm trying to do a layout, 3 columns, these columns are in a global box with rounded corner (it's the 15px in the CSS) that's work fine.

The problem I have when I fill one of these 3 columns, the size of the globalbox doesn't change and my text overlap the footer. I'd like an auto increase of the height of the cyan section and then the teal section and the global box.

Do you have an idea ?

Regards,

HTML

<head>
    <title></title>
    <link rel="stylesheet" href="default.css" type="text/css" />
</head>
 
<body>
 
	<div id="GlobalBox">
 
		<div id="Header">	   
			<div id="HeaderLeft"></div>
			<div id="HeaderRight"></div>		
		</div>				
 
		<div id="Content">			
			<div id="ContentHeader">header content</div>			
			<div id="ContentLeft">Left content</div>
			<div id="ContentMiddle">
				Middle content					
			</div>
			<div id="ContentRight">right content</div>				
		</div>	
 
	</div>  
 
	<div id="Footer">
		<div id="FooterLeft"></div>
		<div id="FooterRight"></div>
		klkl
	</div>       	
 
</body>

CSS

* { margin: 0; padding: 0; border: 0; }
 
#espace_top_page{
 	height: 0px;
} 
 
body {
    background: #89573c; 
    color: #FFF; 
    margin: 20px 0 0 0; 
}
 
/* GLOBAL BOX */ 
#GlobalBox {
	width: 1150px;
	min-height: 750px;
	margin: 0 auto;
	color: #000;
	font-family: Tahoma, Arial, Helvetica, FreeSans, sans-serif;
	font-size: 11px;
	border-bottom: 1px solid #e4ddcd; /* Bug firefox 1.0.7 */
	background-repeat: repeat-y;
	background-color: teal;
	background-position: 630px;	
}
 
#Header {
	position: relative;
	height: 0px;
	background-color: #e4ddcd;
}
 
#HeaderLeft {
	position: absolute;
	width: 15px;
	height: 15px;
   top: 0;
	left: 0;
	background-image: url("global_tl.png");
	background-repeat: no-repeat;
 
}
 
#HeaderRight { 
	position: absolute;
	width: 15px;
	height: 15px;
	top: 0;
	right: 0;
	background-image: url("global_tr.png");
	background-repeat: no-repeat;
}
 
#Content {
	float: left;
	width: 1134px;
	min-height: 550px;
	line-height: 16px;
	padding: 16px 0px 16px 16px;
	color: #4b483a;
	font-size: 11px;
	background-color: aqua;	
}
 
#ContentHeader {
background-color: orange;
height: 50px;
width: 1118px;
}
 
#ContentLeft {
background-color: blue;
height: 50px;
width: 180px;
float: left;
}
 
#ContentRight {
background-color: red;
height: 50px;
width: 180px;
float: left;
 
}
 
#ContentMiddle {
background-color: green;
height: auto;
width: 758px;
float: left;
margin: 0 0 0 0;
}
 
#Footer {
color: black;
	margin: auto;
	text-align: center;
	width: 1150px;
	position: relative;
	height: 15px;
	text-align: center;
	background-color: gray;
	font-size: 12px
}
 
#FooterLeft, #FooterRight { position: absolute; width: 15px; height: 15px; top: 0;  }
#FooterLeft { left: 0; background-image: url(global_bl.png); background-repeat: no-repeat; }
#FooterRight { right: 0; background-image: url(global_br.png);background-repeat: no-repeat; }