Overall page layout

Get Started
1

I have seen a lot of pages, including the Sitepoint main page where everything on the page is in a box sourrounded by an outer border. If you resize the page horizontally, the border gets smaller and the box in the middle re-centers itself until the page gets smaller than the box, at which point the box does not resize and you just start losing content. Can someone please point me in the direction of how to do this. I assume it is CSS with classes but have not found it yet.

2

This discussion is continued in Using a Centered, Floating Container

3

If I’m reading you right, you’re just talking about a fixed-width box inside a liquid container…? Of course, that wouldn’t get smaller as you sized the browser window downwards. Maybe an elastic box with a min-width… Just thinking out loud here.

4

That’s close. But if you widen the window to more than 1200 pixels, the boxes get bigger. I want them to stay the same size regardless of how wide the browser window is. But definitely on the right track.

5

Not sure if this is what you mean, but here’s a little experiment I did:

<!DOCTYPE html>
<html lang="en">

<head>

<meta charset="utf-8">

<title>Experiment</title>
	
<style type="text/css" media="all">
#box {
  width: 50%;
  margin: 20px auto 0;
  background-color: orange;
  border: 1px solid orange;
  min-width: 600px;
}

#inner {
  margin: 5%;
  background: blue;
  height: 500px;
  padding: 
}
</style>
	
</head>

<body>
<div id="box">
 <div id="inner">

 </div>
</div>

</body>

</html>