1. Home
  2. Forums Index
  3. Browser Side / CSS 3:13 pm May 1, 2026

Forum Moderators: not2easy

Message Too Old, No Replies

Faux Columns

Gap at top of header

         

DickTater

6:11 am on Jan 21, 2011 (gmt 0)

10+ Year Member



Hello All.

I can't seem to eliminate the space above my header image. I am very inexperienced with CSS, but I worked with a tutorial to achieve what I have so far. I think I am keeping everything very simple.

The image in question is at the top of the #content div.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">


Here is my CSS
/* CSS Document */

body
{
margin-left: 200px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}

#main
{
display: table;
margin: 0px auto;
width:1300px;
}

#sidebar
{
display: table-cell;
width: 175px;
padding-left:8px;
background-color:#332A59;
color:#333;
}

#content
{
display: table-cell;
width: 781px;
padding-left: 8px;
background-color:#D9CA87;
color:#333;
}

.style1 {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 16px;
color: #D9CA87;
}
a:link {
color: #e46107;
text-decoration: none;
}
a:visited {
color: #e46107;
text-decoration: none;
}
a:hover {
text-decoration: none;
color: #FFFFFF;
}
a:active {
text-decoration: none;
}
body {
background-image: url(images/basketball-flooring-baraboo.jpg);
}
.style2 {
font-size: large;
font-weight: bold;
}
.style3 {font-size: large}

[edited by: alt131 at 2:58 am (utc) on May 17, 2011]
[edit reason] Thread Tidy [/edit]

SuzyUK

10:10 am on Jan 21, 2011 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Hi DickTater and Welcome to WebmasterWorld!

Is this just an exercise? just asking in case you don't know that CSS table properties are not supported in IE6 & 7, this is still a large proportion of the market so using the table properties is not considered a stable way to lay out columns yet..

anyway to you problem, it's in the HTML though is CSS related 

<div id="content">
<p><img src="images/title.jpg" alt="sdfsadf" width="100%" /></p>


the Header image does not need to be wrapped in another element, it can be given a class and/or styled by styling the #content img {} element directly but if I were you I would probably add a class of "logo" to it so this image can be targeted separately from other images that might appear in the content, e.g. you can make it display like a block so you can give it it's height and width, in fact it would mean you could take out the width attribute from the HTML too.: e.g. 

<img src="images/title.jpg" alt="sdfsadf" class="logo" />


#content img.logo {
display:block;
width: 900px;
height: 116px;
margin: 0 auto; /* would center it if that was required */
}


The Gap in Question

What is causing your gap is important though, if you're just learning this could be important to take this knowledge with you as you go as it applies to most every "gap" scenario you might come across ;)

The <p> element along with some others <hx>, <form>, has a default margin, and what that margin is is not an exact science across browsers. This does make sense, because if you're reading a page of text with no CSS applied you would still expect <p>aragraphs to have whitespace between them.

This is why <p> elements should not be used as "containers" for other elements, they're not generic, they're specific they're for <p>aragraphs.. divs and spans are generic containers, they have no default properties or specific purpose (apart from div is a block and span is inline) and are usually always used to wrap around specific divisions of content so they can be targetted via CSS without adding class names all over the place. e.g. in this case I would see nothing wrong if you wrapped the header img in 
<div id="header"><img..</div>
This can be useful so you don't have to go back and add classes to the HTML, also if you then added a <p> of text or a <h1> element you could still uniquely target all elements inside the header. e.g. the img, without adding a class name could then be uniquely targeted in the CSS using 
#header img {properties}


If you absolutely must use <p> elements then you will need to explicitly zero their margin in the CSS,
 p {margin: 0;}
however in this case you would also still need a class name on that one <p> or wrap the whole header in a div as suggested in order just to zero out that particular paragraph

hth
Suzy

DickTater

1:36 pm on Jan 21, 2011 (gmt 0)

10+ Year Member



