First go at a fluid layout...few small issues

[deronsizemore]

Okay, so I've been toying around with fluid layouts for my next site. At this point, I'm not so sure it wouldn't be easier to just use fixed, but anyway, we'll see.

Here is my test page: http://www.deronsizemore.com/test/index2.html


First thing is that in FireFox, when using the web developer tool and resizing to 800x600 there becomes a horizontal scroll bar. I thought everything would just scrunch up to fit the resolution. In IE when you resize, the navigation on the right hand side, drops below the #content and #middle-content sections.

Second, the green gradient that starts the #secondary div at the bottom, it does not span the full width of the page. It's probably like 96% or something.

and finally third. There is suppse to be my logo in the upper left hand corner of the page. I've got the image set as a background image in the css which is inside the #header div. Although, nothing I do makes this image show up.

Thanks in advance

[agua]

All my answers are only tested in Firefox - I have no IE at the mo

Firstly:
All your layour divs have % specified - whereas your "#navigation div ul li a" has 190px specified - I changed this to width: 450% and it nearly fixed it - so I think it is because you are using a mixture of px and % - play about with this and it will fix it.

Second:
Putting

 margin:0;

on your body css should fix your green gradient (its does in FF anyway) - If using 100% of the screen - I always put magin:0; & padding:0; on the css body.

Third:
remove the slash before images - the url is incorrect - I also put in a background color incase any user specifies their own

background:#fff url(images/logo.gif) no-repeat left center;

[deronsizemore]

Originally Posted by agua

All my answers are only tested in Firefox - I have no IE at the mo

Firstly:
All your layour divs have % specified - whereas your "#navigation div ul li a" has 190px specified - I changed this to width: 450% and it nearly fixed it - so I think it is because you are using a mixture of px and % - play about with this and it will fix it.

Second:
Putting

 margin:0;

on your body css should fix your green gradient (its does in FF anyway) - If using 100% of the screen - I always put magin:0; & padding:0; on the css body.

Third:
remove the slash before images - the url is incorrect - I also put in a background color incase any user specifies their own

background:#fff url(images/logo.gif) no-repeat left center;

Thanks for the second and third fixes! Worked perfect. I could have sworn I tried "removing the slash" and it did nothing. Oh well..works now.

As for the first issue. I'm not quite understanding you with making width: 450%. That stretches it WAY out and still has scroll bars horizontally at 800x600. I assumed you may have mean 150% instead of 450%, but that was a no go also. Still horizontal scroll.

ideas?

[agua]

Well on Firefox on my computer - it stretched out to the right using 450% - I didn't really understand that neither.

What I was mainly getting at is that to make this perfect - you should either go with pixels or percent - not both as it seems to confuse the width if they are mixed.

For example main-body has a width of 80% whereas your navigation has a width of 190px - so I believe the browser will position main body at, lets say 80% of the screen size (I know you have another div - this is just an example) - but this means that the remaining 20% of the screen maybe smaller than 190px - giving you horizontal scrolling.

Does that make more sense?

[agua]

How about trying this for your navigation:

#navigation {
float: right;
width: 20%;
}
#navigation div{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: medium;
width: 100%;
padding: 0px;
margin: 0px;
}
#navigation div ul {
list-style: none;
margin: 0px;
padding: 0px;
border: none;
}
#navigation div ul li {
margin: 0px;
padding: 0px;
}
#navigation div ul li a {
font-size: 80%;
display: block;
border-bottom: 1px dotted #cccccc;
padding: 5px 0px 2px 4px;
text-decoration: none;
color: #3080cb;
}
#navigation div ul li a:hover, #vertmenu ul li a:focus {
color: #000;
background-color: #eeeeee;
}

[KelliShaver]

Yes, you have about 3x more CSS on the navigation than you need....

[Cutter]

This CSS layout stuff is what always gets me, especially when its fluid!

[deronsizemore]

Originally Posted by agua

How about trying this for your navigation:

#navigation {
float: right;
width: 20%;
}
#navigation div{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: medium;
width: 100%;
padding: 0px;
margin: 0px;
}
#navigation div ul {
list-style: none;
margin: 0px;
padding: 0px;
border: none;
}
#navigation div ul li {
margin: 0px;
padding: 0px;
}
#navigation div ul li a {
font-size: 80%;
display: block;
border-bottom: 1px dotted #cccccc;
padding: 5px 0px 2px 4px;
text-decoration: none;
color: #3080cb;
}
#navigation div ul li a:hover, #vertmenu ul li a:focus {
color: #000;
background-color: #eeeeee;
}

Still a no go on that code. That was one of the first things I tried (putting width of navigation div to 100%).

It's like I know the problem lies with the navigation, but nothing I change seems to have an affect on the horizontal scroll when resolution is resized.

Thanks

[deronsizemore]

UPDATE: Well I might have figured it out. All I did was change min-width to 750px instead of 780px and it works perfect. I was under the impression that for a site to work in 800x600 the max you could make the width is 780px?

EDIT: Well now that I made that change, it's mucked up in IE. lol.