In my endeavors to learn CSS working for both Firefox and IE (I learned on IE w/quirks mode not realizing it, so I'm a bit screwed up...) I need to start at the basics.

What's wrong with the following?

I know that it's something to do with the box structure, but I figured that relative positioning would fix that problem, yet I also want to have padding for my text...do I need the text enclosed in a span INSIDE the div to get the desired padding? ...eventually it will all be CSS, but I usually hard code it all out and then cut back, adding it to the stylesheet.

Thanks.

...ok, apparently the inner span does the trick. I feel that's a bit more tags than should be required for something like that though. Wasn't the idea of layers over tables to create less clutter?

1.) Main outer DIV to create the boundary and border "art".
2.) First inner DIV for "title" section.
2a.) Span to force padding with text.
3.) Second inner DIV for "info" section.
3a.) Span to force padding with text.

BAH! Technically, it still is less text (when applied to a stylesheet) than a table, but it's symantically built the same way, in my opinion, unless I'm just not thinking in terms of CSS properly, and this can be done in a much better fashion.

I am confused! Got a page to show us?

as far as can see position-relative has nothing to work from (e.g. left, right, top, bottom)

I create the CSS in the sheet then apply to the page.

This way I have all the CSS code, on the sheet and on my page I only need the id's and classes with text.

If you use firefox download the Web Dev extention and go search other's sites on how they build things. It will all become clear as to why. I used to think CSS would be more work, till I learned it.

For the record, I very rarley use position at all, unless I have to position something just so, I think is is mainly uneeded.

I normally think it's unnecessary, except I've noticed (in some pages I've done) when I declare a DIV with width of 100%, it takes the width from the BODY element, NOT the parent element, thusly why I've used the position:relative...I want the width to be relative to the parent. Don't ask me why it will (at times) not be...I still don't know. Perhaps I don't need it in this context, I haven't tried it without it.

(Tried it without the relative positioning and it worked...perhaps it's just when a DIV set to 100% is within a TD of a TABLE that the width takes the BODY width rather than the TD of the TABLE...)

The cleaned up code (example for something else, thusly no web page to look at) is below:





Another problem, however. Let's say I want to add an image to the "info" section and I want to float it to the right... As soon as I do that, the DIV loses the height to enclose the image...basically, the image is floated to where I want it, but it also ends up floating outside the "info" area...

Is there any way to get around this?

do you have any way of showing a page? Screen shot even?

I think you need to "clear" the info section this will allow the info section to wrap wround the float vertically. If that is what you are asking. Becasue your sample had two title_sections. I made one .info_section

.info_section
{
background-color:#FFD9D9;
color:#000;
clear: right; Note: could be left or both depending on your situation.
width:100%;
}

I am not a pro by any means, but when floating knowing how to properly clear can save a ton of frustration.

http://css.maxdesign.com.au/floatutorial/ - this taught me a ton.

I just uploaded it. The code is the original code, however, without it being cleaned up (although it's semantically the same thing).

-edit-
URL removed, mostly because I overwrote it with a tabled version... oops.

When I have to float images I make image holders.

.image_holder{
float:left;
height: hight of image
width: width of image
}

<div class="info_section'>
<div class="image_holder">
<img src="***.jpg">
Text for line after image float
</div>
</div>

Adds a little more code but I can control them easier.

Edit: are you trying to get the girl in the pink under the "Family Fun"?

From the page you linked me to:

Except, I want it to wrap around the image. As it is currently, the image is basically escaping the bounds of the DIV.

-edit-
I tried what you said, the results are live and uploaded...and yes, I want the girl to be in the pink section, but inside both the bounds of the "boundary" and "info_section" DIVs.

is this what you are looking for but with the pink surrounding all?

http://new.flightfeathers.com/Design/Code/page.htm

I have gotten it this far with a few tricks, to work in IE and FF

http://new.flightfeathers.com/Design/Code/page.htm

but am I understanding you on how you want it to work?

Yes. The only difference I notice is that you had to add an extra DIV (as class "clear" with clear CSS properties) to the bottom of the "info_section" DIV. I'm assuming that's just a "hack" (so to speak, not truly a hack) to force the image to keep within the desired bounds?

If that's true, I'd have never thought to do that. I would think there would be a better way than that, but I guess not. :-/

Thanks for taking your time to look at this, homchz. It's very much appreciated.

oh there may be, like I said I am a "hack" all of my pages when I am done are valid, but I am sure there are "better ways" to do things.

Also this will not "wrap" the text will continue at a 87px left margin as far as you type.

Check out the floatorial page I think that they have some tecniques on what you are trying to do. A 100% fluid site has it's challenges (like this one), that everyone has tricks for. Mine also makes that heavy weight under the image. Which for some is not acceptable.

Good luck, np with the help this stuff can be fun.

Josh

just for reference this trick can help get rid of the large space if you do use the

.clear <div>

Use semantics, don't just have a divider called 'title_section'. Why do you think headings (h*) were invented?

...huh?

oh...the header tag, stylized. Mostly because it's not a page header and I only really use page titles in the header tags. I personally feel that headers should only truly be used for fairly important sections on a site. I don't feel that a "news title" really merits that much attention.

homchz, yes, I kinda figured that there was a default height that was causing the space. You might be able to define it as 0px, but I'm not entirely sure.

A news title is still a section, making the heading a section divider. I just have h1 for the main (site name) title, h2 for either a news item or the page title and h3 for lower levels.

Had the site I'm working on been built originally using that methodology, I would completely agree. Unfortunately, it was built using FrontPage, then transferred to DreamWeaver...and, well...the same people that used DreamWeaver were the ones that used FrontPage, and.....

Anyone that knows anything will hardly ever use FrontPage.

I do agree with you though. It's also much more handicap accessible when using heading/header tags.