Thank you so much. You solved my immediate problem...but it appears I made myself a larger problem with the IE7 and IE6 incompatibility. I don't have 7 or 6 on any machine here, but I found an emulator and I see what you mean.

I got this CSS code from a tutorial that purported to keep my two columns an equal height. No matter what I was doing before in HTML...when I added something to the left or right column the other would adjust and I couldn't ever get two pages to have the same content height steady between left or right. When I added something to one side, the other adjusted and the top of my header logo would drift down/up, or the links on the left would drift down/up and as you clicked between pages they were constantly shifting and wobbling.

That is where the table-cell idea came from. Also, I am unsure of how to center this page...my

body
{
margin-left: 200px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}

seems clunky and looks bad at lower resolutions.

If you have any quick fixes for how to achieve the same look I am getting in IE8 in older versions, and how to center the page I would be appreciative. But I am already quite thankful for your help thus far.

[edited by: alt131 at 2:51 am (utc) on May 17, 2011]
[edit reason] Side Scroll [/edit]

SuzyUK

5:23 pm on Jan 21, 2011 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



oh pooh ;) Oh well at least you found out before much further down the road.

I see the top image has made the page stretch, I took the image properties off the image itself - but it might have been being squished a little bit in the display?.. however I'll give you a little test sample and suggest some code which might help, in a minute

another little bit of not so good news then.. while <tables> were the old fashioned way of getting lovely equal height columns, it remains the Holy Grail of CSS layouts to achieve the same thing, either by getting rid of IE6&7, or by writing them a different stylesheet or using some complex hack.. however for your purposes I thnk it's going to be quite easy, you can search and read the "faux column" technique at your leisure, but I'll just say that no matter which technique you choose I would advise never choosing one that relies on one of the columns always being the longest.. for those just in case days.

the theory behind "faux columns" is that you use a background image which repeats vertically the full length of the "wrapper" the background image should be made to suit your columns i.e. 175px on the left side in the blue color.. and 900px on the right the taupe color. if those are not the dimensions you want you columns to be you can make it wider.. say 250 of left colour 1200 of the right, then position the background to suit. so basically what you land up with is an image about 1400px wide and say 1-20px high (apparently a 20px high image lods better than a 1px high one!) anyway once you repeat that as the background to the main container your page looks as if it's got 2 even height columns :) you then float your actual columns or one of them, and leave them transparent & this gives the effecy that they're equal heights, there is actually no need for them to be equal ;)

CSS is only a suggestive language and it's always best to try an avoid trying to make exact replicas of table designs or using heights as not everyone will always be viewing your page at the same resolution or device!

to center you could use the #wrapper container, let's say your content width is 1075px.. being 175px left column and 900px wide right column you put the repeating image on it & center the main container like this:

#wrapper {
width: 1075px;
margin: 0 auto; /* centers an item as long as it has a width */
background-color: #ffffff;
background-image: url(repeatingfauxcolumns.jpg);
background-repeat: repeat-y;
background-position: 10px 0;
}

but that might not be enough if your internal columns are floated see below

I wrote the background properties longhand to help explain which bit does what.. the background color is default for fallback (in case no image shows) it should probably be close to your main content color as a default -you will be able to precisely match the "dividing line" of the columns to your actual widths by adjusting the 10px value for the left background position, how wide you make your image will determine that bit, an exact 1075px wide image and that left co-ordinate will probably be 0px too.

so to summarise, and expand the theory a bit to fit with your code

start off with blank canvas and still put your main background image on the body element,then use both the #wrapper and #main divs. 


html, body {padding: 0; margin: 0, border: 0;}

body {
background: #fff url("http://www.example.com/images/basketball-flooring-baraboo.jpg") repeat 0 0;
font-family: "times new roman", serif;
font-size: 16px;
}

#wrapper {
width: 1075px;
margin: 0 auto; /* centers an item as long as it has a width */
}

