# Some basic CSS questions

**URL:** <https://forum.kirupa.com/t/some-basic-css-questions/186543>\
**Category:** web dev\
**Created:** [April 22, 2006, 4:41am UTC](https://forum.kirupa.com/t/some-basic-css-questions/186543 "2006-04-22T04:41:45Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![minimalistik](https://avatars.discourse-cdn.com/v4/letter/m/e47774/32.png) [@minimalistik](https://forum.kirupa.com/u/minimalistik)\
**Post date:** [April 22, 2006, 4:41am UTC](https://forum.kirupa.com/t/some-basic-css-questions/186543/1 "2006-04-22T04:41:45Z")

</div>

This is a first for me using fulltime CSS since I’ve just been using tables since. I would like to know if you have you two columns, how is it possible to create small space in between? Just add another div and give it say 5px? Also, W3’s CSS Validator says:

> 

Line : 3 (Level : 1) You have no color with your background-color : body

How can I rectify that?

---

<div class="post-metadata">

**Author:** ![nathan99](https://avatars.discourse-cdn.com/v4/letter/n/96bed5/32.png) [@nathan99](https://forum.kirupa.com/u/nathan99)\
**Post date:** [April 22, 2006, 4:43am UTC](https://forum.kirupa.com/t/some-basic-css-questions/186543/2 "2006-04-22T04:43:08Z")

</div>

what is your code?

---

<div class="post-metadata">

**Author:** ![minimalistik](https://avatars.discourse-cdn.com/v4/letter/m/e47774/32.png) [@minimalistik](https://forum.kirupa.com/u/minimalistik)\
**Post date:** [April 22, 2006, 4:46am UTC](https://forum.kirupa.com/t/some-basic-css-questions/186543/3 "2006-04-22T04:46:40Z")

</div>

```auto

/* CSS Document */
body {
background-color:#FFFFFF;
font-family:Georgia, "Times New Roman", Times, serif;
font-size:9px;
}

#header{
width:239px;
height:auto;
margin:0px;
float:left;
background-color:#000000;
color:#ffffff;
font-weight:bold;
}

#whitearea{
width:5px;
height:auto;
float:left;
background-color:#000000;
}

#iframe{
width:239px;
height:auto;
background-color:#FFFFFF;
}

```

---

<div class="post-metadata">

**Author:** ![minimalistik](https://avatars.discourse-cdn.com/v4/letter/m/e47774/32.png) [@minimalistik](https://forum.kirupa.com/u/minimalistik)\
**Post date:** [April 22, 2006, 6:07am UTC](https://forum.kirupa.com/t/some-basic-css-questions/186543/4 "2006-04-22T06:07:35Z")

</div>

Don’t worry about it, I’ve been trying out some code and I added float:left , ha this must be a common mistake known to you css know people.

---

<div class="post-metadata">

**Author:** ![Theros](https://avatars.discourse-cdn.com/v4/letter/t/e5b9ba/32.png) [@Theros](https://forum.kirupa.com/u/Theros)\
**Post date:** [April 22, 2006, 1:49pm UTC](https://forum.kirupa.com/t/some-basic-css-questions/186543/5 "2006-04-22T13:49:14Z")

</div>

Well, wheres your 2nd content column? All I see is a header and iFrame… BTW, when you do make two columns, lets say Main and Sidebar, you can add padding to one of them to make the visual effect of 5px of whitespace… Also, just use the Background tag, you can use so much more with it.

_EDIT_ OH, I think I get your question now. You want white space between your header div and content div? Well, at the way your doing it now, make the whitespace div the same width as the others. That way you will see the whitespace… 😛 Also, give it a height

---

<div class="post-metadata">

**Author:** ![Ankou](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/ankou/32/1351_2.png) [@Ankou](https://forum.kirupa.com/u/Ankou)\
**Post date:** [April 22, 2006, 10:23pm UTC](https://forum.kirupa.com/t/some-basic-css-questions/186543/6 "2006-04-22T22:23:42Z")

</div>

As for your warning from W3’s validator, it’s just telling you that when you specify a background color you should also put a color for the font.

So for example with the CSS you posted you’d want to add color…

```auto
#whitearea{
width:5px;
height:auto;
float:left;
background-color:#000000;
color: #fff;
}

#iframe{
width:239px;
height:auto;
background-color:#FFFFFF;
color: #000;
}

```

---

<div class="post-metadata">

**Author:** ![minimalistik](https://avatars.discourse-cdn.com/v4/letter/m/e47774/32.png) [@minimalistik](https://forum.kirupa.com/u/minimalistik)\
**Post date:** [April 23, 2006, 3:35am UTC](https://forum.kirupa.com/t/some-basic-css-questions/186543/7 "2006-04-23T03:35:10Z")

</div>

I was working on this yesterday night and when I previewed it in Firefox, everything look good but when I uploaded it, everything messed up. This is what I am doing and I can’t get it right.

![](http://img194.imageshack.us/img194/593/pic16du.jpg)

My code:  
ActionScript Code:  
[FONT=Courier New][LEFT]body[COLOR=#000000]{[/COLOR]  
background-[COLOR=#0000ff]color[/COLOR]:[COLOR=#808080]_#ffffff;_[/COLOR]  
[COLOR=#0000ff]color[/COLOR]:[COLOR=#808080]_#333333;_[/COLOR]  
font-family:Georgia, [COLOR=#ff0000]“Times New Roman”[/COLOR], Times, serif;  
font-[COLOR=#0000ff]size[/COLOR]:9px;  
font-weight:normal;  
margin:45px;  
[COLOR=#000000]}[/COLOR]

[COLOR=#808080]_#nav{_[/COLOR]  
[COLOR=#0000ff]width[/COLOR]:240px;  
[COLOR=#0000ff]height[/COLOR]:450px;  
background-[COLOR=#0000ff]color[/COLOR]:[COLOR=#808080]_#000000;_[/COLOR]  
[COLOR=#0000ff]color[/COLOR]:[COLOR=#808080]_#ffffff;_[/COLOR]  
font-weight:[COLOR=#0000ff]bold[/COLOR];  
margin-top:25px;  
[COLOR=#000000]}[/COLOR]

[COLOR=#808080]_#content{_[/COLOR]  
[COLOR=#0000ff]width[/COLOR]:811px;  
[COLOR=#0000ff]height[/COLOR]:450px;  
background-[COLOR=#0000ff]color[/COLOR]:[COLOR=#808080]_#ffff00;_[/COLOR]  
[COLOR=#000000]}[/COLOR]  
[/LEFT]  
[/FONT]

How can I move DIV Area 3 to the red area with a small gap between it and DIV Area 1?

---

<div class="post-metadata">

**Author:** ![minimalistik](https://avatars.discourse-cdn.com/v4/letter/m/e47774/32.png) [@minimalistik](https://forum.kirupa.com/u/minimalistik)\
**Post date:** [April 23, 2006, 4:46am UTC](https://forum.kirupa.com/t/some-basic-css-questions/186543/8 "2006-04-23T04:46:53Z")

</div>

God finally, I got it working. I am not sure about how correct the coding is though.

For **#NAV** , I gave it \*\*float:left \*\*, #COPYRIGHT, I have it **clear:both** and **#CONTENT** , I just specified **margin: 0 0 0 245px**
