previously in <HEAD> it was
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
As you can see issue in screenShots that I have attached below.. there was issue of UI break so then I have updated <HEAD> with following code
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width; initial-scale=0.9; maximum-scale=0.9; minimum-scale=0.9;" />
But Still issue is there
Web page works well with resolution of 1280 X 800 as you can look at this image
these 3 columns (with black vertical line separated) are the <td>
inside that a container with fixed width in px, and I cant change it to % due to some limitations.
only main container have width : 100%,
(Main container: with full page width behind all page content-with white BG)
I have attached screen shots of issues with screen resolution
On 1024 X 768
As you can see On browser with ratio 1024 X 768
"mobile image" is going beyond White box(Main container)
on 1920 X 1080
Here browser ratio is 1920 X 1080 and main container (White box) is 100% of width but those three columns (<TD>) are not, all three width remains same as previous images and main container is 100%
Update: Code link https://jsfiddle.net/p6x6jsgt/3/
The problem is not your meta viewport tag. After having read all the comments here are a couple solutions to your problem:
A non-optimal solution:
Keep the table layout, change to percentage widths and use text blocks with white-space:nowrap; and <br> hard-coded line breaks with different font sizes depending on device screen size.
- About the layout:
Your .preview-panel has a fixed width in rem. To solve this, make the following changes:
.preview-panel {
background-size:100% auto;
width:100%;
}
Now you will notice layout issues with the other td. That's because you have to set them to percentage widths, for example:
.template-editor {
width:100%;
}
.template-editor td {
width:33%;
}
- About the text blocks:
You said setting widths to percentages would mess up your text blocks. Well, unfortunately there's no magical solution for this and all you can do about it (with your current layout) is to add this to whatever text block you put in there:
.foo {
white-space:nowrap;
}
You would also have to fix your line breaks with <br> like so:
Lorem ipsum dolor sit amet,<br>
consectetur adipiscing elit.<br>
Fusce pulvinar aliquet luctus.
You could make the line breaks responsive if you wanted to, with something like (HTML):
<span class="line-break"></span>
(CSS):
.line-break {
display:block;
}
Then you'd have the opportunity to set different font sizes on your media queries, and you could also hide the purposeful line-breaks with display:none;. This is, in my opinion, a better solution than plain old <br>.
With this, your layout should look better in all devices. That being said, this is still a poor solution and an entirely different approach is necessary, in my opinion.
A better solution:
Use flex or maybe just floated items, but not a table when your layout essentially is not a table. You have three panels, why would you forcefully use a table layout for that? Here's an example with flex:
.container {
display:flex;
align-items:stretch;
justify-content:center;
}
.container__panel {
flex-grow:1;
height:600px;
border:1px solid black;
}
<div class="container">
<div class="container__panel"></div>
<div class="container__panel"></div>
<div class="container__panel"></div>
</div>
Disclaimer: the weird container__panel is BEM notation: http://getbem.com/introduction/
Add
td{
width: 33%;
}
For dividing the columns equally ,
Remove width css from the below class so that it can adjust width according to parent class (i have commented the code which i have removed from css)
#cardListHolder {
padding-top: 0.4375rem;
/*width: 21.5625rem;*/
}
.edit-card .inner {
margin: auto;
padding: 0 2.1875rem;
/* width: 18.75rem;*/
}
.preview-panel {
background: rgba(0, 0, 0, 0) url("http://cdnsq.ur-nl.com/assets/mobile-898fc89b167945138c3d9f551a5ce551.png") no-repeat scroll center 0;
height: 26.25rem;
margin: auto;
padding: 3.4375rem 0.8125rem 0;
/* width: 13.3125rem;*/
}
Just try replacing this whole css with your css. I hope this will fix your issue.
*,
*::before,
*::after {
box-sizing: border-box;
}
ul {
list-style: outside none none;
margin: 0;
}
.sectional-content {
background: #f6f6f6;
color: #222;
cursor: auto;
font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
font-style: normal;
font-weight: normal;
line-height: 1.5;
margin: 0;
padding: 0;
position: relative;
}
.wrapper {
min-height: 100%;
position: relative;
}
.centered-container {
margin-left: auto;
margin-right: auto;
width: 96.6667%;
padding-left: 0.3125rem;
padding-right: 0.3125rem;
position: relative;
}
.tabs-content {
background: #fff none repeat scroll 0 0;
border: 1px solid red;
margin-top: -1px;
padding: 1.5625rem;
margin-bottom: 0;
width: 100%;
}
.divider1 {
height: 18px;
}
.template-editor {
background: #fff none repeat scroll 0 0;
border: 0 none;
margin-bottom: 1.25rem;
table-layout: auto;
}
.template-editor tr {
background: transparent none repeat scroll 0 0 !important;
}
td{
width: 33%;
}
.add-remove-template,
.edit-card {
padding-top: 5px !important;
vertical-align: top;
}
.add-remove-template {
border-left: 0 none;
padding-left: 0 !important;
padding-right: 0 !important;
vertical-align: top;
}
table tr th,
table tr td {
color: #222;
font-size: 0.875rem;
padding: 0.5625rem 0.625rem;
text-align: left;
}
#cardListHolder {
padding-top: 0.4375rem;
}
.preview-template,
.edit-card {
border-left: 2px solid #808285;
padding: 0 1.875rem !important;
vertical-align: top;
}
.edit-card .inner {
margin: auto;
padding: 0 2.1875rem;
}
.preview-panel {
background: rgba(0, 0, 0, 0) url("http://cdnsq.ur-nl.com/assets/mobile-898fc89b167945138c3d9f551a5ce551.png") no-repeat scroll center 0;
height: 26.25rem;
margin: auto;
padding: 3.4375rem 0.8125rem 0;
}
I think you want something like this it fits it self in every resolution.
.section {
box-sizing: border-box;
padding: 0 16px;
width: 33%;
float: left;
}
.scroll-container {
height: 360px;
overflow-y: auto;
border-right: 1px solid black;
}
.edit-card {
height: 360px;
border-right: 1px solid black;
}
.preview-panel img {
width: 100%;
max-width: 250px;
}
<div class="content">
<div class="section scroll-container" style="height: 360px">
<ul id="cardListHolder">
<li></li>
</ul>
</div>
<div class="section edit-card">
<p>
edit something
</p>
</div>
<div class="section preview-panel">
<img src="http://cdnsq.ur-nl.com/assets/mobile-898fc89b167945138c3d9f551a5ce551.png"/>
</div>
</div>
May be over-looking here...
Have you tried using media queries to resolve this?
See if this link is any good.
https://developers.google.com/web/fundamentals/design-and-ui/responsive/fundamentals/use-media-queries?hl=en
Of course it would mean alot more coding to get it to work fluently and changes will need to be done.
And have you also used the text-align: center; attribute in your css for the text paragraphs in your columns,rather than "setting it perfectly" to align correctly on all three columns followed of course by removing/setting the white space.
From what i can see, i think this may solve your answer.
Remove the defined width you have given in
#cardListHolder {
padding-top: 0.4375rem;
width: 21.5625rem;
}
and in
.edit-card .inner {
margin: auto;
padding: 0 2.1875rem;
width: 18.75rem;
}
and use
th,td{
width: 33%;
}
<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<style>
*, *::before, *::after {
box-sizing: border-box;
}
ul {
list-style: outside none none;
margin: 0;
}
.sectional-content{
background: #f6f6f6;
color: #222;
cursor: auto;
font-family: "Helvetica Neue",Helvetica,Roboto,Arial,sans-serif;
font-style: normal;
font-weight: normal;
line-height: 1.5;
margin: 0;
padding: 0;
position: relative;
}
.wrapper {
min-height: 100%;
position: relative;
}
.centered-container{
margin-left: auto;
margin-right: auto;
width: 96.6667%;
padding-left: 0.3125rem;
padding-right: 0.3125rem;
position: relative;
}
.tabs-content {
background: #fff none repeat scroll 0 0;
border: 1px solid red;
margin-top: -1px;
padding: 1.5625rem;
margin-bottom: 0;
width: 100%;
}
.divider1{
height: 18px;
}
.template-editor {
background: #fff none repeat scroll 0 0;
border: 0 none;
margin-bottom: 1.25rem;
table-layout: auto;
}
.template-editor tr {
background: transparent none repeat scroll 0 0 !important;
position:relative;
}
.add-remove-template, .edit-card {
padding-top: 5px !important;
vertical-align: top;
}
.add-remove-template {
border-left: 0 none;
padding-left: 0 !important;
padding-right: 0 !important;
vertical-align: top;
}
table tr th, table tr td {
color: #222;
font-size: 0.875rem;
padding: 0.5625rem 0.625rem;
text-align: left;
}
#cardListHolder {
padding-top: 0.4375rem;
}
.preview-template, .edit-card {
border-left: 2px solid #808285;
padding: 0 1.875rem !important;
vertical-align: top;
}
.edit-card .inner {
margin: auto;
padding: 0 2.1875rem;
}
.preview-panel {
background: rgba(0, 0, 0, 0) url("http://cdnsq.ur-nl.com/assets/mobile-898fc89b167945138c3d9f551a5ce551.png") no-repeat scroll center 0;
height: 26.25rem;
margin: auto;
padding: 3.4375rem 0.8125rem 0;
width: 13.3125rem;
}
th,td{
width: 33%;
}
</style>
</head>
<body>
<div class="sectional-content">
<div class="wrapper">
<div class="centered-container">
<div class="tabs-content">
<div class="divider1"></div>
<table class="template-editor" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td class="add-remove-template">
<div class="scroll-container" style="height: 360px">
<ul id="cardListHolder">
<li></li>
</ul>
</div>
</td>
<td class="edit-card">
<div class="inner">
</div>
</td>
<td class="preview-template">
<div class="preview-panel">
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</body>
</html>
Related
For some reason when I put on the id "enterGame" position: absolute div disappears. Even if I add to body or html tag position: relative I still can't see the div.
Relevant code:
html {
height: 100vh;
}
body {
background-image: linear-gradient(lightblue, pink);
margin: 0 auto;
}
* {
font-family: 'Oswald', sans-serif;
letter-spacing: 1vw;
}
h1 {
font-size: 5vw;
text-align: center;
margin: 0 auto;
cursor: default;
}
#enterGame {
height: 50vh;
background-color: white;
border-top: 5px solid black;
border-bottom: 5px solid black;
}
<body>
<h1>Tic Tac Toe</h1>
<div id="enterGame"></div>
<script src="script.js"></script>
</body>
As soon as you add position: absolute it disappears because it doesn't have a width. Try setting width: 100vw and it appears again.
when you add absolute you need to give the div some width
html {
height: 100vh;
}
body {
background-image: linear-gradient(lightblue , pink);
margin: 0 auto;
position:relative;
}
* {
font-family: 'Oswald', sans-serif;
letter-spacing: 1vw;
}
h1 {
font-size: 5vw;
text-align: center;
margin: 0 auto;
cursor: default;
}
#enterGame {
height: 50vh;
width:200px;
background-color: white;
border-top: 5px solid black;
border-bottom: 5px solid black;
position:absolute;
}
<body>
<h1>Tic Tac Toe</h1>
<div id="enterGame"></div>
</body>
You already have the answers, I'll give you the tool to deal with these kinds of problems, know it and you'll be able to solve the problem better yourself in the future, which is the Dev Tool- Inspector.
Now try inspecting the DOM, as you can see in the image below with the inspector (F12/Ctrl+Shift+I on Windows/Linux), it shows that the element #enterGame has the size of 0x173.846, then => either its height or width is 0.
If you ain't already know which number is width, which is height then you can try inspecting the neighbor h1, you'll see that it's 375x21, so it's obvious that 375 is the width, then => the #endterGame disappears is because it doesn't have the width. Now try adding width: 100% (like the answers above said) will solve the problem.
html {
height: 100vh;
}
body {
background-image: linear-gradient(lightblue , pink);
margin: 0 auto;
}
* {
font-family: 'Oswald', sans-serif;
letter-spacing: 1vw;
}
h1 {
font-size: 5vw;
text-align: center;
margin: 0 auto;
cursor: default;
}
#enterGame {
height: 50vh;
background-color: white;
border-top: 5px solid black;
border-bottom: 5px solid black;
position: absolute;
width: 100%;
}
<body>
<h1>Tic Tac Toe</h1>
<div id="enterGame"></div>
</body>
tl;dr - How can I center the blue div found in the third image in the white space, not the page?
I've been experiencing quite the headache recently. I've created a website with two distinct columns, but, is achieved with only one div element. This can be seen below.
It's pretty obvious from the picture that the first column is to be regarded as a sidebar, and hence, has the class .sidebar. .sidebar has a fixed width property of 400px. The rest of the page is simply the rest of the div with the class .container, which extends to 100% on both its width and height
properties. As I would image this is hard to image from just reading this text, I've found a way to illustrate how the page is setup.
Gray is the html element.
White is the body element.
The aqua on white is the div with the class .container.
The following aqua is the div with the class .sidebar.
Let's now insert the div that's giving me issues.
As you can see, a single blue div has been added. This has the class .test, and which simply sets the width, height, and margin properties. As you can now see, when the margin is set to 0 auto, the div is centered to the window and not the white space. Obviously this is the expected action.
The issue I'm facing is that I have no idea how I can center the blue div in the white space. I'm not sure how I would create anything the exact width of the white space, and hence, don't know how margin: 0 auto would be any use. How would I center my test element in the white space? Can this be achieved through CSS and HTML?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Welcome.</title>
<link href='https://fonts.googleapis.com/css?family=Open+Sans:300|Raleway' rel='stylesheet' type='text/css'>
<link href="https://www.codekaufman.com/assets/css/core.css" rel="stylesheet" type="text/css" />
<link href="https://www.codekaufman.com/assets/css/alerts.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="banner-alert">Please excuse the mess. I'm currently working to improve the site. Thanks.
</div>
<div class="container">
<div class="side-bar">
<div class="temp-logo"></div>
<ul class="nav">
<li class="nav-button-disabled">About</li>
<li class="nav-button-disabled">GitHub</li>
<li class="nav-button-disabled">Contact</li>
</ul>
<div class="emphasis-button-disabled">Support</div>
<div class="legal">Copyright © 2015 Jeffrey Kaufman. All Rights Reserved.</div>
</div>
<div class="test"></div>
</div>
</body>
</html>
#charset "utf-8";
* {
margin: 0;
padding: 0;
font-family: "Raleway", sans-serif;
color: #000;
}
html, body {
width: 100%;
height: 100%;
}
a {
text-decoration: none;
color: inherit;
}
.container {
height: 100%;
}
.side-bar {
position: fixed;
top: 0;
left: 0;
width: 400px;
height: 100%;
background: #EEE;
}
.temp-logo {
width: 200px;
height: 200px;
margin: 0 auto;
margin-top: 150px;
background: #000;
}
.nav {
width: 200px;
margin: 0 auto;
margin-top: 75px;
list-style-type: none;
}
.nav-button {
margin-top: 20px;
margin-bottom: 20px;
font-size: 1.6em;
cursor: pointer;
transition: 0.5s;
}
.nav-button:hover {
margin-left: 20px;
}
.nav-button-disabled {
margin-top: 20px;
margin-bottom: 20px;
font-size: 1.6em;
cursor: default;
color: #AAA;
}
.nav-category {
margin-top: 40px;
margin-bottom: 20px;
font-size: 2em;
cursor: default;
border-bottom: 1px #000 solid;
}
.emphasis-button {
text-align: center;
position: absolute;
width: 120px;
height: 45px;
left: 138px;
line-height: 45px;
bottom: 70px;
border-radius: 5px;
border: 1px solid #C30;
color: #C30;
transition: 0.4s;
cursor: pointer;
}
.emphasis-button-enabled {
text-align: center;
position: absolute;
width: 120px;
height: 45px;
left: 138px;
line-height: 45px;
bottom: 70px;
border-radius: 5px;
border: 1px solid #C30;
transition: 0.4s;
cursor: pointer;
color: #EEE;
background: #C30;
}
.emphasis-button-disabled {
text-align: center;
position: absolute;
width: 120px;
height: 45px;
line-height: 45px;
left: 138px;
bottom: 70px;
border-radius: 5px;
border: 1px solid #AAA;
color: #AAA;
cursor: default;
}
.emphasis-button:hover {
color: #EEE;
background: #C30;
}
.legal {
font-family: 'Open Sans', sans-serif;
position: absolute;
font-size: 0.85em;
text-align: center;
width: 400px;
height: 20px;
left: 0;
bottom: 20px;
}
.test {
width: 600px;
height: 200%;
background: blue;
margin: 0 auto;
}
Wrap it in another element with position=absolute, a right, top and bottom value of 0 and a left value of 400px:
<div style="position:absolute;right:0;top:0;bottom:0;left:400px;">
<div class="test"></div>
</div>
Your side bar already have position fixed, so please add padding left to your container it will work
.container {
height: 100%;
padding-left: 400px; /*width of your .sidebar*/
}
try changing the width for a percentage and adding a new div that covers the rest of the white space so you can center the blue element on that new div.
.side-bar {
position: fixed;
top: 0;
left: 0;
width: 20%;
height: 100%;
background: #EEE;
}
.new-div{width:80%;float:left;}
Set the test inside the new div
<div class="new-div"><div class="test"></div></div>
if you go and reduce the width of the window to view the screen as if it were a mobile device you can see that the orange "badges" may not be entered (especially when only one badge fits per line) I want it to fit more badges in if possible whilst always keeping the badge, or group of badges on that line entered horizontally. The class is badge that isn't being centered Thank you in advance!! :)
jsfiddle: http://jsfiddle.net/avg24wrk/
This is the HTML
<div class="container">
<div class="sidebar">
<div class="sidebar-inner">
<p class="badge"><span class="vertical-align">Book a Free Consultation!</span></p>
<p class="badge"><span class="vertical-align">Second Point</span></p>
<p class="badge"><span class="vertical-align">Third Point</span></p>
</div>
</div>
and this is the CSS
* {
border: 0;
margin: 0;
padding: 0;
}
.sidebar {
float: left;
width: 25%;
color: #505050;
}
.sidebar-inner {
margin: 0 30px 0 35px;
}
.badge {
margin: 10px auto;
font-size: 24px;
text-align: center;
border-radius: 7px;
padding: 20px 20px;
background-color: #ed9727;
cursor: pointer;
}
#media screen and (max-width: 490px) {
.sidebar {
width: 100%;
}
.sidebar-inner {
padding-bottom: 20px;
border-bottom: 2px solid #505050;
margin: 0 30px;
overflow: hidden;
}
.badge {
float: left;
margin: 15px 10px;
max-width: 150px;
min-height: 50px;
display: table;
}
}
have you tried adding text-align: center; to class you want to center
since i you didn't mention which class you want to center so i will give you a simple rule try this
please mention class you want to center
How can I get rid of the excess space on the right side of the browser window?
In the picture below, Firebug has highlighted my #menuDiv div and the white portion on the right is not part of the border for that element. So where is it coming from? Perhaps the body?
When I look at the body element the same way, Firebug shows that it does indeed compass the extra space on the right. But it also shows that body has margins and padding of 0! What's going on here? And how can I fix it so that the page is centered?
(Btw, there is some empty space at the top because I've set body's height to 98% of the html for height sizing reasons.)
Demo
http://tuningcode.com/practice/2014-4-24-01.html.
Code
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Math Browser</title>
<style>
html {
font-family: "Cambria", "Arial", "Helvetica", sans-serif;
}
html, body {
height: 100%;
}
body {
height: 98%;
}
* {
padding: 0;
margin: 0;
}
.info-pane .section p {
margin-top: 1em;
margin-bottom: 1em;
}
div {
padding: 5px;
outline: none;
}
#browserDiv, #infoDiv {
overflow: auto;
max-height: 600px;
}
#browserDiv, #infoDiv {
float: left;
margin: 1%;
height: 85%;
}
#browserDiv {
width: 46%;
border: 1px solid black;
}
#infoDiv {
width: 46%;
border: 1px solid #47d;
}
#menuDiv {
width: 95%;
border: 1px solid goldenrod;
height: 25px;
margin: 1%;
text-align: center;
}
#menuDiv h2.innerDiv {
display: inline-block;
vertical-align: middle;
}
</style>
</head>
<body>
<div id="menuDiv"><h2 class="innerDiv">Math Browser</h2></div>
<div id="browserDiv"></div>
<div id="infoDiv"></div>
</body>
</html>
in css, width by default does not include padding or border, so two divs with width 48% and 1% margin will fit the width of their parent. the moment you add any padding or border, the combined width of your inner divs will be greater than 100%.
You can do two things:
1) set the box-sizing property of css, keeping in mind that there are some compatibility issues
#browserDiv, #infoDiv {
box-sixing: border-box;
}
2) set the width/margin of a wrapper div, and use an inner div to set the padding/border.
<div class="wrapper"><div id="browserDiv"></div></div>
<div class="wrapper"><div id="infoDiv"></div></div>
.wrapper {
width: 48%;
margin: 0 1%;
}
#browserDiv, #infoDiv {
padding: 5px;
}
#browserDiv {
border: 1px solid blue;
}
#infoDiv {
border: 1px solid red;
}
I'm a bit of a dinosaur, so I tend to use the latter.
I pasted your sample into JSFiddle. It looks like at least part of the problem is this:
#menuDiv {
width: 95%;
border: 1px solid goldenrod;
height: 25px;
margin: 1%;
text-align: center;
}
The width: 95%; isn't working out quite right. Simply removing this seemed to do the trick.
your culprit:
#menuDiv {
width: 95%;
}
using display:block magic (default for all <div>'s), you don't need to set width to get full width
I've been playing with this code for almost half of the day and I finally decided to pass it on to you. I would like to place three div elements next to each other with the left and right ones surrounding the main one. I would like both of the outer divs to contain only a background image and hence take on the same height as the middle div. I've been playing with solutions from other posts like this, but all of my tries were unsuccessful.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
<head>
</head>
<body>
<div id="container">
<div id="left"></div>
<div id="content">
<p> Lorem ipsum dolor<br/><br/>sit amet<br/><br/>consectetur adipiscing elit</p>
</div>
<div id="right"></div>
</div>
</body>
CSS:
body {
text-align: center;
}
div#container {
width: 954px;
margin: 0px auto;
height: 100%;
border: 1px solid lime;
overflow: hidden;
position: relative;
}
div#left {
margin: 0px auto;
width: 5px;
border: 1px solid red;
float: left;
display: block;
}
div#right {
margin: 0px auto;
width: 5px;
float: left;
border: 1px solid blue;
}
div#content {
width: 920px;
margin: 0px auto;
text-align: left;
background: #ffffff;
padding: 0px 10px;
float: left;
}
p {
font: normal 16px/18px 'Trebuchet MS', Helvetica, sans-serif;
margin: 20px 0px;
}
Thanks in advance for your help.
You'll need to add height: 100% to your body and html tags, as well as your div classes:
html {
height: 100%; /* <------------ */
}
body {
text-align: center;
height: 100%; /* <------------ */
}
div#container {
width: 954px;
margin: 0px auto;
height: 100%;
border: 1px solid lime;
overflow: hidden;
position: relative;
}
div#left {
margin: 0px auto;
width: 5px;
border: 1px solid red;
float: left;
display: block;
height: 100%; /* <------------ */
}
div#right {
margin: 0px auto;
width: 5px;
float: left;
border: 1px solid blue;
height: 100%; /* <------------ */
}
div#content {
width: 920px;
margin: 0px auto;
text-align: left;
background: #ffffff;
padding: 0px 10px;
float: left;
height: 100%; /* <------------ */
}
I know this doesn't really answer your question, but I tend to prefer a method that uses position:relative on the parent and position:absolute on the capping elements. This guarantees that a dynamically changing box will not throw off your layout. I also like to use the :before :after attributes (IE 8+) because of semantic reasons, but you can use child elements instead. Works just as fine. I also threw in box-sizing (FF needs -moz syntax) so the borders don't look fugly. (probably not necessary in a production setting as your would be using a background instead).
And now, the code!
CSS
div#container:before {
content:"";
width: 5px;
border: 1px solid red;
display: block;
position:absolute;
height:100%;
left:0px;
top:0px;
box-sizing:border-box; /* careful... FF needs -moz if you need that compatibility */
}
div#container:after {
content:"";
width: 5px;
border: 1px solid blue;
display: block;
position:absolute;
height:100%;
right:0px;
top:0px;
box-sizing:border-box;
}
HTML
<div id="container">
<div id="content">
<p> Lorem ipsum dolor<br/><br/>sit amet<br/><br/>consectetur adipiscing elit</p>
</div>
</div>
DEMO
http://jsfiddle.net/f7yL6/ http://jsfiddle.net/f7yL6/show
Media queries can be used to achieve most of what % offers without any of the pain. It's not as smooth but when used for intro banners it is perfectly acceptable.
Using mobile declarations first you would use something like this.
.banner { height: 200px; }
#media all and (min-width: 500px) {
.banner { height: 400px; }
}
#media all and (min-width: 1000px) {
.banner { height: 500px; }
}
Edit: I used min-width but min-height can also be used. To really get things to look good on all sort of devices, a mix of min-width and min-height would need to be used.