Floating oh my gosh

[Miluette]

So, floating. I've been reading tutorials. They are somewhat confusing.

http://senshuu.com/oekaki/ I just wanted those two divs (the sides each with the gryphon and the dragon) to be centered on the page, and also to see how float would affect that. I have no idea why the right one stretches out like that, and then the text that isn't within one of those two divs acts funny.

This is also connected with my random inability to center certain things even when I try, like forms. The last frontier! I'm so close to knowing everything I should know by now!

I've been able to understand the way people explain things on this forum pretty well, so I'd like to ask someone here about it, lol.

[sagebrush]

buh... I'm no css expert, but try replacing "div" with "#container."

Your definition thing is saying "div" has a margin of 5px, so I think all divs are getting a 5px margin - it's assigning a 5px margin to the right div which is overriding the width specification.

So, now you have:

div {specs}
#left {specs}
#right {specs}

and in the body it's:

<div>
<div id="left">stuff</div>
<div id="right">stuff</div>
</div>

Try making it:

#container {specs}
#left {specs}
#right {specs}


<div id="container">
<div id="left">stuff</div>
<div id="right">stuff</div>
</div>

[Miluette]

Ohhh. That might be the cause of a lot of my problems, actually. Yay! Solutions! <3

But now the right one's sitting under the left one again. lol, coding X_X

[sagebrush]

Try specifying a height for #container and maybe setting position:relative for #right.

[Miluette]

Hmm... it's still the same.
Man, this is weird.

[griever]

Try float:left for #left and removing float:right for #right?

[Xepher]

I just went and tweaked it for you, directly on the page. http://senshuu.com/oekaki/ now looks centered like I believe you want. I can never figure this stuff out without actually playing with it... hope you don't mind.

Code Select Expand

#container {
        text-align: center;
        vertical-align: center;
        margin: 5px auto;
        height: 600px;
        width: 950px;
}

#left {
        font-family: Georgia, "Times New Roman", serif;
        width: 300px;
        padding: 1em;
        float: left;
}

#right {
        font-family: Georgia, "Times New Roman", serif;
        width: 375px;
        padding: 1em;
        float: right;
}


Those are the only three sections I changed at all. Test it in your browser, but it looks correct in mine (Firefox 3.) The key was the "margin: 5px auto;" for the container... that auto-bit sets the left and right margins to automatic, and centers the container in the page. If it doesn't show up right in IE, you may need a "text-align: center;" on the body itself. I got rid of the position, display, and margin tags for the left/right divs, then just put in the correct float values for each. The old file is now index.oldcss.php in case you want to compare changes, or I somehow broke something. Anyway, hope that helps you.


EDIT: For the curious, this might explain the logic behind things a bit better... at least with the centering if not the floating. http://www.simplebits.com/notebook/2004/09/08/centering.html

[Databits]

You used the web developer tools didn't ya? 

[Xepher]

I used the DOM inspector, if that's what you mean. Otherwise I just opened the file in nano and poked at stuff to make it work. A little googleing to find that page I linked as well...

Wait, now that you mention it, I remember you mentioned some web developer tools add-on or something before, but I never got around to installing it... don't even remember what it was now. Linkage?

[Databits]

It's a Firefox extension called "Web Developer". There's available versions for FF 1.5, FF 2, and FF 3.

The nice thing is, you can load a page and tweak CSS / HTML in real time to see the results being displayed (it will not save them to the site of course, but it'll help diagnose the issue to make the actual fix).

Firebug is a hella awesome extension as well, most wonderful dom inspector for HTML, CSS, and even JS there is I believe. At least IMO.

Another great one is Flashblock, which does just that, blocks all flash applets from loading automatically. This stops all those stupid flash ads in their tracks too. So in combination with Ad Blocker, you can pretty much stop them all.

[Miluette]

I had web developer installed on my mac's firefox, and then I forgot what it was. I think I'll reinstall on both my computers.

Anyway, actually... while I am SO GLAD things don't show up screwed anymore (and I don't mind you going in and editing them... actually I prefer it, as long as things are explained, and of course you do), I sort of wanted both the left and right divs to go abutting each other and that text that's currently between them to go below them. The only reason this is hard is because I'm trying to go tableless. ;x;

[Databits]

Here's a hint: Go with the method that works the fastest and is the easiest to implement.

Tables "Just Work^TM" in most cases. Despite what some people may want to claim, it's no more professional to go with a non-table layout than to use them when need be. If anything I'd argue that it's probably less professional because it takes more time in most cases to make a non-table layout actually display properly across all major browsers. Because time is often a very important part of any project, anything that causes it to needlessly take more time is probably more of a detriment to the project than a benefit.

Took us over 2 years to break our contractor of the "all divs and no tables is the way to go" ideal. Simply put, when we began to show that there's things you can do with tables that in many cases you flat out can not do with divs, or that there's many things that are a hell of a lot faster to do with tables, and he realized that it cost him less time and money to just go with what works and get the same end results, he gave up that philosophy.

In a way it's kinda like how so many people think that XML is great! Where as it actually sucks pretty bad in most cases. Things like Ajax are totally pointless when you can generally use Json and achieve equal results in a faster fashion.

Just my $0.02 

[Miluette]

See, I'm of that same opinion! What is so unprofessional about tables? Sure, only skilled people (with too much time) can master divs, and tables can easily be used inefficiently by everyone, but they can also be used so! effectively! (In fact, I'm sure the reverse of this is true as well, but I'd just say "screw divs" if things were like that). With me, tables "just work" most of the time, but I've felt an obligation to learn divs and floating since my first web teacher kind of screwed it up for me two years ago.

So for me right now, tables are like teddy bears, and divs are like hard plastic figurines that look cool, but I can't cuddle or drop them. (Or to be like this Monty Python sketch I saw last night, tables are woody, and divs are like tin.)

I want to know what people think makes divs better than tables. I bet it's a bunch of nitpicky little things that ultimately can be worked around or make no real difference -- like back when I looked up why iframes were undesirable. (Been forever since I've seen a site that used iframes now though, hee.)

Hey, I was right! http://css-discuss.incutio.com/?page=TablesVsDivs I also see "lightweight" "more flexible" "more browser support" in places. Buh? Now one of my sites that uses tables has its right side/footer take forever to load, but it'd just be painful as hell to recreate with divs. But the rest of my sites are fairly simple and wouldn't differ by much if I replaced the main content areas with divs. I only know stuff would randomly stop working if I switched. :B End blab!

[Databits]

Well I never said don't use divs.

Use what makes the job easier and faster. It's more of being able to know what's the better solution to use for the particular situation. There's some things that divs are better for, there's some things that tables are better for, just don't forsake one of the other in favor of the other "being more professional".

[Miluette]

Yeah... all the anti-table people make me want to counter, however. They're just so adamant.

Also, that css centering link is amazing.

Oh yeah, is there a way to force the edges of things to touch right against the edges of the website-viewing area? The tops and bottoms of my content areas on Millennium's pages (like here http://millennium.senshuu.com/archive/00-01.php) used to before I just did the centering thing, but I don't really know how I got them to, as I tried with my other sites and they didn't really work.