Help! Stopping design changing

Get Started
1

Hi,

Some of you may remember me coming on here when I was building my first site - I have been working on my webdesign skills and trying to get them up to scratch - I have managed to get a design I like but am having problems with the navigation dropping down a line when in a reduced browser window.

What is the best way of combatting this?

Here is the site:
Bluebelle Nail Bar & Beauty Studio - Crofton, Wakefield

2

#pageWrapper has min-width and max-width set to a difference of only 50px, which doesn’t provide a significant benefit. The simplest way to stop the drop would be to set a fixed width of 900px.

However, this would not be bulletproof as the menu will still drop for any visitor using a larger text size. This is not something you need worry about though, as it’s better than the element being pushed out of sight. What does need fixing is how the dropped menu then becomes split between left and right by the header elements expanding.

Remove the fixed height from #header, add clear:both and overflow:hidden. If the visitor uses a larger text size the menu will then always begin on the left and wrap to the left when dropped.

#pageWrapper {
	width:900px;
	margin:0 auto;
	background:#FFFFFF;
	border: 2px solid black;
}

#header {
	clear: both;
	overflow:hidden;
	border-bottom:#496fad 2px solid;
	width:100%; /* to trip haslayout to fix IE positioning bugs */
	font:"AovelNeoRegular",sans serif;
}
3

Thats brill. Thanks for your help - on both this site and the past one! I hope you can see the improvement fom the last site!!

4