Why is there a space between my columns? [Archive]

View Full Version : 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