# CSS Floats and resizing background



## ony_gosshamer (May 16, 2004)

I'm slowly moving from my Illustrator template to HTML & CSS and I ran into this problem (if you want to know, this basic template will later be merged with the movable type engine):

here is the page: http://www.hippopocampe.org/agnusday/index.html
here is the css: http://www.hippopocampe.org/agnusday/images/df.css

How do I make it so the #secondcontent background resizes to the content of my float (the #scleft)?  I could make the #scright section float instead but that wouldn't solve my problem cause there might be (depending on the page) more content on that side... 

Do I have to change the way the sections are structured?

BTW, thanks in advance.  I always come here when I run into a CSS problem and it seems that these forums are blessed with good, helping and competent people.


----------



## mdnky (May 17, 2004)

Make a rule in the CSS that looks like this:


```
#spacer {
    clear: both;
    }
```


Then add the red part to your #scright div as shown here:


```
<div id="scright">
<h1><img src="images/title_biblepassage_d.gif" height="17" width="150" /><br />
Luke 4, 14-21 : Epiphany 3</h1>
<p><em>14</em>Jesus returned to Galilee in the power of the Spirit, and......</p>
[color=red]<div id="spacer"></div>[/color]
</div>
```


You also need to get a valid doctype in there ASAP to ensure proper handling of the page across browsers.  Based on what I saw in the code, you're probably going to want to use XHTML 1 Transitional.  Below is the head section with the proper info inserted.


```
<!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">
<head>
<title>AgnusDay 4.0</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" media="screen" href="images/df.css" />
</head>
```


----------



## twister (May 17, 2004)

I just want to say your site design is GREAT!!!


----------



## BitWit (May 17, 2004)

I just read that IE6 for Windows reverts to a strict mode if you put a url in your doctype. This might effect one of your styles in that browser.


----------



## ony_gosshamer (May 17, 2004)

Thanks for the fast replies everyone.

*mdnky*: A big thank you for the code.   I knew I had something to do with that clear thing.  I owe you one.  One the other hand, why is my page XHTML 1 Transitional instead of something else? And what does "transitional" mean here?

I understand it's all about web standards and  and but does the doctype affect how my page is dispayed?

*twister*: 

*BitWit*: Ok. Then I ask my question again, how important is the doctype?  What does those adresses actually communicate to the browser?  My feeling is that, even though I try, I just can't satisfy everybody out there.  But I'll try the page with the doctype and IE6 and I'll let you knwo tommorow.


----------



## ony_gosshamer (May 17, 2004)

Actually, I just did the test.  (BTW, i love Transmit's in-app edition capability.)

IE6 was being a bitch until I dropped the doctype code.  Not everything is displyed as it should be but the majority is. The #scleft lists seem to have a 50pixel padding on the right for some matter (actually it does this with IE on my mac as well).  But the rest seems ok.  Tweaking will be done.

À+


----------



## mdnky (May 17, 2004)

ony_gosshamer said:
			
		

> why is my page XHTML 1 Transitional instead of something else? And what does "transitional" mean here?
> 
> I understand it's all about web standards and and but does the doctype affect how my page is dispayed?



There's 3 types for XHTML 1.0 (Transitional, Strict, Frameset).  Your page would be best done in Transitional, just because, well trust me on this...you don't wanna mess with strict.  In strict things like target="_blank" aren't allowed.  It's just what it says, strict.  Very unforgiving of structural issues and coding errors.  Transitional is much easier for someone who's starting out with XHTML, esp. if you're used to the old ways.

Think of it as a roadmap, more like the key on the roadmap that is, for the browser.  It's main purpose is to inform the browsers about the kind of documents we are producing. By specifying a DOCTYPE we tell the browser how to handle the pages.




			
				BitWit said:
			
		

> I just read that IE6 for Windows reverts to a strict mode if you put a url in your doctype. This might effect one of your styles in that browser.



Actually it allows the browser to know how to handle the page by referencing the doctype on the W3C server.  When you forget the URL, browsers (compliant ones) go into 'Quirks Mode' which then causes issues with code.

http://www.alistapart.com/articles/doctype/


----------



## ony_gosshamer (May 17, 2004)

Thanks for the explanation, mdnky.  The doctype sure makes sense now, especially when it helps display the page correctly.

I added the code and it works fine (like I said earlier) in Safari and IE, but I checked it out with Firebird it doesn't seem to like it very much... It displays it like it was before.  Any clues?


----------



## mdnky (May 18, 2004)

Yup, you have some validation errors in there that are probably causing Mozilla to have a hissy fit.

Shows 122, most of which are missing ALTs on images.  I did see a few P and LI tags missing endings/beginnings/etc. mentioned in there.

http://validator.w3.org/check?uri=http://www.hippopocampe.org/agnusday/index.html


----------



## Cat (May 18, 2004)

There is some good advice here.


----------



## ony_gosshamer (May 18, 2004)

*Mkdky*: Okay.  My friend, I got my page validated, yeah for me.  It even validated strict (after I changed the doctype, cause now I know what doctype is, or should I say DOCTYPE). Heh. It was actually simpler than I thought, i'll make sure i'm checking my page regularly.  

Problem is, firefox (i was still calling it firebird) is still out...  I'm sure It has something to do with the 'clear' float thing. Setting a variable height (inherit or auto) to it didn't work either.  I you have nothing, it's ok, i'll come back to it later on.

*Cat*: Thanks for the link.  I started reading it.  I'm surprised Apple is ahead of the game on this and preaching it too.


----------



## twister (May 18, 2004)

I hate to say it, but you found a FireFox bug. If you issue is what i think it is.  FireFox has a hard time making a section bigger than the content.  You can't do height="100%" for example.  Sorry, but you may have to live with it. My only suggestion would be to put some sort of tag around all of them.  Like a new span or div tag. Did i help or only confuse more?


----------



## mdnky (May 19, 2004)

ony_gosshamer said:
			
		

> Problem is, firefox (i was still calling it firebird) is still out...  I'm sure It has something to do with the 'clear' float thing. Setting a variable height (inherit or auto) to it didn't work either.  I you have nothing, it's ok, i'll come back to it later on.



Try adding a few more entries to it and see what happens...

It's not so much a bug in Firefox/Firebird as it is a bug in how the layout is being handled.  I don't see it as a huge issue though, as long as your content div (id="scright") is taller than the navigation.


----------



## twister (May 19, 2004)

Since you all seem to be pretty CSS smart here.  I was wondering how do i make something centered with css?

What i'd really like to do is center my to green graphic on my SkyZone site.  However, it's been placed 0px from the top and 0px from left and then 'fixed' in place.  But i'd rather have it centered w/ the window.  However i never see any 'align' within my CSS choices.  Am I just missing it or do i just get rid of the positioning and put in center tags?


----------



## Cat (May 19, 2004)

This might help.


----------



## twister (May 19, 2004)

Thanks.  I bookmarked it so i don't forget.  Negative margin, I would never have thought of that.


----------



## BitWit (May 19, 2004)

Cat said:
			
		

> This might help.



Ahh, now copy that code into bbedit, and change the doctype to the default bbedit transitional doctype that has the url in it, and watch the whole thing stop working for IE. Take the URL out of the Doctype, and its back to normal.


----------



## twister (May 19, 2004)

So should i take the url out of my doctype?  It looks OK in IE but the background doesn't tile.


----------

