CSS/HTML: Sideborders and having them cut off when the window is too small.

I have the following image here for an example; background
As you can see, I have two side borders and the main content area. It looks like it works here (ignore the white area atm) but I have an issue.

If you size your browser down (aka size the window or have a smaller monitor) the page starts at the sidebar image. I want it to slowly crop out until only the MAIN area is there. Thing is it would need to crop out both sides evenly, I've seen some sites that do it but I'm not sure how.

So in the end there would be no side borders and only the main content area as the minimum width. It shouldn't consider the sidebar images as part of the content, thus making it so the minimum window size is alot larger.

My coding is pretty simplistic:

.outer {
	width:1187px;
	margin-left:auto;
	margin-right:auto;
	border:0;
	background:#000000 url('../images/bg-left.png') repeat-y left top;
	padding-left:109px;
	height:100%;
 }

.inner {
	background-color: #FFF;
	background-image: url('../images/bg-right.png'), url('../images/bg-middle.png');
	background-repeat: repeat-y, no-repeat;
	background-position: right top, left top;
	padding-right:113px;
	height:100%; margin: 0 auto -4em;
 }
 
* html .inner {height:1%}

Open in new window


and the HTML is:

<div class="outer">
<div class="inner">
</div></div>

Open in new window



Does anyone have an idea on what I should do here?
LVL 7
VallerianiAsked:
Who is Participating?
 
s8webConnect With a Mentor Commented:
If you're interested in another way, you might find this to be an easier method:

<!DOCTYPE html>
<html lang="en">
	<head>
		<style>
			body{text-align:center;background:url(container.jpg) top center fixed no-repeat #000}
			#container{width:980px;margin:0 auto;}
		</style>
		<title>Test</title>
	</head>
	<body>
		<div id="container">

		</div>
	</body>
</html>

Open in new window

background.jpg
0
 
AmickCommented:
First, you are using non-standard CSS for your inner div in lines 13, 14 and 15 by specifying multiple images and attributes.  This may be the source of some problems.

You may want to address that issue and then provide a working sample page. What you've provided is a good start, but it doesn't produce the image you've uploaded and it makes us guess at where we need to fill in the blanks.
0
 
VallerianiAuthor Commented:
Will this work? (Still has the same issue). Split up the right area against the main area.

.outer {
	width:1187px;
	margin-left:auto;
	margin-right:auto;
	border:0;
	background:#000000 url('../images/bg-left.png') repeat-y left top;
	padding-left:109px;
	height:100%;
 }

.innerright {
	background-color: #FFF;
	background-image: url('../images/bg-right.png');
	background-repeat: repeat-y;
	background-position: right top;
	padding-right:113px;
	height:100%; margin: 0 auto -4em;
 }
 
* html .innerright {height:1%}

.innermain {
	background-color: #FFF;
	background-image: url('../images/bg-middle.png');
	background-repeat: no-repeat;
	background-position: left top;
	height:100%; 
 }

Open in new window



			<div class="outer">
				<div class="innerright"><div class="innermain">
                                          </div></div></div>

Open in new window

0
Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

 
VallerianiAuthor Commented:
.outerleft {
	float:left;
	width:109px;
	margin-left:-109px;
	border:0;
	background:#000000 url('../images/bg-left.png') repeat-y left top;
	height:100%;
 }

.outerright {
	float:right;
	width:109px;
	margin-right:-109px;
	border:0;
	background:#000000 url('../images/bg-right.png') repeat-y right top;
	height:100%;
 }
 
.inner {
	margin-left:auto;
	margin-right:auto;
	background:#000000 url('../images/bg-middle.png') no-repeat left top;
	width:1074px;
	height:100%;
 }

Open in new window


Works on one side (The left now) but not the other.
0
 
AmickCommented:
I did this without your backgrounds, but tried to keep your code intact.  Try it and let me know if it addresses your needs. (The PRE section is just filler.)


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<meta name="Author" content="?">
<meta name="Keywords" content="?">
<meta name="Description" content="?">
<style type="text/css">
.outerleft {
      float:left;
      width:8.5%;
      margin-left:-109px;
      border:0;
      background:#000000 url('../images/bg-left.png') repeat-y left top;
      height:100%;
 }

.outerright {
      float:right;
      width:8.5%;
      margin-right:-109px;
      border:0;
      background:#000000 url('../images/bg-right.png') repeat-y right top;
      height:100%;
 }
 
.inner {
      margin-left:auto;
      margin-right:auto;
      background:#000000 url('../images/bg-middle.png') no-repeat left top;
      width:83%;
      height:100%;
 }
</style>
</head>

<body>


                  <div class="outer">
                        <div class="innerright"><div class="inner"><pre>
                        
                        
                        



                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        </pre>
                                          </div></div></div>
</body>
</html>
0
 
VallerianiAuthor Commented:
Hello,

Unfortunately that did not seem to work. The right sidebar doesn't seem to vanish when sizing down the window screen as it should.
0
 
s8webCommented:
Give this a shot:

<!DOCTYPE html>
<html lang="en">
      <head>
            <style>
                  body{text-align:center;}
                  .outer {
                        width:1187px;
                        margin:0 auto;
                        border:0;
                        background:#000000 url('../images/bg-left.png') repeat-y left top;
                        height:100%;
                   }
                  .inner {
                        background-color: #FFF;
                        background-image: url('../images/bg-right.png'), url('../images/bg-middle.png');
                        background-repeat: repeat-y, no-repeat;
                        background-position: right top, left top;
                        height:100%;
                        margin: 0 auto -4em;
                         }
                  * html .inner {height:1%}
            </style>
            <title>Test</title>
      </head>
      <body>
            <div class="outer">
                  <div class="inner">
                  </div>
            </div>
      </body>
</html>

A few notes:

Your container is pretty wide. Users with displays that are smaller are going to have a hard time. Consider 980px including padding as a max. You can do CSS media queries if you want to target different display sizes.

Many browsers (read IE) don't support multiple background images.

In this case, height:100% isn't going to do much.
0
 
VallerianiAuthor Commented:
Ugh, I was over complicating it by far.

This actually worked well, with min-width I can set the minimum size thus removing the side-borders when you shrink it.


I'll have to remember not to get so crazy next time, this worked great.

Your previous example seemed to have an issue, the right sidebar in FF on my end was sticking to the right side, so large monitors would see the right border on that side. But this second example worked great.

Thanks for the size tip, I actually saw that before too and was going to reduce the size to support 1024 monitors as well :)

Thanks!
0
 
s8webCommented:
Cool, my pleasure. Take care.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.