Problem with sticking div to top

HTML & CSS
1

Hey Guys.

This is my url : http://www.hamidoffice.com/kar/mrmr and i am trying to stick red part to top like this photo :
http://www.hamidoffice.com/kar/forum/HEADER.jpg

please tell me ow can i to that :slight_smile:

2

thanks a lot , i make small image and repeat-x and now its fine :slight_smile:

3

It’s the bit in blue below.

#header{
background: [COLOR="Blue"]#102b48[/COLOR] url(images/header.jpg) no-repeat;
height:109px;
margin:auto;
}

Your header bg image is only 1280px wide, and is located top left, so on wide browsers there will be a gap to the right.

You aren’t thinking this out properly. You need an outer div of 100% width that has a repeating background image (no logo). That will span the whole page no matter how wide.

Then you need an inner header div, 950px wide, with the logo to the left and menu/search box floated right.

4

tnx ralph, I did something on it : http://www.hamidoffice.com/kar/mrmr/ but do you know whats that blue part of site and it comes from where ?!? after that how can i make this header with 100% width on screen.

#header{
background: #102b48 url(images/header.jpg) no-repeat;
height:109px;
margin:auto;
}

5

Hi aghahamidgol, welcome to SitePoint! :slight_smile:

Step 1: move the #sub div into the #header div.
Step 2: give it a width (roughly 200px), float it right, and add a few other bits:

#sub {
  width: 200px;
  float: right;
  clear: right; 
  margin-right: 200px;
}

That will sort of help, but then you will find that on different screen sizes things will more around in bad ways.

So step 3: do this for the #header div:

#header {
  width: 950px;
  margin: 0 auto;
}

Then remove the right margins on the ul and #sub div.