• Quick note - the problem with Youtube videos not embedding on the forum appears to have been fixed, thanks to ZiprHead. If you do still see problems let me know.

HTML / CSS for center column

Bell

Penultimate Amazing
B
Joined
Sep 9, 2006
Messages
21,050
Tried to Google, but I get to many links, which seem to point to what I am NOT looking for. I'm looking for a bit of HTML / CSS that produces a webpage with a centered column of a give width (say 600px).

And that's it.

No fancy stuff, bells or whistles. No side bars either. No talking about padding, margins, borders, fonts etc. Just a page with a white background, that holds a column in the center, and in this column the text.

If any of you could provide me with the HTML / CSS I would be very grateful.
 
http://community.contractwebdevelopment.com/css-fixed-width-center-column
Fixed Width Center Column Without Tables

What we want to do here is create a fixed width center column in CSS whose side columns fill in with white space in larger resolutions. This particular example will fit all resolutions down to 800 x 600.
body { text-align: center; margin: 5em 0 0 0; vertical-align: middle; } #content { width: 760px; text-align: left; margin: 0 auto; }
Click to expand...
 
As a reader of web pages, I much prefer a plain page that resizes automatically to the width of my browser window. Then, I can pick the width that's most comfortable for me, and so can everyone else. What is the advantage of forcing a specific width?
 
There isn't a reason to fix a single column page's width except for 2 reasons.

1) You're going to ad other columns or ads on the side later.

2) The page is going to contain lots and lots and lots of unbroken text. There's a reason books only get so wide these days.
 
I've got lots and lots of unbroken text on my web site. I haven't used columns at all. I've used the BLOCKQUOTE attribute to bring the text in from the sides of the window, but otherwise I've left it so that the reader can size the browser window to whatever width they find most comfortable for reading.

I've also specified no fonts at all. Readers are free to pick whatever the hell they want, type-face and size. If they're reading it all in Times New Roman and don't know how to reset their browser's default font, it's time they learned.

Rolfe.
 
Aerik said:
2) The page is going to contain lots and lots and lots of unbroken text. There's a reason books only get so wide these days.
Click to expand...

The reason being that it'd damned difficult to resize a book once it's off the press.

Now, a browser window on the other hand ...
 
Oh, jeebus, Rolfe that is terrible. It's almost like when noobtards on geocities just use a dozen blockquote tags in a row to condense content. Just lame, man.

Text is much easier to read if the rate at which your eyes go down is more comparable to the rate which they go left-to-right. For this, I still see a main column of 750-800 pixels to be quite appropriate, even if it seems odd when it's not accompanied by sidebar content.
 
Aerik said:
Oh, jeebus, Rolfe that is terrible. It's almost like when noobtards on geocities just use a dozen blockquote tags in a row to condense content. Just lame, man.

Text is much easier to read if the rate at which your eyes go down is more comparable to the rate which they go left-to-right. For this, I still see a main column of 750-800 pixels to be quite appropriate, even if it seems odd when it's not accompanied by sidebar content.
Click to expand...


Yeah, probably really lame. It was my first attempt at html of any sort ten years ago, and it was easy to do. Mind you, the alternative was to use a single-column table, specified as a percentage of window width, and I'm not clear that that would have displayed any differently in the end.

ETA: Anyway, do you mean the coding is lame, or that you don't like the layout as it appears on the screen? How would you like it laid out?

I've been thinking of recoding it. But on the other hand, as it is, the reader can made the width anything they choose. So if people like 750-800 pixels, then they can have that. Or something else.

I'm really, really opposed to fixing the width of columns in pixels. At the time I coded that stuff, I was using a 640x480 monitor. I liked it that way. Well-designed web sites formatted very well. But web pages designed by people with higher screen resolutions who thought they knew best, were a nightmare. It's no fun to have to scroll horizontally to read every line. As a result, I just didn't read these pages. OK, I'm not using that screen resolution any more, who is? But there are still people who want to change the width or the font or the point size or whatever, for their reading comfort, and for whom your choice of pixels may then display very badly. Why make it hard for them?

