affegernodogy
New Member
In my example I need to keep header and main body to strech to a full screen when browser window is expanding (it works now). However, when browser window gets downsized, the orange image jumps down from the header and goes partially under black one. Any idea how to keep the orange image in place?Here is my example: http://jsfiddle.net/RFMBM/My CSS:\[code\] body { background-color: #e8e8e8; font-family: Arial, Helvetica, sans-serif; font-size:12px; padding: 0; margin: 0;} h1 { padding: 0px; margin: 0px; } #container { margin:0px auto; border:0px solid #bbb; padding:10px; min-width: 990px; } .white-box { width: 180px; margin: 0px; } #main-header { border:1px solid #bbb; height:98px; padding:3px; background-color: #fff; min-width: 930px; } #main-content { margin-top:10px; padding-bottom:10px; } #main-body { margin-left:10px; width:666px; height:150px; } #main-footer { margin-top:10px; margin-bottom:10px; padding:10px; border:1px solid #bbb; } .box { padding: 8px; border: 1px solid silver; -moz-border-radius: 8px; -o-border-radius: 8px; -webkit-border-radius: 5px; border-radius: 8px; background-color: #fff; } .box1 { width: 200px; float: left; } .box2 { margin-left: 224px; } div.left { float: left; } div.right { float: right; margin-right:3px; }\[/code\]HTML:\[code\] <div id="main-header"> <div class="left"><img src="http://img89.imageshack.us/img89/2675/logoxnx.gif" border="0" alt=""></div> <div class="right"><img src="http://img199.imageshack.us/img199/9759/banner2b.gif" border="0" alt=""></div> </div> <div id="container"> <div id="main-content"> <div class="box box1"> left </div> <div class="box box2"> <p>Main Body...</p> </div> <div style="clear:both;"></div> </div> <div id="main-footer">Main Footer</div> </div>\[/code\]