How to create web design effect ...

[taylor04]

I didn't know what else to call this post.

I want to be able to create a header separator like on Start.com (a big blue bar)

On Google, it is slightly different. There is white space at the end of each side.

The bar adapts to the screen space.

[ecsyle]

Use a table with a 100% width? Or use a div with a 100% width?

http://www.w3schools.com/

[ScottyDoo]

Here's what start.com is doing...


<div id="searchBar">
<form id="sf" class="sa1" action="http://search.msn.com/results.aspx" method="get" onsubmit="return sf();">
<div id="ss" style="white-space:nowrap;clear:both">
<input type="hidden" name="FORM" value="START3" />
<input type="hidden" id="sy" name="srch_type" value="0" />
<input type="text" id="searchEdit" name="q" accesskey="s" maxlength="150" size="35" value="" />
<input type="submit" value="Search" id="searchButton" />
</div>
</form>
</div>

http://www.start.com/css/style.css
#searchBar
{
background-color: #97b9e4;
margin-top: 70px;
margin-bottom: 0px;
text-align: center;
padding-top: 3px;
padding-bottom: 3px;
border-top: solid 3px #E5EEF9;
border-bottom: solid 3px #E5EEF9;
}