Solved

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

Posted on 2012-03-17
9
220 Views
Last Modified: 2012-03-18
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
Comment
Question by:Valleriani
  • 4
  • 3
  • 2
9 Comments
 
LVL 12

Expert Comment

by:Amick
ID: 37733050
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
 
LVL 7

Author Comment

by:Valleriani
ID: 37733163
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
 
LVL 7

Author Comment

by:Valleriani
ID: 37733375
.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
 
LVL 12

Expert Comment

by:Amick
ID: 37733517
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
Free Trending Threat Insights Every Day

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

 
LVL 7

Author Comment

by:Valleriani
ID: 37733722
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
 
LVL 16

Expert Comment

by:s8web
ID: 37734642
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
 
LVL 16

Accepted Solution

by:
s8web earned 500 total points
ID: 37734651
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
 
LVL 7

Author Closing Comment

by:Valleriani
ID: 37734665
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
 
LVL 16

Expert Comment

by:s8web
ID: 37734683
Cool, my pleasure. Take care.
0

Featured Post

6 Surprising Benefits of Threat Intelligence

All sorts of threat intelligence is available on the web. Intelligence you can learn from, and use to anticipate and prepare for future attacks.

Join & Write a Comment

Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

747 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

8 Experts available now in Live!

Get 1:1 Help Now