20 replies [Last post]
-Felix-
Offline
Regular
Last seen: 14 years 25 weeks ago
Joined: 2005-04-30
Posts: 13
Points: 0

Im quite new to CSS layouts.
The code below works fine in IE, but when I use Firefox, it adds a 2px wide gap between the two divs inside the wrapper.

<div style="width: 770px; border: 1px solid black; height: 100%; ">
<div style="float: left; width: 149px; background: blue; ">Navigation</div>
<div style="float: right; width: 619px; background: green;">Main contents</div>
</div>

If I set width:150px and 620px, that will work in Firefox, but in IE it will blow up the wrapper.

Also, Id like to point out that the above example is just to give you a general idea of the problem. On my website I dont use background colors at all, but link boxes that are in the left div and they are supposed to "touch" the border that splits the wrapper.

So how to remove this gap?

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 4 years 40 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

DIV gap broblem Firefox/IE

Well firstly the browser isn't adding 2px gap that is how you have coded it, if IE is dropping the trailing float down a line then it probably means that there is some sort of padding/ border adding to the width somewhere.

Secondly it would help to see a live link or a fuller code example to understand what properties are in play here. A general idea of the problem is not really that helpful here, but as an exercise you could try
zeroing all padding and margins and removing borders and then see if the divs will sit alongside each other in IE, if so, then gradually add back the properties that you require until the layout breaks in which case you have found the culprit . Remember that with this sort of problem IE incorrectly expands a container which causes the increase in width that would force it to drop down a line and FF will correctly let the extra width overflow the container.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

-Felix-
Offline
Regular
Last seen: 14 years 25 weeks ago
Joined: 2005-04-30
Posts: 13
Points: 0

DIV gap broblem Firefox/IE

I know exactly what the problem is.
It is because IE blows up if widths are set to 150 and 620 (=770 total), because there are total of 2px border (left and right side).

However, FF does not count those wrapper borders in thus causing the 2px gap between the divs.

Wrapper width 770
IE: 150+620+2(borders) = 772 -> Error
FF: 150+620 = 770 -> OK

The problem is clear, but the solution is not...

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 7 years 4 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

DIV gap broblem Firefox/IE

To understand what is going on you need to understand the CSS box model.

Correctly (according to CSS standards), width and height only apply to the region where your content goes. Margins, padding and borders are all additional to that.

IE (before v6), followed a different rule, padding and border were included in the width (& height). IE6 is capable of working in both modes. It sounds like you have IE6 working in quirks mode.

To stop that happening set an appropriate DOCTYPE and don't use an XML prolog.

IE also has other issues which make it difficult to guarantee single pixel accuracy when dealing with floats. Since you are floating two divs where together they occupy the whole width of the container, then you could probably rejig things so only one is floated. The other will automatically take up the remaining space. You can use margins to ensure the non-floated div doesn't wrap under the floated div when it is the longer of the two.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 day 1 hour ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9743
Points: 3822

DIV gap broblem Firefox/IE

You are running IE in quirks mode. That suggests you are not using a proper DTD.

What's happening is IE is squeezing the border within the width. That is just wrong. Border and padding belong outside the width.

The subject of proper DocType Declarations is a common one on this forum. See also http://www.alistapart.com/articles/doctype/

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 4 years 40 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

DIV gap broblem Firefox/IE

I beg to differ, you didn't know 'exactly' what the problem was otherwise you would have arrived at the solution!

I should have added that in all likelihood you were running foul of the box model problem in quirks mode, one of the fundamental issues to grasp with the box model implementation.

what I did try and point out was that you had provided us with insufficient information to work with forcing assumptions rather than hard solutions Smile

In fact the widths as you describe things are not completely accurate, if you are working in standards mode then both browsers would have the borders added to the stated width not just IE. if you were indeed working without a dtd in quirks mode then IE would use the widths as stated, including the border width. this is why the tan hack feeds a second width minus the padding and/or border widths for browsers that comply with the correct box model and would end up giving you a seemingly larger box than in IE.

