100% width div above set width div

HTML & CSS
1

http://berryequipment.net/orsca/

Okay, basically on 800x600 or any time your window is restored down to a size smaller than #main, the #top div will be size of window, while there will be a scroll bar obviously to accommodate for #main’s width. I need a background to repeat across the top bar, if it’s showing up short at any time, it will look bad. Is this fixable? You can view the source or look below, very minimalistic code atm.
Thanks!


<?php
session_start();
?>
















<html>
<head>
<title>ORSCA -  Outlaw Racing Street Car Association</title>
<link href="stylesheets/main.css" rel="stylesheet" type="text/css" title="default" />



</head>
<body>



<div id="container">

	<div id="top">test</div>

    <div id="main">test2</div>

</div>






</body>
</html>



body {
margin: 0px;
padding: 0px;
background-color: #000;
}

#container {
position: relative; top: 0px; left: 0px;
text-align: center;
width: 100%;
background-color: #FFF;
}

#top {
position: relative: top: 0px; left: 0px;
text-align: center;
width: 100%;
height: 108px;
background-color: #FF5674;
}

#main {
position: relative; top: 0px;
width: 998px;
margin-left: auto;
margin-right: auto;
background-color: #323111;
}
2

Hi,
You need to replace the width:100% with min-width: 998px; on your #top div. It will default to 100% width on it’s own when the space is available.


#top {
[COLOR=Red]/*position: relative: top: 0px; left: 0px;*/[/COLOR]
text-align: center;
[B]min-width: 998px;[/B]
height: 108px;
background-color: #FF5674;
}

There is no need for all that relative positioning either. Remove it on all of those selectors. :wink: