CSS Forum

**FreedomFighter** · 07:48 PM

Dear all,

I did this based on an idiom suggested in the "CSS Cookbook". The problematic example I'm struggling with is below. If, in Firefox, you try increasing the text font size, you will see that the left column starts to overlap the right one. Is there any way to make it so that the floating right column would shift itself rightwards, and the horizontal scrollbar would appear? I'm trying to get the same outcome as in http://www.tyssendesign.com.au/artic...ical-examples/ This website manages to avoid overlaps completely (well, almost completely), but the same trick doesn't seem to work for me.

Many thanks in advance!

PS Trying hard to remain "tableless".

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Some title</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style type="text/css">
body { margin:0; padding:0; border-style:solid; border-width:1px; }

div#thematic_links { width:6%; margin:0; padding:0; border-style:solid; border-width:1px; }
div#thematic_links a { display:block; }
div#main_content { float:right; width:92%; border-style:solid; border-width:1px; margin:0; padding:0; border-style:solid; border-width:1px; }
div#main_content p { margin:0; padding:0; }

.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
</style>
</head>
<body>
<div class="clearfix">
<div id="main_content">
<p>Obviously, any element that’s larger than the other elements in the same environment
stands out. This approach makes a page look more dynamic in its presentation, unlike
a page layout where all the elements are the same size.
So, when you want to call attention to an area of a web page, one way is to try using
an excessive type size.
In this example, the size of the font in “Hi.” has been set to 17 em. In the font-size
property, an em unit is equal to whatever is the font size of the container.
</p>
</div>
<div id="thematic_links">
<a href="1.html">Link#1</a>
<a href="2.html">Link#2</a>
<a href="3.html">Link#3</a>
<a href="4.html">Link#4</a>
</div>
</div>
</body>
</html>

**LadynRed** · 09-26-2010, 09:05 AM

For one thing, get rid of the xhtml 1.1 doctype, it's not supported by all browsers, most notably IE.

The divs aren't going to 'move over', that's not how it works, they will always take up the amount of space you have defined, 6% and 92% of the browser window.

Your right column is defined at a 6% width, and it is staying true to that, as is the left column. When you increase the font size, the text inside the left column shifts and wraps to stay within it's container, but the link text can't do that in your example because "Link#1" is all one word. If you put a space in between the word and the #1, you will see the behavior I think you are expecting to see. However, at some point the largest text size is going to be wider than 6% and will appear to spill out of it's container, it's a font, it's not elastic.

**Kelpie** · 05:50 AM

If you want the right column to narrow as the left widens, you'll need to use em instead of %.
Give the left column a width (in em) and float it left, then give the right column a left margin (also in em) and no float. Also put the code for the left (floated) column before the code for the right (non-floated) column.

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Some title</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style type="text/css">
body { margin:0; padding:0; border-style:solid; border-width:1px; }

div#thematic_links { float:left; width:4em; margin:0; padding:0; border-style:solid; border-width:1px; }
div#thematic_links a { display:block; }
div#main_content { border-style:solid; border-width:1px; margin:0 0 0 4.5em; padding:0; border-style:solid; border-width:1px; }
div#main_content p { margin:0; padding:0; }

.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
</style>
</head>
<body>
<div class="clearfix">
<div id="thematic_links">
<a href="1.html">Link#1</a>
<a href="2.html">Link#2</a>
<a href="3.html">Link#3</a>
<a href="4.html">Link#4</a>
</div>
<div id="main_content">
<p>Obviously, any element that’s larger than the other elements in the same environment
stands out. This approach makes a page look more dynamic in its presentation, unlike
a page layout where all the elements are the same size.
So, when you want to call attention to an area of a web page, one way is to try using
an excessive type size.
In this example, the size of the font in “Hi.” has been set to 17 em. In the font-size
property, an em unit is equal to whatever is the font size of the container.
</p>
</div>
</div>
</body>
</html>

**FreedomFighter** · 09-27-2010, 07:45 PM

Dear Andrew,

Brilliant! Thanks a lot! Exactly what I was looking for. Interestingly, the behavior seems to be just as if you used a table instead, except that you aren't.
Thank you, LadynRed, too. Your comment regarding the lack of support for XHTML 1.1 has been insightful.