Why is there a space between my columns?

**startout** · 11-10-2009, 10:18 PM

Hi ya

This is really puzzling me big time. Im quite new to CSS, Can any one help me?

I have made a little web page which has two columns with liquid height. But...there is a space between the columns???
Do you know how to remove the space without fixing the width of both columns?

One other thing, why does the right column extend to the right hand side even though I have not set a width? (I want it to do this I just don't understand why it does)

Thanking you profusely in advance.

Here is the code I am using:

<html>
<head>
<style>

html,body { height:100%; margin:0; text-align:center; font:12px arial; }

#container { width:850px; height:100%; background:yellow; }
#header { width:100%; height:100px; background:#00aeed; }
#main { width:100%; height:75%;}
#navigation { float:left; width:200px; height:100%; background:#49bdef; }
#content { height:100%; background:#8dcff4; }
#footer { clear:both; height:27px; background:#d4ecfb; padding:6px; }

</style>
</head>
<body>

<div id='container'>
<div id='header'>Header with fixed height and 100% width of the container div</div>

<div id='main'>
<div id='navigation'>Liquid Height and fixed width</div>
<div id='content'>Liquid height and liquid width</div>
</div>

<div id='footer'>Footer with fixed height and 100% width of container</div>

</div>

</body>
</html>

**simcomedia** · 11-11-2009, 09:04 PM

I don't see any gaps and I tested in FF and IE8.

**webboc** · 11-14-2009, 06:39 PM

Hi

Try setting your document type. For example:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

**maneetpuri** · 11-16-2009, 10:20 AM

Hi,

You have align the text into center in the body tag. That's why the second column content comes in the center. Just align it to left will solve the column spacing problem.

You have define the float left in your left column but you haven't define the float property in the right column. That will create problem when you adding the content.

Below is the corrected code.
----------------------------------------------------------------------
<html>
<head>
<style>

html,body { height:100%; margin:0; text-align:center; font:12px arial; }

#container { width:850px; height:100%; background:yellow; }
#header { width:100%; height:100px; background:#00aeed; }
#main { width:100%; height:75%;}
#navigation {
float:left;
width:200px;
height:100%;
background:#49bdef;
clear:right;
position: relative;
}
#content {
height:100%;
background:#8dcff4;
clear:none;
position: relative;
margin-left: 200px;
text-align: left;
}
#footer { clear:both; height:27px; background:#d4ecfb; padding:6px; }

</style>
</head>
<body>

<div id='container'>
<div id='header'>Header with fixed height and 100% width of the container div</div>

<div id='main'>
<div id='navigation'>Liquid Height and fixed width</div>
<div id='content'>Liquid height and liquid width</div>
</div>

<div id='footer'>Footer with fixed height and 100% width of container</div>

</div>
---------------------------------------------------

Hope this helps,
Cheers

Thread: Why is there a space between my columns?

Thread Tools

Search Thread

Why is there a space between my columns?

Bookmarks

Bookmarks

Posting Permissions