#main {
float:left; /* floating this makes it contain floated children */
width: 100%; /* same width as wrapper */
background-color: #ffffff;
background-image: url(repeatingfauxcolumns.jpg);
background-repeat: repeat-y;
background-position: 10px 0;
}


then put your columns inside the main div.. the wrapper div centers and the main div should stretch even it only contains floated elements..

I'm using the structure you already have because by using the #main div like this it'll actually be the one which stretches should you use floats. another little headache you might come across is that an element (in this case the main div) doesn't know it has any child descendants if they are all floated so it won't stretch, i.e. show your full colmn background.. that's why you might see "clearing methods" banded about however this "belt and braces" approach should allow for any eventuality :) which might be easier for you to work from. and.. it should avoid you having to change your HTML, which is a Great thing about CSS!

anyway see how you get on and let us know how you go

Suzy

DickTater

5:05 pm on Jan 23, 2011 (gmt 0)

10+ Year Member



You have been very generous with your time and skills. I just plugged in the CSS above and it looks great....in Firefox and IE8 and Chrome. I will not pretend I understand it.

But I guess the answer is....there is nothing that will help this in IE6 or IE7?

At the very least I can put in a disclaimer that the small number of people who will be visiting this site often....should just bite the bullet and get Firefox, IE8, Chrome, Safari etc. and some short instructions on a page that tell them how to get these browsers if they don't already.

Thanks again!

[edited by: alt131 at 2:50 am (utc) on May 17, 2011]
[edit reason] Side Scroll [/edit]

SuzyUK

9:47 am on Jan 24, 2011 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



DickTater, you're Welcome, but my code was not a complete solution it was only a first step

don't give up on IE, IE7 is still too prevalent to ignore support for yet, and browser support messages are so 1995 LOL! - This code will work for IE too ;) but you need to make a background image as I described which you then use it where I've put "repeatingfauxcolumns.jpg" then after that you will need to remove the table properties from your CSS.. instead to get your two columns to sit side by side you should float both of them left, this will mean that they will actually only be the height of the content in them, but the background will make them look identical to what you
have now.

the code I gave in the earlier post, as well as centering the layout, will contain the two floated columns in the #main div and should work with no disruption to your HTML

It's so hard to describe image effects :o so I have made an image for you based on the colors of your template.. it's 1400px x 20px , with the left column being 250px wide so it's left position would probably be -75px (as described in earlier post) to make it line up to match your actual column widths.. I've made it bigger because if you decide to change your column widths, or put in some spacing between the physical columns - there should be enough wiggle room in this image for you not to have to make a new one every time ;)

I don't know if this will work.. but here's the data URI.. just right click and save as your image as normal:

data:image/gif;base64,R0lGODlheAUUAIAAANnKhzMqWSH5BAAAAAAALAAAAAB4BRQA
AAL/jI+py+0Po5y02ovzBbz7D4biSJbmiabqyrbuC8fyTNf2jef6zvf+DwwKh8Si8YhMwj
TMpvMJjUqnFKX1is1qt9yu9wsOi8fksvmMpqrX7Lb7DUHL5/S6/Y7P6/f8vv8vBCc4SFho
uACYqLjI2Oj4CBkpOUkJcniJmamJUdnp+QkaKjpKWmp6tZmquqp56voKGys7S1tre8Saq7
urduv7CxwsPExcTMeLnKxcZdzs/AwdLT0tvGx9jU2tvc3d7f0N/oU9Tq4bfo6err7Ofl7+
Do/ZPk9fb3+PPxm/z/+W/w8woMCBBI30O4gwSsGFDBs6fLgwocSJGyBavIgxo8ZmRBQ7en
SwMaTIkSRLRvqIMmUAkyxbunwJk4vKmRRj2ryJM6fOFjR7ItwJNKjQoSZ9Gt1HNKnSpUzz
HX1arqnUqVSrRisAADs=