So I'm not sure that you are running in quirks mode here and it would help if you show us the rest of the code.

But thanks to Gary and Chris for filling in what I left out.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

-Felix-
Offline
Regular
Last seen: 14 years 25 weeks ago
Joined: 2005-04-30
Posts: 13
Points: 0

DIV gap broblem Firefox/IE

Ok, I changed doctype to
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

That fixed it in IE...or at least thats what I thought for a while...
but now I tried viewing the site in IE 5!
Doctype didnt help - same problem!!!

Please help - what should I do??

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 year 9 weeks ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9668
Points: 801

DIV gap broblem Firefox/IE

Can you show us the site?

Verschwindende wrote:
  • CSS doesn't make pies

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 7 years 4 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

DIV gap broblem Firefox/IE

-Felix- wrote:
That fixed it in IE...or at least thats what I thought for a while...
but now I tried viewing the site in IE 5!
Doctype didnt help - same problem!!!

As I mentioned earlier ...

Chris..S wrote:
IE (before v6), followed a different rule, padding and border were included in the width (& height). IE6 is capable of working in both modes. It sounds like you have IE6 working in quirks mode.

If you are going to cater for IE5, IE6 and compliant browsers. You really need to think about your design with the above problem in mind to minimise its impact. There are hacks to feed specific styles to IE5, (google on "IE5 CSS filter" for all the details), but ideally you want to resort to them as little as possible. If all your elements have widths and borders/padding your CSS will be a mess and making any modifications down the line will be a nightmare.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 4 years 40 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

DIV gap broblem Firefox/IE

Felix, please post either a link to the page or all the code as this thread is starting to go round in circles, there is something not adding up and I'm not sure it's all to do with the box model implementation, but that can only be resolved with sight of the code, once and for all.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

-Felix-
Offline
Regular
Last seen: 14 years 25 weeks ago
Joined: 2005-04-30
Posts: 13
Points: 0

DIV gap broblem Firefox/IE

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 

<html>

<head>
<title>Title</title>
<meta name="robots" content="index, follow">
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">

<style type="text/css">
body {margin: 0px 0px 0px 0px; text-align: center; }
#maintable {text-align: left; margin-left: auto; margin-right: auto; width: 770px; border: 1px solid black; background-color: white; }
#logo {background: url(images/logo.jpg); height: 105px; border-bottom: 1px solid black; }
#menubar {padding-left: 5px; padding-right: 5px; font: bold 8pt arial, verdana; background: url(images/barbg.jpg) repeat-x; height: 15px; border-bottom: 1px solid black; }
#menubarleft {float: left; }
#menubarright {float: right; }
#container {padding: 0 0 0 0; margin: 0 0 0 0; width: 100%; font: bold 8pt arial, verdana; background-color: white; }
#navigation {padding: 0 0 0 0; margin: 0 0 0 0; float: left; width: 150px; font: 9pt arial, verdana; background-color: white; }
#maincontent {padding: 0 0 0 0; margin: 0 0 0 0; float: right; width: 620px; text-align: left; font: 9pt arial, verdana; background-color: white; background-image: url(images/[b]newborder.gif[/b]); background-position: left; background-repeat: repeat-y; }
.leftbox {margin: 5px 0px 10px 5px; text-align: left; font: bold 9pt arial, verdana; background-color: white; border-left: 1px solid black; border-top: 1px solid black; border-bottom: 1px solid black; }
.rightbox {margin: 5px 0px 5px 5px; padding: 5px 5px 5px 5px; text-align: left; background-color: white; }
.boxtitle {background-image: url(images/test.gif); background-position: bottom; margin-bottom: 5px; padding-left: 4px; text-align: left; font: bold 8pt arial, verdana; color: white; background-color: royalblue; height: 15px; border-bottom: 1px solid black; }
.boxcontents {padding-left: 4px; padding-bottom: 2px; }
#footer {text-align: center; font: 8pt arial, verdana; background: url(images/barbg.jpg) repeat-x; height: 15px; border-top: 1px solid black; }

