Forum Moderators: not2easy
I have a problem on the following page:
<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" />
<title>help..</title>
<style type="text/css">
/* for all browsers that understand min-width */
.container {position:relative; width:100%; min-width:600px;}
.holder {display:block; color:#000;background:yellow;}
/* method 1 a bodge for IE5.5 and IE6 browsers */
* html .container {border-right:600px solid #FFF;}
* html .holder {display:inline-block; position:relative; margin-right:-600px;}
/* for all browsers that understand min-width */
.container2 {position:relative; width:100%;}
.holder2 {display:block; color:#000;}
/* method 1 a bodge for IE5.5 and IE6 browsers */
* html .container2 {border-right:790px solid #FFF;}
* html .holder2 {display:inline-block; position:relative; margin-right:-790px;}
body{background:grey;}
#wrapper{overflow: hidden;border:3px solid orange;min-width:790px;}
#block_1, #block_2{padding-bottom: 32767px;margin-bottom: -32767px;}
#block_1{float: left;width: 190px;background:red;}
#block_2{float: left;width: 60%;background:blue;}
</style>
</head>
<body>
<div id="wrapper">
<div class="container2">
<div class="holder2">
<div id="block_1">
<p>o. Vivamus sed ipsum vitae neque lobortis hendrerit</p>
</div>
<div id="block_2">
<div class="container">
<div class="holder">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur porta aliquet justo. Morbi neque eros, convallis ac, fermentum a, imperdiet pretium, ante. Sed arcu diam, varius ac, suscipit nec, lacinia sit amet, dui. Donec iaculis, enim et suscipit dapibus, neque diam ultrices leo, at interdum urna pede eu libero. Vivamus sed ipsum vitae neque lobortis hendreritLorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur porta aliquet justo. Morbi neque eros, convallis ac, fermentum a, imperdiet pretium, ante. Sed arcu diam, varius ac, suscipit nec, lacinia sit amet, dui. Donec iaculis, enim et suscipit dapibus, neque diam ultrices leo, at interdum urna pede eu libero. Vivamus sed ipsum vitae neque lobortis hendrerit</p>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
The #wrapper (with the orange border) takes up its default 100% width on the page, however i need to get around this. I am using the IE6 hack to get a real min-width attribute with the border/-margin settings. In IE6 this border shows up in the #wrapper space on the right hand side (currently white). I need to have a background image on the body of the site which means i cant have this block of "border" showing.
Is there a way i can shrink my wrapper size to it's contents? This layout was a little quirky at the start just trying to get both 100% height columns and the fluid layout with the spacing/min-width ive setup.
Thanks for your help,
Sean
unfortunately, there is more than one problem with that page. It only looks like you are describing in IE when it is in Quirks Mode. the <xml prolog>,
<?xml version="1.0" encoding="UTF-8"?>I don't know if you've read this, Problems with One True Layout, equal height columns [positioniseverything.net] but it might have a bearing on you finding another method of doing this?
if the columns are fixed width would 'faux columns' be easier to implement?
also another small quirk, I noticed, nothing to do with your question either ;)
body{background:grey;} body { background: gr[b]a[/b]y;} anyhow that white is being generated by your border trick, if IE supported
border-color: transparentIf you can produce some code, even if it only works in FF, which shows what you would like to achieve, perhaps we can help suggest other x-browser methods for your layout..
I wouldn't recommend forcing IE7 into quirks mode to achieve any technique, you will lose it's better CSS compatibility and might always be fighting the rest of the bugs this technique can exhibit.
Suzy
[edited by: SuzyUK at 5:10 pm (utc) on May 29, 2007]
