How to set Max-width for content to 1024 px?

Not sure what I'm looking for.

[ken_b]

First, I'm new at CSS, so be gentle, OK :)

I've built a page layout that works well ... up to 1024 px. Bigger than that and the content spreads out way to far and fills the width of a larger window. (I'm not even sure what to call what I'm looking for).

I want to limit the width to 1024 pixels.

Below 1024 the layout works as desired. THe letters and numbers just represent different blocks of content.

This is how the layout basically looks on a 1024 window, which is what I want at the width.

LL MMMM 111
LL MMMM 111
LL MMMM
LL MMMM 222
LL MMMM 222
LL MMMM
LL MMMM 333
LL MMMM 333

Below that it wraps to look like this, which is what I want. (I'm dropping excess lines for the examples

LL MMMM
111 222
333 etc

Over 1024 it lspreads out like this, this is what I'm trying to avoid, eliminate.

LL MMMM 111 222 333

What do I call what I'm looking for? And any other help would be appreciated.

(I'm trying to move from a table based layout to CSS, my cureent code is a mix of the two. But the max-width issue is first on my list to fix/solve right now)

.

[tangor]

review the max-width tag at w3c, [w3.org...] of course, but also consider viewport, which will provide similar results in a more responsive fashion. [w3.org...]

[lucy24]

I want to limit the width to 1024 pixels.

Was there a problem with the rock-bottom simplest approach, implied by the topic title?

body {max-width: 1024px;}

Width in pixels isn't always what you want, though. Sometimes, especially with text-heavy content, it comes out nicer if you set the max-width in ems.

[ken_b]

Was there a problem with the rock-bottom simplest approach,...
body {max-width: 1024px;}

Other than I didn't know that was possible? NO.

It worked great, thanks!

Now I have to explore the px vs ems thing.

[ken_b]

tangor; I had tried the max-width tag and hadn't been able to make that work for this situation yet. And I have a viewport set, but hadn't tried the width setting in that. Did try it now, but apparently didn't get it quite right.

What Lucy24 suggested worked fine.

[not2easy]

If you don't like the look on a wide screen with the body width limited, you can always add a background color or image and wrap the content with a "wrapper" div set to contain it all at max-width: 1024px; (or 64em) and center the content with margin: 0 auto;

[raseone]

Sounds like you have it under control & Lucy24's solution sounds like the obvious choice. That should stop any other issues from causing the unwanted wrapping.

It may however be necessary or desirable to address the wrapping directly. If the content is plain text then there's nothing further to do. If it is a list you will need to set the list properties so it is not "inline". If the content is in separate divs you may want to make sure that the "float" for the divs is set to "none". I still think the Lucy24's solution will probably overcome all that in most cases... maybe all cases.