CSS DIV - wont touch end of screen [minimized mode]

smogsy

smogsy

smogsy

Soldato
Joined
9 Dec 2006
Posts
9,287
Location
@ManCave
hey,

my website created in CSS/HTML is not working fully, for some reason the navigation bar does not reach the end of the page, but only in non-fullscreen mode in full screen its fine and width is set to 100%

http://smogsy.co.uk/

need suggestions or help to try and fix this please? :)

can post code if required, but thought you could extract easily.
 
Well it looks like it does go 100% on mine - I am looking with Firefox. However I would tidy up the nav bit by taking out the width=100% in the html as you have already declared it in the css. The css could be cut down to:

Code: 
#navigation {
    width: 101%;
    background: #333333;
    float: left;
    font-family: 'Verdana','Times','serif';
    font-size: 10px;
    margin-left: -8px;
    padding-left: 8px;    
}

You might also want to think about using ems rather than px for font sizes.
 
I'll try and explain my first post a little better...

When you are using percentages for the width of an element you tend to use percentages for the elements within. A block level element will fill the width available unless a width is explicitly specified or it is floated.

I can't quite figure out what you are trying to achieve because if you are doing what it looks like you are doing, the messing around with 8px is very strangely done.

You need to start again with that after explaining what you want to do. You are fighting with the css rather than using it to your advantage. On the #container you are setting the width to 100% then giving it a margin of 0 auto which will never kick in as it will never have any space between itself and its parent container to put a margin in.

Not trying to be harsh but you might be better off learning a better way of doing it rather than wrestling every step of the way.

Edit: Have a quick look at this http://jsfiddle.net/ej6Hc/embedded/result/

I don't know if that is what you are trying to achieve but it looks similar and you can tweak it as you need.
 
Last edited:
You must log in or register to reply here.
Back
Top Bottom