Can CSS FLOATS - someone point me to the great tutorial?

I know the basics of tanks but have some problems.

I searched for tutorials on google but didn't find exactly the awnser (or it was the site of technique to understand)

I can do this:

<div id="Container">
<div id="Header"><p>HEADER</p></div>
<div id="Menu"><p>Menu</p></div>
<div id="Content"><p>Content</p></div>
<div id="Footer"><p>FOOTER</p></div>
</div>

#Container{

position:absolute;
margin:0 auto; 
width:80%;
background:none;
height:auto;
height:100%; 
min-height:100%;
margin-left: 10%;
margin-right: 10%;

}
#Header{
height: 195px;
width:100%;
}
#Menu{
float: left;
width: 172px;
height: 75px;
background: none;
position: relative;
}
#Content{
margin-left: 220px;
height: auto;
min-height:50%;
width: auto;
max-width:100%;
min-width:77%;
padding: 20px 20px 20px 20px;
border-left: solid 1px #999;
border-bottom: solid 2px #999;
border-top: solid 1px #999;
border-right: solid 2px #999;
}
#Footer{

height: 50px;
width:100%;

}

One of the problems is that the content is 100% of the contribution.

So, if I fill it with a lot of text he lines out great, but if I get a single word in the div it will wrap the div arround the word.

Normally I also happens to the height. But who is supposed to be.

Is it with full text:

__________________________

| test test test test test test test.

|_________________________|

Is this single word:

____

| test |

|___|

That should be:

__________________________

|test                                       |

|_________________________|

But I don't want a fixed width in pixels! I want to stretch a little so that it displays Nice on high resolution more low resolution.

It's a bar of menus fixed floating to the left of the content. How should I deal with the content, so it will aways aligned at the end of the header?

< HEADER > 100% width of the container

< MENU > < CONTENT > fixed width 172px - remaining content needs to stretch so his double up the right headers.

________________________________________________________________________________________

Also, I need to know how to deal with the floats in floats.

My footers behavior wrong, if I make my small browsers window, the foot is under the content but its behind the menu.

Its because I used Spry panels which are treated as fleet also. And I don't know how to clear the footer of content as well as the menu.

For example, if I have the above configuration, and I want to treat the contained as a 'Container' new div which floats in it, how?

Any help, links to good tutorials, etc. would be nice.

If you see the problem of footer and align problem: http://www.wientjesvoegwerk.nl/

Note the alignment of the content. Press "INFO" and notice the change of content. Its width is smaller then assumed. It must always have the same width.

Now make your browser window small (always on the 'INFO' page) you just do the small width.

Now, you will see the footer is behind the menu bar, but at the bottom of the content.

So I need help or a good tutorial on how to solve this problem.

5 types of CSS positioning:

  • Static (default)
  • Relative
  • Absolute
  • Fixed (similar to the absolute, but not supported by all browsers)
  • Float

Learn CSS positioning in 10 easy steps-

http://www.Barelyfitz.com/screencast/HTML-training/CSS/positioning/


Float tutorials-

http://CSS.maxdesign.com.au/Floatutorial/

Nancy O.
ALT-Web Design & Publishing
Web | Graphics | Print | Media specialists
http://ALT-Web.com/
http://Twitter.com/ALTWEB
http://ALT-Web.blogspot.com

Tags: Dreamweaver

Similar Questions

Maybe you are looking for

  • D530 SFF, cooling problems

    I have a D530 SFF which seems to have cooling problems. I upgraded the processor a 2.66 to a HT No 3.2 and updated the bios and had no problems. Cooling problems begin a week later. The CPU fan has started to become very strong. I used a silver therm

  • How can I correct the toolbarupdaterservice.exe error?

    I have a Pop Up every time show me that do toolbarupdateservice.exe work. so, how can I solve the problem on my PC?

  • Impossible to pass the BIOS back to 2.28 (Aspire E1 - 731)

    Hi, I have flashed accidentally BIOS version 1.17 on my Aspire E1 - 731 running win 8.1). Now it won't boot from the HARD drive. I am able to boot with win 8 from a USB (Win to Go) and tried to flshh back to version 2.28 BIOS but the program does not

  • Deleting the files corrupted in the recycled folder

    I am running Windows XP and I have tried to run the defrag program.  The program will not work until the end because of corrupted files (4) in the recycled folder.  I can view the list of files by going to the command prompt, but no action that I hav

  • Restore the files backed up on another computer

    I have two PCs. an office and the other at home. I took the backup on USB to the desktop and I tried to restore to the home pc. Home PC has window7. I couldn't restore the backup file to myhome pc. Although provied want me a solution