form {
margin: 0px 0px 0px 0px; 
}
a:link {
text-decoration: none;
}
a:visited {text-decoration: none; }
a:hover {text-decoration: underline; }
a:active {text-decoration: none; }

.searchboxtext {
width: 80px;
margin-bottom: 1px;
font: 7pt verdana, arial;
}
.searchboxbutton {
font: 8pt verdana, arial;
}
.clear {
clear: both;
}

</style>

</head>

<body>
<div id="maintable">

<div id="logo">
</div>
<div id="menubar">
<span id="menubarleft">Front page</span>
<a href="login.php" id="menubarright">Login</a>
</div>
<div id="container">
<div id="navigation">


<div class="leftbox">
<div class="boxtitle">Box 1</div>
<div class="boxcontents">
<a href="">contents</a><br>
<a href="">contents</a><br>
<a href="">contents</a><br>
<a href="">contents</a><br>
</div>
</div>

<div class="leftbox">
<div class="boxtitle">Box 2</div>
<div class="boxcontents">
Contents
</div>
</div>


<div class="leftbox">
<div class="boxtitle">Search</div>
<div class="boxcontents">
<form action="search.php" method=GET>
<input type="text" class="searchboxtext" name="keyword">
<input type="submit" value="Go" class="searchboxbutton">
</form>
</div>
</div>

<div class="leftbox">
<div class="boxtitle">Information</div>
<div class="boxcontents">
Contents
</div>
</div>


</div>
<div id="maincontent">

<div class="rightbox">

<div class="boxcontents">

<h1>Main Contents</h1>
<br><br><br>
Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text 


</div>
</div>



</div>

</div>
<div class="clear"></div>

<div id="footer">
Footer
</div>


</div> <!-- end of maintable -->


</body>

</html>

Some things to notice:
I have a border made of a small image that is repeat-y. (newborder.gif). That is what generates the border between the two columns. As you dont have that image you wont of course see the border. But the important thing here is, that when those two columns are tightly together (there wont be a gap), those left boxes will touch the border edge (the border image is at the very left of the right side column).
Now this new doctype fixes IE6 problem, but the same problem (two columns wont fit side by side) still continues with IE5. So try viewing the above page with IE5.

Please help, Ive tried almost everything but nothing seems to work.

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 7 years 4 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

DIV gap broblem Firefox/IE

Ah.

You have pretty well designed around the difference box models. That is you don't give elements with widths padding or borders and vice versa. Thats good, well almost.

#maintable {
width: 770px;
border: 1px solid black;
}

the IE5 box model will only have 768px of content room. Your two elements add to 770px........

you could

  • drop the border
  • use a wrapping element within or without #maintable
  • feed #maintable an IE5 only width
  • put back the xml prolog and feed #maintable an IE only width
  • increase the width of #maintable by 2px
  • decide to only float one of #navigation & #maincontent. Which would mean a width is not required on the other.

[edit]
Your page is strong enough to use the xhtml-strict dtd - if you self close the <br> and <input> tags and change the form GET to "get" and wrap the two <input> elements in a block element (e.g. <div>, <fieldset>).

[/]
-Felix-
Offline
Regular
Last seen: 14 years 25 weeks ago
Joined: 2005-04-30
Posts: 13
Points: 0

DIV gap broblem Firefox/IE

Thanks for your reply!

Quote:
drop the border

- No, the border stays Smile
Quote:
use a wrapping element within or without #maintable

This sounds good. So I just add another "wrapper" inside #maintable? Will there be problems with the #maintable's width? If it is 770px...?
Quote:
feed #maintable an IE5 only width

How do I do that?
Quote:
put back the xml prolog and feed #maintable an IE only width
Im new to xml, and honestly Im scared to use stuff that Im not familiar with lol
Quote:
increase the width of #maintable by 2px

That would fix the IE5 problem, but then again cause the problem in FF and IE6, wouldnt it?

Quote:
decide to only float one of #navigation & #maincontent. Which would mean a width is not required on the other.

Yeah, I tried that, and it worked with IE6. But FF blew it up, the maincontent jumped below the navigation and to the left, and the footer raised above both divs, right below the menubar!