Sometimes you have to format by pixel because you don't want lines to wrap for a specific reason. In a table, for example. But if you're publishing text, specifying the width of your columns, in pixels, is downright antisocial.

Rolfe.
 
Last edited:
69dodge said:
As a reader of web pages, I much prefer a plain page that resizes automatically to the width of my browser window. Then, I can pick the width that's most comfortable for me, and so can everyone else. What is the advantage of forcing a specific width?
Click to expand...

The main reason is that I want to keep my text blocks a fixed width, because of readability (see Aerik's 2nd comment) and aestethic reasons. But after reading the input in here, I'll consider changing that. I'm still experimenting with the layout at the moment.
 
Bell said:
The main reason is that I want to keep my text blocks a fixed width, because of readability (see Aerik's 2nd comment) and aestethic reasons. But after reading the input in here, I'll consider changing that. I'm still experimenting with the layout at the moment.
Click to expand...


Aerik is saying that a column of a certain number of pixels is about right. He's really saying that particular width is right for him, with his screen resolution. It might not be right for someone else, possibly with eyesight problems, or simply with a very different screen resolution.

It's far better to let the text wrap, and let the reader resize the width of the window to get a comfortable reading width for their own situation.

I agree that having text jammed right up against the sides of the window is not aesthetically pleasing. If you think the BLOCKQUOTE tag is lame, which it probably is, I would suggest using three columns, and sizing them as percentages of window width - say 10%, 80%, 10%. Shove a couple of   in the two outer columns so that they're not empty, and put your text in the middle one. Experiment with different window sizes, screen resolutions and column widths until you like the result.

It's also better to put as little restriction on fonts as possible - what you might find aesthetically pleasing might be unreadable to someone with a different screen resolution or a visual impairment.

Rolfe.
 
Rolfe said:
I agree that having text jammed right up against the sides of the window is not aesthetically pleasing. If you think the BLOCKQUOTE tag is lame, which it probably is, I would suggest using three columns, and sizing them as percentages of window width - say 10%, 80%, 10%. Shove a couple of   in the two outer columns so that they're not empty, and put your text in the middle one. Experiment with different window sizes, screen resolutions and column widths until you like the result
Click to expand...

Or you could use page margins, or simply assume that the reader has their own, just like they have their own window sizes ...
 
Can't find an on-line link to support this but some research I read a few years back indicated that very few people will willingly alter their browser's window to alter the rendering of a page.
 
Possibly true. I do it quite a lot, but I suspect it's one of these things that a lot of people simply don't think of doing. (Changing the default font on their browser even less, possibly.)

However, I think that underlines the point. You can't really know what default browser window size and screen resolution everybody is using. If you fix the width of an element in pixels, this may well be too wide for some people's default window. Now me, I'd just drag a side border of the window to make it fit, muttering about dictatorial web authoring as I did so. But if that's unusual behaviour, all the more reason to allow text to wrap to the window as it stands.

Aerik, you never told me if it was the actual appearance of the text on my page you didn't like, or the lameness of the coding. I really would like to know.

Rolfe.
 
Bell said:
The main reason is that I want to keep my text blocks a fixed width, because of readability (see Aerik's 2nd comment) and aestethic reasons. But after reading the input in here, I'll consider changing that. I'm still experimenting with the layout at the moment.
Click to expand...

I see.

Very wide text is definitely hard to read, I agree.

I guess it all depends on how many people are consciously aware of this fact, and will resize their browser window themselves. I am and do, but I guess I wouldn't be too surprised to learn that most people just keep their browser maximized, for example, and then find reading difficult without quite knowing why.
 
Well, Zep won't read this anymore :( but anyhow...

After some further searching the interweb, I found the next - very simple - solution. Replace px with em and the width of the column will scale with the size of the text:

Code: 
body { text-align: center; }

#content { text-align:    left;
           margin:        0 auto;
           width:         45em;}
 
You must log in or register to reply here.

Back
Top Bottom