Using a Centered, Floating Container

HTML & CSS
1

I have seen a lot of pages, including the Sitepoint main page where everything on the page is in a box sourrounded by aleft and right background only outer border. If you resize the page from right to left, 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.

2

Thanks I’ll give it a try

3

Thanks Ralph, I can handle it from here. That was a huge help.

4

position: absolute is very inflexible, though. It’s much better to give each box a width and use float: left;

Then your content will flow nicely.

5

Your initial post implied that the box resizes (or at east, what did you mean by the border changing sixe?)

If you want it fixed, just do this:

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

<head>

<meta charset="utf-8">

<title>Experiment</title>
	
<style type="text/css" media="all">
#box {
  width: 800px;
  margin: 20px auto 0;
  background-color: blue;
  border: 10px solid orange;
  height: 500px; /* temporary, until content added */
}

</style>
	
</head>

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

</body>

</html>
6

Ah, I see. No, the borders aren’t flexible. There’s just a fixed, shaded background image behind the content. Here is a basic template:

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

<head>

<meta charset="utf-8">

<title>Experiment</title>
	
<style type="text/css" media="all">
body {
  background: url(http://1.sitepointstatic.com/frontpage/images/body-background.png) repeat-y 50&#37; 0;
  margin: 0;
}
#box {
  width: 950px;
  margin: 0 auto;
  background-color: white;
  height: 800px; /* temporary, until content added */
}

</style>
	
</head>

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

</body>

</html>

EDIT: of course, if you are going to do a design like this, make your own bg image for it. I’m assuming SP won’t mind me hotlinking their background image on their own forums. :wink: (I hope so, anyway!)

7

Ralph, if you look at the Sitepoint main page, the page is in the center and there is a transitional colored border to the right and left. If you resize it, the borders are flexible, but the content in the center never resizes.

8

Okay, I got it. If you use the position attribute as absolute, it accomplishes what I need. Again, thanks for the help.

9

agree, I wasn’t sure how to delete the first one but thought it would be better posted here.

10

Just requested that the other one be deleted

11

bestboy, just post your questions ONCE in this forum. I’ve given you an answer here:

(It’s bad etiquette to post the same question twice, as it causes a lot of confusion and potentially wastes people’s time. If you feel the question was posted in the wrong place, you can click the orange flag and request that it be moved.)

12

Well I thought I had it. One more thing. How do I arrange boxes inside the orange box beside each other. If I add another box, it ends up below the first box. Here is what I have to do that. What I want to do is put the boxes next to each other. Thanks

<!DOCTYPE html>
<html lang=“en”>

<head>

<meta charset=“utf-8”>

<title>Experiment</title>

<style type=“text/css” media=“all”>
body {
background: url(http://1.sitepointstatic.com/frontpage/images/body-background.png) repeat-y 50% 0;
margin: 0;
}
#box {
background: orange;
width: 800px;
height: 600px;
margin: 0 auto;
}

#inner1 {
width: 400px;
margin: 0%;
background: blue;
height: 500px;
}
#inner2 {
width: 400px;
left: 400px;
background: red;
top: 0px;
background: red;
height: 500px;
}

</style>

</head>

<body>
<div id=“box”>
<p>
<div id=“inner1”>

</div>
<div id=“inner2”>

</div>
</div>
</p>
</body>

</html>