don_koskela
don_koskela

Reputation: 1

width exceeds browser window

I have looked through previous questions on this topic but after following the advice I could find and looking through the full CSS, I can´t get my head around this...

My width on body, html is set to 100% and I can´t find anything the inflicts on that in terms of padding or such.

Could anyone please point out what the problem is? Might be something really simple that I´m just missing.

Here is the website: www.niklaskoskela.com

Sorry for not posting just a snippet or so but I really can´t find the problem.

Regards, Niklas

Upvotes: 0

Views: 1181

Answers (3)

Milind More
Milind More

Reputation: 317

I agree with damienoneill2001 this is the issue

change your css as follows

.nav ul {
    float: right;
    margin-left: 20px;
    margin-top: 1.6%;
    padding-top: 1%;
    width: 40%;
}

remove width from body width:100% it will take auto width

body {
    background-color: #F5F5F5;
    height: 100%;
    text-decoration: none;
}

lets update some css for navigation to take it right corner

.nav ul li a.next img { float: right; margin-right: 20%; opacity: 0.7; text-decoration: none; width: 15%; }

.nav ul li a.close img { float: left; margin-left: 8%; opacity: 0.7; text-decoration: none; width: 15%; }

.nav ul li a.previous img { float: left; margin-left: 19%; opacity: 0.7; text-decoration: none; width: 15%; }

.nav ul { float: right; margin-top: 1.6%; padding-top: 1%; width: 24%; }

also please update hover classes for width and margin

Upvotes: 0

Naveenkumar
Naveenkumar

Reputation: 473

I think that problem is with the div id="wrapper" height. remove the height:100% and check..

#wrapper {
width: 100%;
/*height: 100%;*/
}

Upvotes: 0

damienoneill2001
damienoneill2001

Reputation: 499

Your problem seems to be on your .nav ul. The margin-right: -8%; seems to be the issue for me.

For anyone else looking, you will need to click into one of Niklas' projects, such as http://www.niklaskoskela.com/hkr.html

Upvotes: 1

Related Questions