• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 252
  • Last Modified:

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?
0
Valleriani
Asked:
Valleriani
  • 4
  • 3
  • 2
1 Solution
 
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
 
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
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
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
 
s8webCommented:
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
 
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

Featured Post

Vote for the Most Valuable Expert

It’s time to recognize experts that go above and beyond with helpful solutions and engagement on site. Choose from the top experts in the Hall of Fame or on the right rail of your favorite topic page. Look for the blue “Nominate” button on their profile to vote.

  • 4
  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now