CSS gurus: gap between columns in 2-column floating layout

tucotuco · Nov 17, 2003

I cooked up a 2-column, liquid layout based on "float" (code follows). But can't seem to get rid of the vertical space between columns 1 and 2. Results vary with browser: IE 5/6 leaves wide space, Opera 7 just a 1px space, Mozilla renders properly.

Anybody know how to fix it?

==================== BEGIN CSS ====================

/*** 2-column liquid CSS layout using floats ***/
/*** BEGIN CSS ***/
/*** HTML tag styles ***/

body{
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #333333;
line-height: 140%;
margin: 0px;
padding: 0px;
background-color: #66517B; /* */
font-size: 76%;
}
h1 {
font-size: 200%;
}

ul{
list-style-type: square;
}

ul ul{
list-style-type: disc;
}

/*** Format Classes ***/

.subhead {
margin:0px; /* For first element in column, set top margin to zero to fix IE 5/6, Opera 7 rendering error. Without fix, vertical alignment of content elements may not line up column to column */
font-weight: bold;
color: #000000;
font-size: 1.4em;
font-family: Arial, Helvetica, sans-serif;
}

/*** Layout Divs ***/

#wrapper{
margin: 10%;}

#masthead{
padding: 2%;
background-color: #3399CC;
margin: 0px;
}

#left-column{
padding: 2%;
width:20%;
float: left;
margin: 0px;
background-color: #FFBEA8;

}

#center-column{
padding: 2%;
margin-left: 24%;
background-color: #D2D2FF;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}

/* Clearing the footer (clear:both

, expands the footer to full width
and places it immediately under the longest column. */

#footer{
clear: both;
font-size: 100%;
color: #000000;
padding: 2%;
background-color: #77BCDD;
text-align: center;
}

#footer img{
padding: 0px;
}
/*** END CSS ***/

==================== END CSS ====================

==================== BEGIN HTML ====================

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"

http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="

http://www.w3.org/1999/xhtml">

<head>
<meta name="generator" content="HTML Tidy, see

http://www.w3.org"

/>

<title>3-Column CSS Layout</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="2-column.3.css" rel="stylesheet" type="text/css" />
</head>

<body>

<div id="wrapper">


<div id="masthead">
<h1>Masthead</h1>
<span class="subhead">Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Donec molestie. Sed aliquam sem ut arcu.</span>
</div>


<div id="left-column">
<p class="subhead">Column 1</p>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec
molestie.</p>
</div>

<div id="center-column">
<p class="subhead">Column 2</p>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec
molestie. Sed aliquam sem ut arcu. Phasellus sollicitudin. orem ipsum
dolor sit amet, consectetuer adipiscing elit. Donec molestie. Sed
aliquam sem ut arcu. Phasellus sollicitudin. Lorem ipsum dolor sit
amet, consorem ipsum dolor sit amet, consectetuer</p>

<p>Lorem ipsum dolor sit amet, consorem ipsum dolor sit amet,
consectetuer allus sollicitudin. orem ipsum dolor sit amet,
consectetuer adipiscing elit.</p>
</div>


<div id="footer">
<span class="subhead">Footer</span><br />
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
</div>
</div>
</body>
</html>

==================== END HTML ====================

Vragabond · Nov 17, 2003

I don't know what causes it, but I do know how to fix it. Just learned this trick, how to set some properties extra for IE. So add this to your CSS right after the #center-column definitions:

Code:

* html #wrapper #center-column {
   margin-left: 19.2%;
}

This value will only be read by IE thus overwritting the old one. Mozilla, Opera and IE rendered the page OK for me.

tucotuco · Nov 17, 2003

Thanks, Vragabond. Well, it DOES work, but seems so . . . bizarre. I mean, why 19.2% instead of 24%? And do you happen to know how is it that only IE will read this . . . something to do with the "* html" code?

Would like to get some understanding from somebody if only to vanquish the hocus pocus aspect of CSS.

glenmac · Nov 17, 2003

Truly bizarre!!! thanks Vragabond

Glen

http://www.lantzvillecomputers.ca

Vragabond · Nov 18, 2003

I know it is bizarre and I wanted to avoid using this kind of solution but there was no way. With fixed width and margin-left, all browsers produced the same output. In percentage, IE baffles. All I know is that IE has far the worse support for CSS of the three browsers. Also, margin and padding problems are where IE is especially weak. The other two browsers are for the most part standards compliant, therefore your code should work. I guess it is just an IE quirk.

As for * html... it seems to confuse browsers and plunges them into different behaviour. IE picks up this code (and subsequently overrides previous attributed) while Opera and Mozilla ignore it. It is a nice workaround. For more information on CSS differences between browsers and other workarounds cosult:

http://developer.apple.com/internet/css/ie5cssbugs.html

http://css.nu/pointers/bugs-ie.html

cian · Nov 18, 2003

..btw, i find that in IE it's best to nest the percentage width div in another div which has a percentage width.

For example I was creating a menu which had the links "stepped" with a different percentage margin.
The only way I could achieve what I wanted was basically:

<div style="fixed width and position styles">

<div style="width:100%;"> 

<div style="margin: 0 10% 0 0;">lkhlk</div>
<div style="margin: 0 20% 0 0;">lkhlk</div>
<div style="margin: 0 30% 0 0;">lkhlk</div>
...etc

This achieved desired results in each browser, but without the container div the "steps" were all over the place

<!--#sig value=''É'' url=''

http://www.ssi-developer.net''

-->

tucotuco · Nov 18, 2003

Thanks everybody, most helpful. Let's hope Microsoft gets it together and embraces international standards. Sadly, it could be years before the IE 5/6 browsers are out of circulation. Aaaaargh!

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

CSS gurus: gap between columns in 2-column floating layout

tucotuco

Technical User

Vragabond

Programmer

tucotuco

Technical User

glenmac

Technical User

Vragabond

Programmer

cian

Technical User

tucotuco

Technical User

Similar threads

Part and Inventory Search

Sponsor