Welcome to WebmasterWorld Guest from 34.238.189.171

Forum Moderators: not2easy

Message Too Old, No Replies

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

Not sure what I'm looking for.

     
12:22 am on Oct 20, 2015 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member ken_b is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Oct 5, 2001
posts:5885
votes: 117


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)

.
12:53 am on Oct 20, 2015 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member tangor is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Nov 29, 2005
posts:10140
votes: 1010


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...]
1:09 am on Oct 20, 2015 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month

joined:Apr 9, 2011
posts:15762
votes: 828


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.
2:21 am on Oct 20, 2015 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member ken_b is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Oct 5, 2001
posts:5885
votes: 117



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.
2:48 am on Oct 20, 2015 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member ken_b is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Oct 5, 2001
posts:5885
votes: 117


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.
4:06 am on Oct 20, 2015 (gmt 0)

Administrator from US 

WebmasterWorld Administrator not2easy is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Dec 27, 2006
posts:4397
votes: 314


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;
3:29 am on Dec 20, 2015 (gmt 0)

Junior Member

joined:Aug 3, 2013
posts: 113
votes: 32


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.
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members