[SOLVED] i can never get floating divs to work!

[acidglitter]

I'm going to use divs instead of tables for my main content, but I can't get them to float right.. This is the page I'm testing on...

http://vanillaeyeliner.com/test

 

It looks good in Firefox, but in Internet Explorer 7 it looks like crap.. Why is that and how can I fix it??

[acidglitter]

Oh also.. for the content it has

<div id="con" style="display:inline;float:right;">

 

and navigation

<div id="nav" style="display:inline;">

 

I don't even know if I need the "display:inline;" part

 

In the stylesheet...

#con {

width:720px;color:#636363;

background:url(img/layout/conbg.gif) repeat-x #FFFFFF;

}

#nav {

width:160px;padding:4px;padding-top:2em;

}

[acidglitter]

No one has any idea whats wrong?

[TheFilmGod]

you don't need to

display: inline;

 

Make sure you also clear the floats with a div.

 

Here's an example:

 

#left {
width: 100px;
float: left;
}
#right {
width: 100px;
float: right;
}
#clear {
clear: both;
}

 

Then just do:

 

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

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

<div id="clear"></div>

 

EDIT: If you are doing more than a two columns that you might look into using tables (not recommended) or use absolute positioning nested in a postion: relative div. Getting three column floats to work is not very cross browser!

[acidglitter]

okay thanks! BTW, why do most people not like tables anymore?

[moberemk]

It's a semantics thing. Tables are really inflexible for layout (to move a left column to the right, you have to recode the page, for example), and tables are meant for displaying data; to create a layout table is basically to misuse HTML code.

[TheFilmGod]

It's a semantics thing. Tables are really inflexible for layout (to move a left column to the right, you have to recode the page, for example), and tables are meant for displaying data; to create a layout table is basically to misuse HTML code.

 

Yes and no. Css is just as inflexible as a table layout. Trying moving a left column to the right in css. You have to change the location of <div>  ... </div> in the html code anyway. - Very similar to tables, so this isn't really a benefit.

 

Css is more flexible in the sense that you can do pretty much anything. Try coding any page in a table layout - it requires a devotion of time and a painstaking coding marathon. So although tables can be easier to implement their lack of customization falls below par with the highly interactive site layout in present day world.

[sKunKbad]

Trying moving a left column to the right in css. You have to change the location of <div>  ... </div> in the html code anyway.

 

I've got a template that I made that allows to change the column position just by renaming the column ids in the html. It's a two column design.I like to change the pages around in my websites so they don't look so boring.

 

Also, (not part of the reply to the quote), It took me a long time to fully grasp CSS positioning. The best way to learn is to just play with divs that have different background colors and border colors. The colors really teach you what is really going on.

[bronzemonkey]

Css is just as inflexible as a table layout. Trying moving a left column to the right in css.

 

CSS-based layouts are far more flexible than table-based layouts. Moving a left column to the right is also no problem at all if your html has been properly constructed beforehand to allow you to make major layout changes just by altering the stylesheet. It sounds like you haven't quite realised what is possible and why the semantic html/css combination is so powerful.

[TheFilmGod]

Yes I do realize CSS's power. Forgive me of forgetting this:

 

float: left;

 

float: right;

 

What I meant to say is try changing any element's postion other than from the left to the right column. Most of the time (99%) you would have to change the html as well. - Not always but most of the time.

 

On the side note, changing the layout of your page isn't the best idea. It would confuse the users, also, the time could be better spent creating user friendly content.

[bronzemonkey]

Yes I do realize CSS's power.

 

Perhaps you meant to say something else, but you shouldn't be suggesting that a table-based layout is just as inflexible as a css-based layout. Those kinds of statements might mislead people who are trying to get into semantic html / css-based designs.

 

What I meant to say is try changing any element's postion other than from the left to the right column. Most of the time (99%) you would have to change the html as well. - Not always but most of the time.

 

It really depends on how you have structured your html - see http://blog.html.it/layoutgala/ and http://www.csszengarden.com/.

 

I have worked on sites where we were not allowed to alter the markup (which was pretty semantic anyway) but had to provide a "facelift" or "clean up" for the design...and that often involves realigning elements that are contained within the main divisions of the site. That work can be done very quickly thanks to the good work of the previous coders. It couldn't be done with a table-based design.

 

In most situations you can alter the markup. But if you are greeted with a semantic html template (or a handful of templates), the job of  altering the entire site design can be managed by changing just a handful of files. You could make the markup changes in a few hours. The flexibility of a well planned semantic html + css design is evident when you have both minor and major changes to make, from colors and typography right through to total redesign.

[dbrimlow]

Changing web pages over from table based to css is what I have been doing for close to a year now - lately close to 12 hours a day!

 

So believe me when I say that I have a system that streamlines the whole process. And it all comes down to what others have said ... starting with solid semantic markup.

 

The best way to do it is to forget about layout entirely ... just concentrate on creating a proper, no-frills "semantic" html markup page.

 

Here is a page I use to explain to customers how to submit text (fully styled):

fully styled

 

Here is how I want them to see it without a "my" style - to give an idea how to create a semantic text document that I can easily convert to a semantic html document:

basic semantic html no frills style

 

And here is the same page with absolutely no styling or stylesheet elements added ... just a straight up semantic html document ready for styling:

no style, plain semantic html structure

 

 

You want to start from scratch and properly build ONE solid template based on good semantic markup (you will be using this template often once finished). We will use an existing, table based web page you already have to start the template creation with some relevant focus.

 

During this process, use either a plain text editor (notpad, or similar) or code view of a wysiwyg editor like DreamWeaver. NEVER LOOK AT A "DESIGN VIEW" UNTIL YOU ARE READY TO ADD COLORS, GRAPHICS AND LAYOUT TWEAKS.

 

1. Create a simple html document without any color or graphics or styling whatsoever. Use a PROPER doctype (I suggest html 4.0 Strict).

 

2. Then take your table based web page and copy and paste any text in table cells into a proper plain html block level tag (headings, paragraphs, lists, etc.), include link tags - remove any fonts and/or every other "style" element in the text - except for strong for bold, and em for italics.

 

3. Make or borrow a good, solid tried and true simple css based template that starts with the basics - heading, navbar (horizontal or vertical), body (columns) and footer.

 

4. Add the ID and class divs to the blocks of text that belong within them to the markup.

 

NOW look at it in a browser or design view.

 

Since the markup is semantic, linear, and properly contained in the id or class div, you can start to fine tune the css to make it look like you want it to. You DON'T have to touch the markup to do it, just adjust the css.

 

Once you have one base template finished, then making any design change in the future is a snap - just a few changes in the css text.

 

Now you can simply save the template. When ready to make a page, open the template, "save as" a copy using the name of the page you want to make, then copy and paste the text from table based page into the block level tags that correspond to it in the new template based version.

 

Here is an example of a table based page on our site that I started the first step of creating the template from so I can convert all the other pages to css based.

Original page

 

Here is the new template:

New template

 

I have @ 300 more pages to go until completely finished. Then I will go live with the whole new site of over 2,500 pages.

 

If you just have relatively few pages, 20 or so, the you should have the whole converion finished (with tweaking) within a month or two (extra time for learning some tricks).

 

Good luck.

 

Dave