Easy CSS solution for different montior resolutions?

March 9, 2009 1:22 PM

Easy CSS solution to have all of the content (header, content, nav bar, footer) move together in the body?

Question: How do I make 'everything' liquid, not in relation to each other, but just as a single unit in the body?

Could I group it in some way and then float the whole thing in the body? (mind you, I am not even sure I get the concept of 'float')

I just realized that both my websites work well with a very high screen resolution, but most people have 1024x768. So you need to horizontal scroll just a bit to see the whole website. Not good.

I am not very familiar with css and have been doing just a cut and paste mishmash to this point so I do not really have a deep understanding of css, I am just trying to get my website 'functional. The only change I would really need to make is to have 'everything' move together in the body, as I have a 100 px margin on the left and if I could get that to 'disappear' when viewed with a lower resolution, the whole site would be visible on the 1024x768, and problem solved.



Thank you!

note: I am looking for the easiest solution, not to rewrite the whole style sheet in a different way)

posted by Vaike to computers & internet (10 comments total)

Do you just want to center the content, regardless of the user's resolution? if so, there are a number of ways. You can wrap it all in a 100% width div and give it center align. You can also just put your content div inside a [center][/center] html tag. This is old-school and may not validate, but it's simple and it works.

And no one really gets "float." it's illogical, horribly named, and borderline nonsense.
posted by drjimmy11 at 1:34 PM on March 9

Glad it's not just me. Then again I am a welder, not a webmaster.

I have a margin-left: 100px; on everything except the nav bar which is positioned left: 650px;
so all the content kind of centers left right now. I would like the body to kind of disappear on a smaller resolution, so it does not take up any browser real estate in those situations.

The only way I can think of to explain it is: as I make my browser window smaller all the content, as a group, shifts even more to the left. So with a lower resolution you only see the content (including nave bar header, footer) but with a higher resolution you see the background as well.

I suppose I can absolutely center the whole thing, drjimmy11, I did not think of that. visually I prefer it, actually.

Thought: could I wrap it all in a 100% width div and give it a maximum and a minimum size constraint? How would I write this? Can I just do a big parent div from before the header to after the footer? And can I do this somehow in the CSS not the html (as it is for 2 sites and lots of pages)

(site is in profile, btw)
posted by Vaike at 1:56 PM on March 9

The following CSS will create center all of the page content with a min and max width. If the browser window width is less than the minimum width, a horizontal scrollbar is added. If the browser window width is greater than maximum width, a background color will be displayed. It also stretches the height of the content to be 100%.

html
{
height:100%;
background: #000000;
}

body
{
min-width: 1000px;
max-width: 1500px;
background: #ffffff;
margin: 0 auto;
min-height: 100%;
}


The benefit of this approach is that you don't need to wrap all your content in a div.
posted by christonabike at 2:16 PM on March 9 [1 favorite has favorites]

Since both the OP and a responder had questions about how float works, I might as well try to explain that too.

When rendering content normally, the browser does it in a top down fashion. When the browser encounters a block level element (e.g. <div>, <p>) it renders the element using the full width of the current container. Simple enough.

When you specify that an element is "float: left" or "float: right", you are now telling the browser to not render content top-down, but either left-to-right (float: left) or right-to-left (float: right). If a block level element is floated, it no longer takes the width of it's parent container, but the minimum amount of width required to display it. Specifying, "clear: both", simply tells the browser to go back to the top-down model of rendering.
posted by christonabike at 2:23 PM on March 9 [3 favorites has favorites]

Right now, you've got a fixed-width layout. One way to solve the problem of narrower windows is to use a narrower widths all around, but it sounds like you want a "liquid" layout, where the content of the page reflows to match the width of the window, or a liquid/fixed layout, where only part of it does.

There are a few ways to skin this cat. If you check out this page (which has a mixed liquid-fixed layout) and view the source code, you can probably adapt it to yours without too much difficulty, but one of the pitfalls of a mishmash paste-together is that you can get all kinds of unpredictable interactions. You might find it is easier to use that CSS as is, adapt your HTML to fit the structure the CSS expects (there would need to be a few changes, but not a lot), and then start adding in your previous CSS to get the colors, etc you want.
posted by adamrice at 2:47 PM on March 9

Thank you christonabike. It seems to be working for everything except the header. The text bunches up more and more to the left, and the background image gets more and more cut off on the right. (jut going smaller, going larger it is fine)

And the float description was very clarifying, thanks.

Also, where exactly am I supposed to put this in the code? This is what I had previously for body and header:

body {
background-color: #d2bb54;
margin: 0px;
font-family: Times, "Times New Roman", serif;
font-size: 1em;
}

#header {
text-align: right;
margin-left: 100px;
margin-right: 100px;
background-color: #ffedc0;
line-height: .2em;
width:74%;
padding-bottom: 1px;
padding-right: 30px;
padding-top: 10px;
padding-left: 10px;
color: #312000;
background-image: url(images/test8.jpg);
height: 246px;
background-repeat: no-repeat;
margin-top: 10px; }
#content {
position: relative;
width: 860px;
left: 100px;
right: 100px;
top: 0px;
background-image: url(images/bgwebrepeating1.jpg);
background-repeat: repeat;
color: #804000;
padding-top: 0px;
margin: 0px; }

Thank you so very much
posted by Vaike at 2:48 PM on March 9

It's probably the width: 74% line in the header, but I can't say for sure.

When stumped by CSS, the best thing to do is to create a test page and reintroduce markup and CSS rules a few chunks at a time. That way you can find out exactly what line or CSS rule is not behaving the way you think or expect it should.
posted by christonabike at 3:30 PM on March 9

You might also look at blueprint or the yui grids, which are a way to have someone else do this for you.
posted by rbs at 4:09 PM on March 9

Clearing Floats: The FnE [Float (Nearly) Everything] Method
posted by kirkaracha at 4:14 PM on March 9

Thank you so much everyone. For now I just made everything a bit narrower, as I just don't have the time to get into it (as my code has gotten messy and needs cleaning up as well), but christonabike's answer clarified the matter (also with floats, as I think I am going to want to study a bit more on that as well) and when I have a bit of time, I will be using that as the starting point.

Thanks again!

Vaike
posted by Vaike at 11:15 AM on March 10