it won't link so copy/paste that into your (non-IE) browser's address bar to see the image, right click to save it as normal into the same place as your "flooring" background jpg, name it bb-bg.gif then replace "repeatingfauxcolums.jpg" with the name of your image.

if you float the columns without the image in place they will appear side by side but you won't get the effect of the full length columns.

Ah OKI see you've added padding to the left column so the column widths are already different, the "columns" bg image is big enough to cope, so here's the full stylesheet you should need with renewed widths, and positioning co-ordinates . Replace all your CSS (you can delete the stuff in the document head too as it's already in the stylesheet), then save the Data URI above as bb-bg.gif into the same folder as your "flooring" jpg then it should be good to go and IE will be happy too: 

html, body {padding: 0; margin: 0, border: 0;}

body {
background: #fff url(http://www.barabooboyshoops.org/images/basketball-flooring-baraboo.jpg) repeat 0 0;
font-family: "times new roman", serif;
font-size: 16px;
}

#wrapper {
width: 1095px;
margin: 0 auto; /* centers an item as long as it has a width */
}

#main {
float:left; /* floating this makes it contain floated children */
width: 100%; /* same width as wrapper */
background-color: #332A59;
background-image: url(http://www.barabooboyshoops.org/images/bb-bg.gif); /* THIS IMAGE NEEDS SAVING */
background-repeat: repeat-y;
background-position: -55px 0;
}

/* if you use padding or border on the sidebar or content divs it will make them wider*/
#sidebar {
float: left;;
width: 175px; /* actual width = 195px being 175width + 10px left + right padding */
padding: 0 10px;
background-color:#332A59;
color:#333;
}

#content
{
float: left;
width: 900px;
padding: 0;
background-color:#D9CA87;
color:#333;
}

#content img.logo {
 display:block;
width: 900px;
height: 116px;
margin: 0 auto; /* would center it if that was required */
} 

a:link {
color: #e46107;
text-decoration: none;
}
a:visited {
color: #e46107;
text-decoration: none;
}
a:hover {
text-decoration: none;
color: #FFFFFF;
}
a:active {
text-decoration: none;
}

.style1 {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 16px;
color: #D9CA87;
}

.style2 {
font-size: large;
font-weight: bold;
}
.style3 {font-size: large}


Now all you have to remember is that the width of the sidebar and the content columns (including any padding and borders) must total the same, or less than the #wrapper div or the main content column will go onto a new row.. at the minute it's

#sidebar = 175px width + 10px left padding + 10px right padding = 195px
#content = 900px
total width = 1095px = #wrapper width

if you change any of those values you will need to adjust the background position of the bb-bg.gif to match where the columns "split"

in the image I made the left "column" color is 250px wide, but you only need 195px of it showing to match your column width so it's moved off to the left (negatively) by -55px to match up

Good Luck
Suzy

[edited by: alt131 at 2:57 am (utc) on May 17, 2011]
[edit reason] Side Scroll [/edit]

DickTater

1:47 pm on Jan 24, 2011 (gmt 0)

10+ Year Member



This looks great. You are correct that it is hard to describe the Faux Columns graphics. I saw a number of articles about it, but it was too hard for me to wrap my brain around. I am going to have to study everything you said until I figure out "floats" and some of the other techniques. The site looks great now, and it really helps out our whole Town Club Basketball league...all the players and all the parents and club officers....this site is for them. Organizing a group like this is very difficult without a central place for them to find their info on when/where practices and tournaments are. I have copied every shred of the code and advice that you gave and will hopefully be able to translate this into some of my other projects and get away from table based layouts. I have used CSS to style many of my sites, but never to handle layout. A million thanks.

[edited by: alt131 at 2:50 am (utc) on May 17, 2011]
[edit reason] Side Scroll [/edit]

 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

  1. Home
  2. Forums Index
  3. Browser Side / CSS 3:13 pm May 1, 2026