krow Posted September 13, 2012 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,] Link to comment Share on other sites More sharing options...
Ingolme Posted September 13, 2012 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 Link to comment Share on other sites More sharing options...
krow Posted September 13, 2012 Author 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. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now