How to calculate a size in em for a scalable <div> container?

Hi,

I'm trying to build a scalable centered container that would hold the entire content of my web page. I wish to do it using <div> and css.
My problem is how to calculate the width of each column inside the container, so the size is adjusted to the text size of the page?

Right now I just put some size in "em" by chance, but at a certain level of zoomin in and zoomin out the page, the text gets out of bounds of the columns.

I also see that zooming out the page, alla the content moves to the left. I cannot understand why.

Thank you for all your help!
With best regards,
Tatiana
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Title</title>
<style type="text/css">
 
body {
  text-align:center;  
}
div.container{
  margin:0 auto;
  width:40em;
  padding:0.5em;
  background:green;
}
div.column1{
  text-align:left;
  padding:0.5em;    
  background:white;
  width:8em;
  float:left;  
}
div.column2{
  text-align:left;
  padding:0.5em;  
  float:left;   
  background:yellow;
  width:8em;  
}
 
div.column3{
  text-align:left;
  padding:0.5em;  
  float:left;  
  background:red;  
}
 
</style>
</head>
 
<body>
 
<div class="container">
  <div class="column1">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
 
  </div>
  <div class="column2">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
 
  </div>
  <div class="column3">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
 
  </div>
</div>
 
</body>
</html>

Open in new window

etatlunAsked:
Who is Participating?
 
-null-Commented:
Hi


You could use the offsetWidth property in javascript to get the rendered width in pixels.

Could you elaborate on what you specifically mean as to zooming in and out on the page?  Do you mean increasing the font size?

-null-
0
 
myderrickConnect With a Mentor Commented:
With respect to layout, this article should help you understand better....

http://jontangerine.com/log/2007/09/the-incredible-em-and-elastic-layouts-with-css

MD
0
All Courses

From novice to tech pro — start learning today.