Expanding wrapper automatically

knightmetal · 09-13-2012, 01:31 AM

Hello,

The code below is quite simple but there are things I still don't fully understand.

1. When I place code inside the center container the wrapper expands automatically, but it won't happen when I do the same in the left or right container. Why's that? do I need to explicitly set the height of the wrapper?

2. When I reduce the resolution to the minimum I see that the link in the center container falls on a second line. Is there any way to avoid that?

Thanks.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<style type="text/css">
	p, h1, h2{text-align:center;}
	#wrapper{width:900px;margin:0 auto;}
	#left{width:200px;float:left;}
	#right{width:200px;float:right;}
	#center{width:500px;margin:0 auto;background-color:#CCC;}
</style>

</head>

<body>
	<div id="wrapper">
		<div id="left">
			<h2>Left column</h2>
			<p>Some text some text</p>
		</div>
		
		<div id="right">
			<h2>Right column</h2>
			<p>Some text some text</p>
		</div>
		
		<div id="center">
			<h1>Center column</h1>
			<p>Some text some text some textSome text some text some textSome textSome textSome textSome textSome textSome textSome textSome</p>
			<p><a href="http://www.google.com">Click hereClick hereClick hereClick hereClick hereClick hereClick hereClick</a></p>	
		</div>
	</div>
</body>
</html>

Sammy12 · 09-13-2012, 01:46 AM

Edit:

You defined widths for everything, there is no collapsing. In fact, none of the problems you specified are apparent in your example.

I think this method is better:

Code:

<!DOCTYPE html>
<html>
	<head>
		<style type="text/css">
			body, h1, h2, p {
				margin: 0;
				padding: 0;
			}
			h1, h2, p {
				text-align:center;
			}
			#wrapper {
				width: 900px; /* you can increase/decrease this without any collapsing */
				margin: 0 auto;
			}
			#left-panel {
				width: 200px;
				float: left;
			}
			#right-panel {
				width: 200px;
				float: right;
			}
			
			/* without a width, it will expand automatically */
			#main-content {
				overflow: hidden;
				background-color: #CCC;
			}
		</style>
	</head>
	<body>
		<div id="wrapper">
			<div id="left-panel">
				<h2>Left column</h2>
				<p>Some text some text</p>
			</div>	
			<div id="right-panel">
				<h2>Right column</h2>
				<p>Some text some text</p>
			</div>
			<div id="main-content">
				<h1>Center column</h1>
				<p>Some text some text some textSome text some text some textSome textSome textSome textSome textSome textSome textSome textSome</p>
				<p><a href="http://www.google.com">Click hereClick hereClick hereClick hereClick hereClick hereClick hereClick</a></p>	
			</div>
		</div>
	</body>
</html>

beurswand · 09-13-2012, 04:18 AM

Quote:

Originally Posted by knightmetal

Hello,

The code below is quite simple but there are things I still don't fully understand.

1. When I place code inside the center container the wrapper expands automatically, but it won't happen when I do the same in the left or right container. Why's that? do I need to explicitly set the height of the wrapper?

2. When I reduce the resolution to the minimum I see that the link in the center container falls on a second line. Is there any way to avoid that?

Thanks.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<style type="text/css">
	p, h1, h2{text-align:center;}
	#wrapper{width:900px;margin:0 auto;}
	#left{width:200px;float:left;}
	#right{width:200px;float:right;}
	#center{width:500px;margin:0 auto;background-color:#CCC;}
</style>

</head>

<body>
	<div id="wrapper">
		<div id="left">
			<h2>Left column</h2>
			<p>Some text some text</p>
		</div>
		
		<div id="right">
			<h2>Right column</h2>
			<p>Some text some text</p>
		</div>
		
		<div id="center">
			<h1>Center column</h1>
			<p>Some text some text some textSome text some text some textSome textSome textSome textSome textSome textSome textSome textSome</p>
			<p><a href="http://www.google.com">Click hereClick hereClick hereClick hereClick hereClick hereClick hereClick</a></p>	
		</div>
	</div>
</body>
</html>

I need this code for my projects

========================

[URL=http://www.beursstand.nl/]Beursstands[URL]
[URL=http://www.presentatiewand.nl/]Presentatiewand[URL]
[URL=http://www.mobiele-presentatiewand.nl/]Presentatiewand[URL]
[URL=http://www.beurswand.nl/]Beurswand[URL]

knightmetal · 09-13-2012, 11:13 AM

Quote:

Originally Posted by Sammy12

Edit:

You defined widths for everything, there is no collapsing. In fact, none of the problems you specified are apparent in your example.

I think this method is better:

Code:

<!DOCTYPE html>
<html>
	<head>
		<style type="text/css">
			body, h1, h2, p {
				margin: 0;
				padding: 0;
			}
			h1, h2, p {
				text-align:center;
			}
			#wrapper {
				width: 900px; /* you can increase/decrease this without any collapsing */
				margin: 0 auto;
			}
			#left-panel {
				width: 200px;
				float: left;
			}
			#right-panel {
				width: 200px;
				float: right;
			}
			
			/* without a width, it will expand automatically */
			#main-content {
				overflow: hidden;
				background-color: #CCC;
			}
		</style>
	</head>
	<body>
		<div id="wrapper">
			<div id="left-panel">
				<h2>Left column</h2>
				<p>Some text some text</p>
			</div>	
			<div id="right-panel">
				<h2>Right column</h2>
				<p>Some text some text</p>
			</div>
			<div id="main-content">
				<h1>Center column</h1>
				<p>Some text some text some textSome text some text some textSome textSome textSome textSome textSome textSome textSome textSome</p>
				<p><a href="http://www.google.com">Click hereClick hereClick hereClick hereClick hereClick hereClick hereClick</a></p>	
			</div>
		</div>
	</body>
</html>

Sammy, thanks for your reply. I probably didn't explain the problem so well. The problem is that the wrapper expands downwards automatically when I place some text in the middle container but it won't happen when I do it in those side containers. I mean the problem is not about width but height.

In a different forum I was told the problem could be solved by using the overflow property in the wrapper. So that is basically what I needed.

To show what the problem was, I put some background color so it can be visible what I was trying to say, if the overflow property is removed then the unwanted happens, the side container expands but not the wrapper.

Hopefully this will be useful for some other people:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<style type="text/css">
	body, p, h1, h2{text-align:center;margin:0;padding:0;}
	#wrapper{width:900px;margin:0 auto;background:#CAE4FF;overflow:auto;}
	#left{width:200px;float:left;}
	#right{width:200px;float:right;}
	#center{width:500px;margin:0 auto;background-color:#CCC;}
</style>

</head>

<body>
	<div id="wrapper">
		<div id="left">
			<h2>Left column</h2>
			<p>Some text some text</p>
		</div>
		
		<div id="right">
			<h2>Right column</h2>
			<p>Some text sot somt some text some textSome text some text some textSome textSoe text some textSome text some text some textSome textSome text</p>
		</div>
		
		<div id="center">
			<h1>Center column</h1>
			<p>Some text some text some textSome text some text some textSome textSome textSome textSome textSome textSome textSome textSome</p>
			<p><a href="http://www.google.com">Click hereClick hereClick hereClick hereClick hereClick hereClick hereClick</a></p>	
		</div>
	</div>


</body>
</html>