Hi.

I'm relativly new to html, css ect, but decided to have a real go at it this weekend! I have almost got what I want, but...

I have a left side navigation bar, div id=menu, and a main div, id-main.
The nav bar is set to width=15%, and the main bar is set to width 85%, with a 15% margin.
And the text on the right hand side is slightly off the page...

Both divs have a 10px padding.

The best page to see this on is http://robertsworder.vndv.com/project.php, and my css is at http://robertsworder.vndv.com/style.css.

I have tried setting the main width to 83%, and that works, but seems like a fudge to me!
Does anyone know how to stop this?

Thanks,
Swordz

Well, the problem is that width and padding add together to give the width of the element. And so, since your elements have a cumulative width of 100% and also 40 pixels of horizontal padding it's 40px wider than the browser window. You could fix that by padding the elements inside those two elements rather than padding the elements themselves.

Thanks! That works just fine! Although it's a bit odd having nested divs like that

i dont like using percentages, as it will change over different browsers. you can also try using ems (for font and stuff). but i prefer using pixels. that way, you get exactly what you want and where you need it.

I've heard many people say that using fixed values (such as pixels) is a big "no-no" because it doesn't adjust the website for different browsers. I'm a pixel person myself and percentages just mess me up. When it comes down to it, the site belongs to the individual (such as myself) and I could care less if someone on a cell phone or a Playstation 3 can view my site. Once I actually make the time to get my site up and running, it will be there for my personal expression and I have lack of concern if it makes EVERYONE happy. Not to mention making everyone happy is impossible anyway so it's important to be satisfied with your own work before worrying about what others are satisfied with.

The point is that it changes, so that your layout looks good in any given resolution mostly - and to make it efficiently use the space available to it. A fixed layout (pixel measurements) tends to look best in one resolution (typically that used by the designer) and it can seriously suffer when used in something different. Making it liquid (using percentages/ems - relative measurements) means you can make it look good centered in 800x600 and look just as good centered in 1600x1200 or whatever.

You have to be quite arrogant to assume that only your opinion matters for a public site. If you can, it always makes sense to make it liquid, because you please more people that way.

I never made any 'liquid' site, never tried actually but none of the layout i designed could of been 'liquid' i just think that way :

Most people nowadays have at least a 17inch monitor, which works best with 1024x768 resolution, i believe that 1024x768 is the most used resolution these days.
So each of my layouts are made for 1024x768 (not that the height matters) websites, what i usually try to do is have a background repeat if i am using a bar on top, have a bg repeat if i use a specific design, and or center my layouts so its perfect on 1024x768 and looks perfect on higher as well.

Having it 'liquid' is kind of a hard choice as well knowing that many people have 21 22 24 screens and that their resolution is bigger (dunno how much.. i guess around 1700x1000 ? well imagine the Zymic forum (liquid) on a 1700px width browser ?

i think it has its value to have content concentrated at one place.

well i also agree with alex. it is true that sites are viewed in different browsers/resolution/devices. for devices, i simply use another css link referance to a phone, or printer or any other device.

I agree to a point, but there are things in css that can limit the width, like max width and you could put 1500px there to stop it from growing past that width. That way it's liquid for users with screen resolutions smaller than 1500px but won't get any bigger (to leave the information like in a forum more squished together and therefore easier to read)

So there are benefits to both, but you should definitely try to make layouts liquid.

Although I guess i'm being a bit of a hypocrite since I've not made but maybe one or two sites ever liquid.

Whoa, this is ages old! I've done an entire new design since I posted this... It's currently still in alpha though, I'm missing 22 images...

swordz

Wow didn't even notice the dates since most of the posts were from today. Haha.

Yes, I understand that if I want my site properly viewable to as many visitors as possible, then I should cater to their needs. But what if I'm not very concerned about the popularity of my site and that it wouldn't break my heart to have quite a few less people view it simply because they can't see it properly? It's not arrogance. I never plan on making a career out of this, it's simply a hobby of mine (which by the way I rarely get the chance to spend time on anyway) that I have nothing to lose by someone not liking my site. It wouldn't compromise my well being or my families well being for sucking at it and we all know that there are plenty of suck ass websites out there, one more shouldn't hurt anything. So, because I am willing to face the fact that I can never make everyone happy, then I'll just worry about being content with my own work. Regardless of what I do, fixed width or percentages there will always be someone who disagrees or has a different point of view.

Nice site by the way, could prove quite useful.



We're a bit slow and you know people will start a debate over anything. We don't even look at dates when it comes time for a good argument.

Thanks for the complement, though I'm not sure I agree... It was put together in a hurry!

You might have noticed a mention of a new design, and a link on my homepage. If people want to, I would appreciate comments on it! It's not entirely finished, mainly a photo issue... Big blocks of colour are missing photos!

The username and password are zymic, it's only passworded to stop google getting index happy.

I'll probably post this in the review section too.

swordz