Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Sep 2012
    Posts
    15
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Expanding wrapper automatically

    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>

  • #2
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    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>
    Last edited by Sammy12; 09-13-2012 at 02:56 AM.

  • #3
    New to the CF scene
    Join Date
    Sep 2012
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    g8

    Quote Originally Posted by knightmetal View Post
    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]

  • #4
    New Coder
    Join Date
    Sep 2012
    Posts
    15
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Sammy12 View Post
    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>


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •