IE float:right issue - can't find a fix :(

scampsall · January 17, 2011, 12:15pm

Hi all,

I’m using a three column layout that is created by nesting three divs (leftcolumn, right column, centre) in a container div. The left/right columns only provide a decorative border using a background image, but in IE the right column disappears - presumably floating right off into the ether. Any ideas on how to bring it back?

CSS


#container {
	height:100%;
	height:auto;
	min-height:457px;
	min-width:775px;
	width:100%;
	margin:0px;
	overflow:hidden; /*stop floats floating off - maybe?..*/
	position:relative; /*prevent overflow bug*/
}		
#leftcolumn {
	float:left;
	display:inline; /*fix double margins in IE*/
	width:100%;
	min-height:457px;
	background:url('../images/leftcolumn.png');
	background-repeat:repeat-y;
}
#rightcolumn {
	float:right;
	
	display:inline; /*fix double margins in IE*/
	margin-left:78px;
	width:100%;
	min-height:457px;
	background:url('../images/rightcolumn.png');
	background-repeat:repeat-y;
	background-position:right;
	position:relative; /*fix double margins in IE*/
}
#center {
	float:left;
	display:inline; /*fix double margins in IE*/
	margin-right:78px;
	margin-left:78px;
	padding:15px;
	width:100%;
	min-width:619px;
	font-family:Arial, Helvetica, sans-serif;
	font-size:medium;
	font-style:normal;
	color:#603913;
}

HTML (it’s pretty simple!)


<div id="container">
		<div id="leftcolumn">
		<div id="rightcolumn">
		<div id="center">
</div>
</div>
</div>
</div>

and a link (excuse the gibbering text - it was in celebration at fixing my last problem!):
http://samcampsall.chrisfulton.co.uk/JoeSingh/index2.html

I’ve tried all sorts of recommendations to sort this out but I’m really fumbling in the dark as this is my first build, so, any help would be great! Thanks in advance

Erik_J · January 17, 2011, 1:22pm

I don’t think you need to float the containers using the posted column-bg method.

E.g.:

#container {
/*	min-width:775px; */
}
#leftcolumn {
	background:url('../images/leftcolumn.png') repeat-y left top;
}
#rightcolumn {
	margin-left:78px;
	background:url('../images/rightcolumn.png') repeat-y right top;
}
#center {
	margin-right:78px;
	padding:15px;
	min-width:619px;
	min-height:457px;
	font-family:Arial, Helvetica, sans-serif;
	font-size:medium;
	font-style:normal;
	color:#603913;
}

CSU_Bill · January 17, 2011, 1:51pm

With that HTML code, you have the container wrapped around the leftcolumn wrapped around the rightcolumn wrapped around the center column.

Try putting your div statements like this:


<div id="container">
		<div id="leftcolumn">
                 </div>
		<div id="center">
                </div>
		<div id="rightcolumn">
                </div>
</div>

I also changed the order of the div statements to put the code for the columns in a natural flow of left to right.

PaulOB · January 17, 2011, 2:32pm

I’d do what Erik said above and also do way with the container div as you don’t seem to be using it for anything important. I would also change the name of those other divs because they aren’t really left or right elements.

e.g.


#container {
    width:100%;
    background:url('http://samcampsall.chrisfulton.co.uk/JoeSingh/leftcolumn.png') repeat-y;
}
#inner {
    width:100%;
    background:url('http://samcampsall.chrisfulton.co.uk/JoeSingh/rightcolumn.png') repeat-y right 50%;
}
#main {
    text-align:left;
    font-family:Arial, Helvetica, sans-serif;
    font-size:medium;
    font-style:normal;
    color:#603913;
    padding:0 93px;
    min-width:589px;
    min-height:457px;
}


<div id="container">
    <div id="inner">
        <div id="main">
            <p>Text</p>

Full code:


<!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" dir="ltr" lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Joseph Peter Singh - Portrait and Wedding Photography</title>
<link rel="stylesheet" href="testcss2.css" type="text/css" media="screen" />
<style type="text/css">
body {
    margin: 0;
    padding: 0;
}
.banner {
    width: 100%;
    min-width:800px;
}
#header {
    width:100%;
    height:auto;
    margin:0px;
}


#container {
    width:100%;
    background:url('http://samcampsall.chrisfulton.co.uk/JoeSingh/leftcolumn.png') repeat-y;
}
#inner {
    width:100%;
    background:url('http://samcampsall.chrisfulton.co.uk/JoeSingh/rightcolumn.png') repeat-y right 50%;
}
#main {
    text-align:left;
    font-family:Arial, Helvetica, sans-serif;
    font-size:medium;
    font-style:normal;
    color:#603913;
    padding:0 93px;
    min-width:589px;
    min-height:457px;
}


#footer {
    bottom:0px;
    width:100%;
    height:auto;
    margin:0px;
    clear:both;
}
.imageSlideshowHolder {
    margin:5px;  /* "Air" */
    width:151px;  /* Image width */
    height:100px;  /* Image height */
    position:relative;  /* Don't remove this line */
}
.imageSlideshowHolder img {
    position:absolute;
    left:0px;
    top:0px;
}
</style>
</head>
<body>
<div id="header"><img class="banner" src="http://samcampsall.chrisfulton.co.uk/JoeSingh/header.png"/><img class="banner" src="http://samcampsall.chrisfulton.co.uk/JoeSingh/menubar.png"/></div>
<div id="container">
    <div id="inner">
        <div id="main">
            <p>This is Lorem ipsum text This is Lorem ipsum textThis is Lorem ipsum textThis is Lorem ipsum textThis is Lorem ipsum textThis is Lorem ipsum textThis is Lorem ipsum textThis is Lorem ipsum textThis is Lorem ipsum textThis is Lorem ipsum textThis is Lorem ipsum textThis is Lorem ipsum textThis is Lorem ipsum textThis is Lorem ipsum textThis is Lorem ipsum textThis is Lorem ipsum textThis is Lorem ipsum textThis is Lorem ipsum textThis is Lorem ipsum textThis is Lorem ipsum textThis is Lorem ipsum textThis is Lorem ipsum textThis is Lorem ipsum textThis is Lorem ipsum text</p>
            <p>This is Lorem ipsum text This is Lorem ipsum textThis is Lorem ipsum textThis is Lorem ipsum textThis is Lorem ipsum textThis is Lorem ipsum textThis is Lorem ipsum textThis is Lorem ipsum textThis is Lorem ipsum textThis is Lorem ipsum textThis is Lorem ipsum textThis is Lorem ipsum textThis is Lorem ipsum textThis is Lorem ipsum textThis is Lorem ipsum textThis is Lorem ipsum textThis is Lorem ipsum textThis is Lorem ipsum textThis is Lorem ipsum textThis is Lorem ipsum textThis is Lorem ipsum textThis is Lorem ipsum textThis is Lorem ipsum textThis is Lorem ipsum text</p>
            <p>This is Lorem ipsum text This is Lorem ipsum textThis is Lorem ipsum textThis is Lorem ipsum textThis is Lorem ipsum textThis is Lorem ipsum textThis is Lorem ipsum textThis is Lorem ipsum textThis is Lorem ipsum textThis is Lorem ipsum textThis is Lorem ipsum textThis is Lorem ipsum textThis is Lorem ipsum textThis is Lorem ipsum textThis is Lorem ipsum textThis is Lorem ipsum textThis is Lorem ipsum textThis is Lorem ipsum textThis is Lorem ipsum textThis is Lorem ipsum textThis is Lorem ipsum textThis is Lorem ipsum textThis is Lorem ipsum textThis is Lorem ipsum text</p>
            <p>This is Lorem ipsum text This is Lorem ipsum textThis is Lorem ipsum textThis is Lorem ipsum textThis is Lorem ipsum textThis is Lorem ipsum textThis is Lorem ipsum textThis is Lorem ipsum textThis is Lorem ipsum textThis is Lorem ipsum textThis is Lorem ipsum textThis is Lorem ipsum textThis is Lorem ipsum textThis is Lorem ipsum textThis is Lorem ipsum textThis is Lorem ipsum textThis is Lorem ipsum textThis is Lorem ipsum textThis is Lorem ipsum textThis is Lorem ipsum textThis is Lorem ipsum textThis is Lorem ipsum textThis is Lorem ipsum textThis is Lorem ipsum text</p>
            <p>This is Lorem ipsum text This is Lorem ipsum textThis is Lorem ipsum textThis is Lorem ipsum textThis is Lorem ipsum textThis is Lorem ipsum textThis is Lorem ipsum textThis is Lorem ipsum textThis is Lorem ipsum textThis is Lorem ipsum textThis is Lorem ipsum textThis is Lorem ipsum textThis is Lorem ipsum textThis is Lorem ipsum textThis is Lorem ipsum textThis is Lorem ipsum textThis is Lorem ipsum textThis is Lorem ipsum textThis is Lorem ipsum textThis is Lorem ipsum textThis is Lorem ipsum textThis is Lorem ipsum textThis is Lorem ipsum textThis is Lorem ipsum text</p>
        </div>
    </div>
</div>
<div id="footer"><img class="banner" src="http://samcampsall.chrisfulton.co.uk/JoeSingh/contactfooter.png"/></div>
</body>
</html>

Note that you have a BOM (byte order mark) saved in your css file:


[B]ï»¿[/B]body {
    margin: 0;
    padding: 0;
}

That could upset some browsers and indeed does break firefox when viewed locally. Set you editor not to output the BOM for css files.

Erik_J · January 17, 2011, 2:40pm

Was AFK, sorry.

Should have mentioned that IE6 doesn’t know min-width or min-height and given a work around.

Taking Paul’s code as example. A work around for this could be to place a width keeper in the center/main div and set a height for IE6 only that will work the same as min-height in IE6 if the overflow is not set or set to visible.
E.g.:


#ie6minwidth{
	width:589px; /* margin/padding also counts */
	height:0;
	overflow:hidden; /* = IE6 keeps the height as set */
}
* html #main{
	height:457px;
	overflow:visible; /* = in IE6 content will expand the set height */
}

<div id="container">
	<div id="inner">
		<div id="main">
		[COLOR="Red"]<div id="ie6minwidth"></div>[/COLOR]</div>
	</div>
</div>

scampsall · January 17, 2011, 4:14pm

First thanks all for your replies
CSU-Bill - I’m not sure that would fix my issue and it would undo the stretching of my ‘borders’ down each side of the page, but thank you!

Erik and Paul - Thanks a bunch for your suggestions -I’ve implemented most of them and they have certainly lightened my CSS markup (most of which had been thrown in trying to make the stretchy borders).

This is what I’ve got now:
CSS


body {
    margin: 0;
    padding: 0;
}
.banner {
    width: 100%;
    min-width:775px;
}
#header {
	width:100%;
	height:auto;
	margin:0px;
}

#ie6minwidth{
	width:589px; /* margin/padding also counts */
	height:0;
	overflow:hidden; /* = IE6 keeps the height as set */
}
* html #center{
	height:457px;
	overflow:visible; /* = in IE6 content will expand the set height */
}

#leftcolumn{
    width:100%;
    background:url url('../images/leftcolumn.png') repeat-y;
}
#rightcolumn {
    width:100%;
    background:url url('../images/rightcolumn.png') repeat-y right 50%;
}
#center {
    text-align:left;
    font-family:Arial, Helvetica, sans-serif;
    font-size:medium;
    font-style:normal;
    color:#603913;
    padding:0 93px;
    min-width:589px;
    min-height:457px;
}

#footer {
	bottom:0px;
	width:100%;
	margin:0px;
    height: auto;
    clear:both;
}

With the HTML thus (Paul - I’ve chucked the ‘Container’ DIV - it was a relic of the past few weeks on and off tinkering. I’ve kept the names so I didn’t get too confused):


<div id="leftcolumn">
<div id="rightcolumn">
<div id="center">
<div id="ie6minwidth">

(Content goes here, right?!)

</div>
</div>
</div>
</div>

It looks good in FF, Chrome and Opera but in IE the right column image is floating off to the right of the page and I have to scroll over to find it, which is definitely a step up from it not existing at all!
I really appreciate your time and your thoughts, but have I not implemented or understood your suggestions properly?
Thanks for any further pointers

Erik_J · January 17, 2011, 4:58pm

No! The ie6minwidth div should be empty! Content goes here:


<div id="leftcolumn">
<div id="rightcolumn">
<div id="center">

(Content goes here!)

<div id="ie6minwidth"></div>
</div>
</div>
</div>

scampsall · January 17, 2011, 6:38pm

Thanks Erik, I did wonder! It hasn’t fixed the problem tho

team1504 · January 17, 2011, 6:50pm

As I was reading this. I think that, if possible, a live example of the page would be best.
Are you sure the content is not in the #ieminwidth div?

PaulOB · January 17, 2011, 6:55pm

It works for me using the code above.


<!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" dir="ltr" lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Joseph Peter Singh - Portrait and Wedding Photography</title>
<link rel="stylesheet" href="testcss2.css" type="text/css" media="screen" />
<style>
body {
    margin: 0;
    padding: 0;
}
.banner {
    width: 100%;
    min-width:775px;
}
#header {
    width:100%;
    margin:0;
}
#ie6minwidth {
    width:589px; /* margin/padding also counts */
    height:0;
    overflow:hidden; /* = IE6 keeps the height as set */
}
* html #center {
    height:457px;
    overflow:visible; /* = in IE6 content will expand the set height */
}
#leftcolumn {
    width:100%;
    background: url('http://samcampsall.chrisfulton.co.uk/JoeSingh/leftcolumn.png') repeat-y;
    min-width:589px;
}
#rightcolumn {
    width:100%;
    background:url('http://samcampsall.chrisfulton.co.uk/JoeSingh/rightcolumn.png') repeat-y right 50%;
    min-width:589px;
}
#center {
    text-align:left;
    font-family:Arial, Helvetica, sans-serif;
    font-size:medium;
    font-style:normal;
    color:#603913;
    padding:0 93px;
    min-width:589px;
    min-height:457px;
}
#footer {
    bottom:0px;
    width:100%;
    margin:0px;
    height: auto;
    clear:both;
}
</style>
</head>
<body>
<div id="header"> <img class="banner" src="http://samcampsall.chrisfulton.co.uk/JoeSingh/header.png"/> <img class="banner" src="http://samcampsall.chrisfulton.co.uk/JoeSingh/menubar.png"/> </div>
<div id="leftcolumn">
    <div id="rightcolumn">
        <div id="center">
        <div id="ie6minwidth"></div>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
        </div>
    </div>
</div>
<div id="footer"> <img class="banner" src="http://samcampsall.chrisfulton.co.uk/JoeSingh/contactfooter.png"/> </div>
</body>
</html>

I wouldn’t actually bother with the ie6 minwidth div though as it doesn’t really create a min-width but just holds the middle open. All the content inside the middle will still shrink down and so will the header and footer leaving everything adrift.

If you really want minwidth in ie6 then steal the Js routine from here and apply it to the main wrapper.

Erik_J · January 17, 2011, 7:15pm

Sorry for my above non working IE6 min-width work around.

I have only access to FF3.6 for the time being, therefore again not tested, but this time I give a work around that definitely will work!

In this demo from your last posted code above I have removed the unnecessary css and html and commented the IE6 min-width workaround that works:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
body {
	margin:0;
	padding:0;
}
.banner {
	width:100%;
	min-width:775px;
}
#header {
}
#leftcolumn{
	min-width:775px;
	background:url('../images/leftcolumn.png') repeat-y;
}
#center {
	font-family:Arial, Helvetica, sans-serif;
	color:#603913;
	padding:0 93px;
	min-width:589px;
	min-height:457px;
	background:url('../images/rightcolumn.png') repeat-y right;
}
/*** workarounds for IE6 min-width and min-height ***/
* html #rightcolumn {
	margin-left:775px; /*** IE min-width work around ***/
	display:inline-block; /*** trip hasLayout in IE to make "IE min-width" work ***/
}
* html #center{
	margin-left:-775px; /*** IE min-width work around ***/
	position:relative; /*** for IE to make "IE min-width" work ***/
	display:inline-block; /*** trip hasLayout in IE to make "IE min-width" work ***/
	height:457px; /* min-height in IE6 when overflow is the default (visible) */
	overflow:visible; /* necessary only if set otherwise for good browsers */
}
#footer {
}
</style>
</head><body>

<div id="leftcolumn">
	<div id="rightcolumn">
		<div id="center">

		(Content goes here!) (Content goes here!) (Content goes here!) (Content goes here!) (Content goes here!) (Content goes here!) (Content goes here!) (Content goes here!) (Content goes here!)
		<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>(Content goes here!)

		</div>
	</div>
</div>

</body></html>

In your case this solution has no extra html! Sort of, otherwise it could have been a div less.

PaulOB · January 17, 2011, 8:06pm

Yes, that should work

scampsall · January 18, 2011, 5:03pm

Hi Paul and Erik!

I’ve got it working now using your (numerous and somewhat humbling!) alterations to my (crippled and clearly rubbish!) code.

Thank you both so so much!

I’l try and post a link later on. As you can probably tell I’m very new at this, so a feel a bit of a cheat that you’ve essentially re-written all my code! It’s quite a learning curve as to just how broken IE is though, I’m kindof amazed.

One last question (for this thread at least) - with my IE stylesheet as it is if I shrink the browser window the header shrinks right along with it (the main div stops at 775px ;)).
How should I make the header stop there too? I thought that adding the IE min width div inside the header div would work, but it doesn’t

scampsall · January 18, 2011, 5:54pm

This is stupid but I’ve actually answered my own question already!
I know it looks very soon after my post, but I actually typed up my last message, didn’t post it, then spent ages looking for a fix, didn’t find one, posted the message and then found the fix!

OK - so using this method
http://www.cssplay.co.uk/boxes/width2.html c/o Stu Nicholls.
I’ve implemented a slightly different min-width fix. It uses a tad more markup (adding phantom div’s) but I’m happier with the results. Using the initial fix from Erik my content was still getting squished, whereas this prevents that. I can’t say I’m entirely sure why!

This is my IE stylesheet as of right now:


body {
    margin: 0;
    padding: 0;
}
.banner {
    width: 100%;
    min-width:775px;
}
* html #header {
	overflow:visible;
}
#header {
    width:100%;
    margin:0px;
    height:auto;
}
* html #minwidth {
	border-left:775px solid #fff; 
	position:relative; 
	float:left; 
	z-index:1;
}
* html #container {
	margin-left:-775px; 
	position:relative; 
	float:left; 
	z-index:2;
}
* html #center {
    height:457px;
    overflow:visible; /* = in IE6 content will expand the set height */
}
#leftcolumn {
    width:100%;
    background: url('../../images/leftcolumn.png')repeat-y;
    min-width:589px;
}
#rightcolumn {
    width:100%;
    background:url('../../images/rightcolumn.png') repeat-y right 50%;
    min-width:589px;
}
#center {
    text-align:left;
    font-family:Arial, Helvetica, sans-serif;
    font-size:medium;
    font-style:normal;
    color:#603913;
    padding:0 93px;
    min-width:589px;
    min-height:457px;
}
#footer {
    bottom:0px;
    width:100%;
    margin:0px;
    height: auto;
    clear:both;
}

and the HTML:


<div id="header">
	<div id="minwidth">
		<div id="container">
			<img class="banner" src="../../images/header.png"/>
			<img class="banner" src="../../images/menubar.png"/>
		</div>
	</div>
</div>
<div id="minwidth">
	<div id="container">
		<div id="leftcolumn">
			<div id="rightcolumn">
				<div id="center">
(Content goes here!) (Content goes here!) (Content goes here!) (Content goes here!) (Content goes here!) (Content goes here!) (Content goes here!) (Content goes here!) (Content goes here!)(Content goes here!)
				</div>
			</div>
		</div>
	</div>
</div>
<div id="footer">
	<div id="minwidth">
		<div id="container">
			<img class="banner" src="../../images/contactfooter.png" />
		</div>
	</div>
</div>

And a linky:
http://samcampsall.chrisfulton.co.uk/JoeSingh/JoeSinghTemplate.html

So, I know it has ugly added div’s but what do you think?

Erik_J · January 18, 2011, 7:28pm

Looks ok I think. The border min-width method you now have is the oldest, the margin method the newest afaik.

Why not wrap the whole page including header and footer in 1 min-width setup instead of one for each division?

But, if you want a “sticky footer” page of course the footer need its own set.

Paul had a quiz here that covers that. Scroll down to Quiz 24 and read how min-width can be done in IE6. … In another quiz you will find a solution for IE6 max-width too.

EDIT/
The initial fix I suggested was rubbish! The next I gave is the best working there is.

PaulOB · January 18, 2011, 7:42pm

Here it is as a whole page wrapper which means you only need to do it once as Erik mentioned.


<!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" dir="ltr" lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Joseph Peter Singh - Portrait and Wedding Photography</title>
<link rel="stylesheet" href="testcss2.css" type="text/css" media="screen" />
<style>
p{margin:0 0 1em}
html, body {
    margin: 0;
    padding: 0;
}
.banner {
    width: 100%;
    min-width:775px;
}
#header {
    width:100%;
    margin:0;
}
#header img {
    display:block;
}
#leftcolumn {
    width:100%;
    background: url('http://samcampsall.chrisfulton.co.uk/JoeSingh/leftcolumn.png') repeat-y;
    min-width:775px;
}
#rightcolumn {
    width:100%;
    background:url('http://samcampsall.chrisfulton.co.uk/JoeSingh/rightcolumn.png') repeat-y right 50%;
    min-width:775px;
}
#center {
    text-align:left;
    font-family:Arial, Helvetica, sans-serif;
    font-size:medium;
    font-style:normal;
    color:#603913;
    padding:0 93px;
    min-width:589px;
    min-height:457px;
}
* html #center {
    height:457px;
    overflow:visible; /* = in IE6 content will expand the set height */
}
#footer {
    width:100%;
    clear:both;
    min-width:775px;
}
/*** workarounds for IE6 min-width and min-height ***/
* html .ie6minwidth {
    margin-left:775px; /*** IE min-width work around ***/
    display:inline-block; /*** trip hasLayout in IE to make "IE min-width" work ***/
}
* html .ie6min2 {
    margin-left:-775px; /*** IE min-width work around ***/
    position:relative; /*** for IE to make "IE min-width" work ***/
    display:inline-block; /*** trip hasLayout in IE to make "IE min-width" work ***/
}
</style>
</head>
<body>
<div class="ie6minwidth">
    <div class="ie6min2">
        <div id="header"><img class="banner" src="http://samcampsall.chrisfulton.co.uk/JoeSingh/header.png"/> <img class="banner" src="http://samcampsall.chrisfulton.co.uk/JoeSingh/menubar.png"/></div>
        <div id="leftcolumn">
            <div id="rightcolumn">
                <div id="center">
                    <p>test</p>
                    <p>test</p>
                    <p>test</p>
                    <p>test</p>
                    <p>test</p>
                    <p>test</p>
                    <p>test</p>
                    <p>test</p>
                    <p>test</p>
                    <p>test</p>
                </div>
            </div>
        </div>
        <div id="footer"> <img class="banner" src="http://samcampsall.chrisfulton.co.uk/JoeSingh/contactfooter.png"/> </div>
    </div>
</div>
</body>
</html>

scampsall · January 19, 2011, 12:17pm

Hey both,

You’re not going to bill me once this thread is locked are you?!
I really really appreciate you sharing your expertise, so a massive heartfelt thank you!

Trust me to use the oldest method and add pointless markup. I’ve again taken on your suggestions implementing the margin method and adding just the one min width div - kinda obvious really

I think I should bow out gracefully at this point - stupid questions will no doubt abound in my next thread as I start adding a photo gallery etc (it’s a photography site after all!)

Now, any CSS ‘workarounds’ for the enormous tax bill I received this morning?..

PaulOB · January 19, 2011, 12:23pm

Yes display:none

scampsall · January 19, 2011, 2:17pm

I’ll give it a go!