Thanks for your help. Id really appreciate if you could take a look at the above comments on the options and maybe give a short example of what I should do.

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 7 years 4 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

DIV gap broblem Firefox/IE

For details on the box model hack (feeding IE5 its own width) refer http://www.tantek.com/CSS/Examples/boxmodelhack.html

For a wrapper.

#outer {width:772px; padding:0; border:0;}
#inner {border:1px solid black;}

<div id='outer'>
  <div id='inner'>
  <!-- your content goes here -->
  </div>
</div>

Now, all browsers should display the same.
#outer only has a width, no borders and padding. IE5 and Compliant browsers will calculate the same dimension for the content.
#inner has no width, only borders. Since, standard behaviour for a block element is to fill the available width, again IE5 and compliant browsers calculate the same dimension for the content, that is 772px - 2px for the border.

-Felix-
Offline
Regular
Last seen: 14 years 25 weeks ago
Joined: 2005-04-30
Posts: 13
Points: 0

DIV gap broblem Firefox/IE

Thanks!
I made outer and inner wrappers and it works now in both browsers!

Phew, I was already getting ready to switch back to table structure lol

By the way, there are still some minor problems, and one of them is this:
The border image that I mentioned earlier (newborder.gif) is repeat-y. I have attached the image here to this message.
It has a fade to the right, so it creates kind of a 3D feeling.
Anyways, this fade is for some reason repeated twice to the RIGHT.
It is very weird, and it happens in all browsers that I have tried.
In the upper left corner, and in the lower left corner only.
It is like this (img being the gif, "mg" being the fade part):
img mg
img MAIN CONTENTS
img
img Text text text text
img Text text text text
img
img
img
img mg

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 7 years 4 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

DIV gap broblem Firefox/IE

Based on the code above, it doesn't look like that to me. I see,

- the image repeating in a column down the left hand side of #maincontent.
- approx. half the image obscured along the left hand edge of #rightbox.
- the full width of the image showing in the vertical gap between #maincontent and #rightbox (both above and below).

my guess is you don't need a background color on #rightbox.

also:
background-color: white; background-image: url(images/newborder.gif); background-position: left; background-repeat: repeat-y;

can be shortened to

background: url(images/newborder.gif) left repeat-y white;

-Felix-
Offline
Regular
Last seen: 14 years 25 weeks ago
Joined: 2005-04-30
Posts: 13
Points: 0

DIV gap broblem Firefox/IE

ah, I got it now...I forgot that the rightbox was there! lol
thanks again!

-Felix-
Offline
Regular
Last seen: 14 years 25 weeks ago
Joined: 2005-04-30
Posts: 13
Points: 0

DIV gap broblem Firefox/IE

sorry to bring up this old topic, but I have one more question about the code I posted. Here it is again:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 

<html> 

<head> 
<title>Title</title> 
<meta name="robots" content="index, follow"> 
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> 

<style type="text/css"> 
body {margin: 0px 0px 0px 0px; text-align: center; } 
#maintable {text-align: left; margin-left: auto; margin-right: auto; width: 770px; border: 1px solid black; background-color: white; } 
#logo {background: url(images/logo.jpg); height: 105px; border-bottom: 1px solid black; } 
#menubar {padding-left: 5px; padding-right: 5px; font: bold 8pt arial, verdana; background: url(images/barbg.jpg) repeat-x; height: 15px; border-bottom: 1px solid black; } 
#menubarleft {float: left; } 
#menubarright {float: right; } 
#container {padding: 0 0 0 0; margin: 0 0 0 0; width: 100%; font: bold 8pt arial, verdana; background-color: white; } 
#navigation {padding: 0 0 0 0; margin: 0 0 0 0; float: left; width: 150px; font: 9pt arial, verdana; background-color: white; } 
#maincontent {padding: 0 0 0 0; margin: 0 0 0 0; float: right; width: 620px; text-align: left; font: 9pt arial, verdana; background-color: white; background-image: url(images/[b]newborder.gif[/b]); background-position: left; background-repeat: repeat-y; } 
.leftbox {margin: 5px 0px 10px 5px; text-align: left; font: bold 9pt arial, verdana; background-color: white; border-left: 1px solid black; border-top: 1px solid black; border-bottom: 1px solid black; } 
.rightbox {margin: 5px 0px 5px 5px; padding: 5px 5px 5px 5px; text-align: left; background-color: white; } 
.boxtitle {background-image: url(images/test.gif); background-position: bottom; margin-bottom: 5px; padding-left: 4px; text-align: left; font: bold 8pt arial, verdana; color: white; background-color: royalblue; height: 15px; border-bottom: 1px solid black; } 
.boxcontents {padding-left: 4px; padding-bottom: 2px; } 
#footer {text-align: center; font: 8pt arial, verdana; background: url(images/barbg.jpg) repeat-x; height: 15px; border-top: 1px solid black; } 

