krow 0 Posted September 13, 2012 Report Share Posted September 13, 2012 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,] Quote Link to post Share on other sites
Ingolme 1,021 Posted September 13, 2012 Report Share Posted September 13, 2012 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" 1 Quote Link to post Share on other sites
krow 0 Posted September 13, 2012 Author Report Share Posted September 13, 2012 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. Quote Link to post Share on other sites
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.