html - Styling problems using CSS -

http://jsfiddle.net/amkhx/

hello all,

i linked code on top. main problem have header, content , footer set works websites. not have scrolling feature or anything. everytime try add intel logo screen. there. move around , tweek , works 1 browser , not other... keeps changing. want logo stick left along header made css. want mobility group text @ height right next logo, reason messes header content , footer when paly it. pretty want logo on first mobility group right next itand make smooth!

also have learned html css , php , if guys see in code done smarter please let me know. need critical feedback can progress in learning these new languages better can succeed in field of programming!

thank in advance input , advice!!

html code:

<div id="page">          <div id="header">              <h1><img src="http://wireless.fm.intel.com/test/logo2.png">                  <h2>mobility group</h2>            </div>         <div id="main"></div>          <div id="footer"></div>  </div>  </body> 

css code:

html, body {         padding:0;         margin:0;         height:100%; } #page {         min-height:100%;         position:relative;         height:100%; } #header {         background-color:#115ea2;         height:100px;         width:97.5; } #main {         width:1300px;         margin-left:auto;         margin-right:auto;         background-color:#f1f2f3;         min-height:87%;         height:auto;         height:87%;         margin:0 auto -50px;         vertical-align:bottom; } #footer {         position:fixed;         width:100%;         bottom:0;         height:50px;         background-color: #115ea2; } #header h1 {         position:absolute;         text-align:left;         left:0px;         top:0px; } #header h2 {         text-align:center;         font-size:44px;         color:#ffffff;         left:0px;         top:20px;         font-weight:bold; } 

i'm still not sure understood question, here's can make more natural looking. close h1 tag, don't make absolutely positioned, rather make float left. same thing goes h2 element. , since original image missing, i've put one, , fixed height 60px.

it's this:

#header h1 {     text-align:left;     left:0px;     top:0px;     float: left; }  #header h1 img {     height: 60px; } #header h2 {     text-align:center;     font-size:44px;     color:#ffffff;     left:0px;     top:20px;     font-weight:bold;     float:left; } 

see results here: http://jsfiddle.net/amkhx/1/ should same in every modern browser.

also, try not use capital letters css attributes - it's standard use lower case, , browsers might not it.