Hello all,

It seems that just when I think I am getting the hang of creating better css I end up having to ask why this doesn't work the way that I want.

I was asked to split the name ΔΕΡΜ Α - Ω into 2 colors and I have the following code for a header and although it appears to work in say a normal browser width, when I squeeze the browser width down the header line of logoname2 and logoname3 break apart.

What I would like to see is that all the header info move to the left side when the screen size is narrower than 800x600.

What am I doing wrong and why?

Should I set the header font sizes to em for variable screen sizes?


Code:
body {
    background: #FFFFFF; /* white background for typography and WYSIWYG editors */
}

#container {
    padding: 0;
    margin: 0;
    width: 100%;
    background:#fff; /*background: #C2C29C url(../images/bg.png) repeat 0 0;*/
    text-align: center;
    
    font-family: Arial, Verdana, sans-serif;
}

#mainwrap {
    width:90%; /*center hack*/
    /*margin: 30px auto;*/ /*center hack*/
    margin: 30px 60px 0px 60px;
    text-align:left;
    /*background:#fff url(../images/rbg.png) repeat-y 80% 0; */
    height:100% !Important; 
    height:1%; /* IE */
    min-height: 700px;
    border: 1px solid #999;    /*    777    */
}

#header {
    background-color: #E3EFFF;
    height: 150px;
    border-bottom: 1px solid #999;
}

#logoname  h1 {
    float: left;
    width: 120px;
    margin: 10px 0px 0px 10px;
    padding: 0px 0px 0px 0px;
    text-align: center;
    text-decoration: none;
    font-family: Arial, Verdana, sans-serif;
    font-size: 18px; font-weight: bold; color: #555; 
}
#logoname2  h2 {
    float: left;
    width: 180px;
    margin: 10px -10px -10px 156px;
    padding: 0px 0px 0px 0px;
    text-align: center;
    text-decoration: none;
    font-family: Arial, Verdana, sans-serif;
    font-size: 60px; line-height: 80px; font-weight: bold; color: #000;
    /*text-shadow: 5px 8px 2px #555;*/
}
#logoname3 h2 {
    float: left;
    width: 180px;
    margin: 0px 0px -10px -10px;
    padding: 10px 0px 0px 0px;
    text-align: center;
    text-decoration: none;
    font-family: Arial, Verdana, sans-serif;
    font-size: 60px; line-height: 80px; font-weight: bold; color: #CF1A27;
    /*text-shadow: 5px 8px 2px #555;*/
}
#logoname4 p {
    float: left;
    width: 600px;
    margin: 0px 0px 0px 142px;
    padding: 0px 0px 0px 0px;
    text-align: center;
    text-decoration: none;
    font-family: Arial, Verdana, sans-serif;
    font-size: 1.3em; line-height: 1.5em; font-weight: bold; color: #555; 
}
Code:
<div id="container">
    <div id="mainwrap">
        <div id="header">

            <div id="logoname">
                <h1>mydomain.gr</h1>
            </div>
            
            <div id="logoname2">
                <h2>DERMA</h2>
            </div>
            <div id="logoname3">
                <h2>TOLOGY</h2>
            </div>

            <div id="logoname4">
                <p>name of person <br />
                name of person2 - name of person3</p>
            </div>
</div>
</div>
</div>