form { 
margin: 0px 0px 0px 0px; 
} 
a:link { 
text-decoration: none; 
} 
a:visited {text-decoration: none; } 
a:hover {text-decoration: underline; } 
a:active {text-decoration: none; } 

.searchboxtext { 
width: 80px; 
margin-bottom: 1px; 
font: 7pt verdana, arial; 
} 
.searchboxbutton { 
font: 8pt verdana, arial; 
} 
.clear { 
clear: both; 
} 

</style> 

</head> 

<body> 
<div id="maintable"> 

<div id="logo"> 
</div> 
<div id="menubar"> 
<span id="menubarleft">Front page</span> 
<a href="login.php" id="menubarright">Login</a> 
</div> 
<div id="container"> 
<div id="navigation"> 


<div class="leftbox"> 
<div class="boxtitle">Box 1</div> 
<div class="boxcontents"> 
<a href="">contents</a><br> 
<a href="">contents</a><br> 
<a href="">contents</a><br> 
<a href="">contents</a><br> 
</div> 
</div> 

<div class="leftbox"> 
<div class="boxtitle">Box 2</div> 
<div class="boxcontents"> 
Contents 
</div> 
</div> 


<div class="leftbox"> 
<div class="boxtitle">Search</div> 
<div class="boxcontents"> 
<form action="search.php" method=GET> 
<input type="text" class="searchboxtext" name="keyword"> 
<input type="submit" value="Go" class="searchboxbutton"> 
</form> 
</div> 
</div> 

<div class="leftbox"> 
<div class="boxtitle">Information</div> 
<div class="boxcontents"> 
Contents 
</div> 
</div> 


</div> 
<div id="maincontent"> 

<div class="rightbox"> 

<div class="boxcontents"> 

<h1>Main Contents</h1> 
<br><br><br> 
Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text 

</div> 
</div> 



</div> 

</div> 
<div class="clear"></div> 

<div id="footer"> 
Footer 
</div> 


</div> <!-- end of maintable --> 


</body> 

</html> 

Ok, so heres the problem:
The right column is often shorter than the left one (with the navigation boxes) and this causes the border image (which is actually the background of the right column) to appear only the height of the right column.
How can I make it so that the right column is always at least as long as the left side column?

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 7 years 4 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

DIV gap broblem Firefox/IE

contruct the background on the element which lies behind both columns. See the article at ALA about faux columns... http://www.alistapart.com/

-Felix-
Offline
Regular
Last seen: 14 years 25 weeks ago
Joined: 2005-04-30
Posts: 13
Points: 0

DIV gap broblem Firefox/IE

Thanks, I read the article.

Is there another way to accomplish this because ALA article suggests me to change the entire background structure?
I mean, can't I use "height" or some other attribute to make the right column taller?

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 7 years 4 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

DIV gap broblem Firefox/IE

yes, if you know the heights your columns need to be, you can use height. The faux column solution works independent of height, which makes things much easier for dynamically generated pages or site-wide CSS - that is environments where the height of the individual content in the columns varies from page to page.

If you are setting height (or min-height) remember to check to see that your pages still work ok if the user changes the browser window width or the font size.