Jump to content

Expanding wrapper automatically


Recommended Posts

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.

[/font][/color][color=#000000][size=3]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/size][/color][/font][/color]<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>[color=#000000][size=3]</html>[/size][/color][color=#000000][font=verdana, geneva, lucida,]

Link to post
Share on other sites

The wrapper doesn't take into account the height of floated elements. The easiest solution is to set the "overflow" property of the wrapper to "hidden" or "auto"

  • Like 1
Link to post
Share on other sites
The wrapper doesn't take into account the height of floated elements. The easiest solution is to set the "overflow" property of the wrapper to "hidden" or "auto"
Great Ingolme, thanks! just what I needed. I guess the problem is that I didn't know how to use the overflow property.
Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...