25 replies [Last post]
fberriman
fberriman's picture
Offline
Enthusiast
Reading, England, UK
Last seen: 14 years 40 weeks ago
Reading, England, UK
Joined: 2006-06-02
Posts: 146
Points: 0

I've had a google about for one, and I can't think of a site off the top of my head that has one, but I'm looking for a two column layout, with one column stretched behind the other, with the 2nd column indented, and overflowing the first column AND the whole thing centred fluidly.

I've got it all but the centre so far. Build this if it helps explain. (Ignore the class names for now - I'm doing some R&D, so they will become semantic when I've got the layout I need - also, ignore the colours - I'm not blind!)

XHTML:

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>R&D template</title>

<link href="stylesheet/default.css" type=text/css rel=stylesheet /> 
</head>
<body>
<div id="float">
<div id="redbg">

<div id="content">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse accumsan. Praesent iaculis, quam sit amet scelerisque aliquam, mauris tellus dapibus sapien, quis ultricies velit magna et pede. Cras sit amet tortor ut nisl vehicula ornare. Nulla ac elit sit amet magna blandit semper. Pellentesque pretium posuere felis. Praesent interdum eros ut est. Vestibulum semper lorem non ligula. Vivamus rhoncus faucibus nibh. Vivamus nec libero ac erat malesuada varius. Fusce auctor, est nec mattis tristique, dolor nibh tincidunt nibh, id imperdiet velit ante vitae nisl. Proin suscipit nisl ac dolor pellentesque consectetuer. Donec accumsan suscipit tellus. Quisque vehicula, tellus sit amet tincidunt condimentum, dolor urna lacinia neque, id cursus libero arcu quis velit. Praesent vulputate hendrerit nibh.</p>

<p>Phasellus diam. Vivamus id mi vel augue egestas imperdiet. Aenean blandit. Donec porta purus in est. Praesent porttitor neque eu nunc. Nullam quis nibh non augue lacinia egestas. Pellentesque convallis. In ac lorem. Donec congue laoreet justo. Nulla quis ligula ac pede molestie varius. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec imperdiet. Quisque vitae sapien et ipsum luctus pulvinar. </p>
</div>

</div>
<div id="greybox">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse accumsan. Praesent iaculis, quam sit amet scelerisque aliquam, mauris tellus dapibus sapien, quis ultricies velit magna et pede. Cras sit amet tortor ut nisl vehicula ornare. Nulla ac elit sit amet magna blandit semper. Pellentesque pretium posuere felis. Praesent interdum eros ut est. Vestibulum semper lorem non ligula. Vivamus rhoncus faucibus nibh. Vivamus nec libero ac erat malesuada varius. Fusce auctor, est nec mattis tristique, dolor nibh tincidunt nibh, id imperdiet velit ante vitae nisl. Proin suscipit nisl ac dolor pellentesque consectetuer. Donec accumsan suscipit tellus. Quisque vehicula, tellus sit amet tincidunt condimentum, dolor urna lacinia neque, id cursus libero arcu quis velit. Praesent vulputate hendrerit nibh.</p>

<p>Phasellus diam. Vivamus id mi vel augue egestas imperdiet. Aenean blandit. Donec porta purus in est. Praesent porttitor neque eu nunc. Nullam quis nibh non augue lacinia egestas. Pellentesque convallis. In ac lorem. Donec congue laoreet justo. Nulla quis ligula ac pede molestie varius. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec imperdiet. Quisque vitae sapien et ipsum luctus pulvinar. </p>
<p>Phasellus diam. Vivamus id mi vel augue egestas imperdiet. Aenean blandit. Donec porta purus in est. Praesent porttitor neque eu nunc. Nullam quis nibh non augue lacinia egestas. Pellentesque convallis. In ac lorem. Donec congue laoreet justo. Nulla quis ligula ac pede molestie varius. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec imperdiet. Quisque vitae sapien et ipsum luctus pulvinar. </p>

</div>
</div>
</body>
</html>

CSS:

body {
	font-weight: normal; 
	font-size: 12px; 
	margin: 0px;
	color: #fff; 
	font-family: Arial, Helvetica, sans-serif; 
	background-color:#000000;
}
a, a:hover, a:visited, a:active{
	color: #000000;
	background-color:#E9E9E9;
}
/* 
====== 1: END: Globals ======
*/


/*
====== 3: START: Layouts ======
*/
#float{
	padding-left: 40px;
	padding-top: 40px;
}	
#redbg{
	width: 700px;
	background-color:#CC3333;
	text-align: left;
	border-top: #FFCCCC 2px solid;
	border-left:#FFCCCC 2px solid;
	border-bottom:#990000 2px solid;
	border-right:#990000 2px solid;
	}
#content{
	width: 320px;
	padding: 10px;
}
#greybox{
	position: absolute;
	top: 30px;
	left: 400px;
	width: 300px;
	background-color:#999999;
	padding: 10px;
	border-top:#CCCCCC 2px solid;
	border-left:#CCCCCC 2px solid;
	border-bottom:#333333 2px solid;
	border-right:#333333 2px solid;
	}
/*
====== 3: END: Layouts ======
*/

-- Frances

Lorraine
Lorraine's picture
Offline
Elder
UK
Last seen: 15 years 15 weeks ago
UK
Timezone: GMT+1
Joined: 2005-01-04
Posts: 1001
Points: 0

overflowed 2nd col - edit - new problem :(

Suggest you need to contain the boxes to get them centred and in the same alignment as now. Either use a container div or, to cut down on divitis, try something like this:

body { 
   font-weight: normal; 
   font-size: 12px; 
   margin: 0px; 
   color: #fff; 
   font-family: Arial, Helvetica, sans-serif; 
   background-color:#000000; 
   width: 780px; /******/
   margin: 0 auto;/*** centre horizontally ***/
} 
#greybox{ 
   position: absolute;
   top: 30px; 
   margin-left: 340px; /*** or thereabouts so as not to obscure the right side of the text area in #redbg. Use margin-left instead of left to move this div in a 'relative' kinda way***/
   /*left: 400px;*/
   width: 300px;
   background-color:#999999; 
   padding: 10px; 
   border-top:#CCCCCC 2px solid; 
   border-left:#CCCCCC 2px solid; 
   border-bottom:#333333 2px solid; 
   border-right:#333333 2px solid;
   } 

It's probably not "yer definitive solution" but it's something to be going on with and works in IE6, Fx1.5, Op8 and NS8. Sorry I don't have a Mac. Crying

fberriman
fberriman's picture
Offline
Enthusiast
Reading, England, UK
Last seen: 14 years 40 weeks ago
Reading, England, UK
Joined: 2006-06-02
Posts: 146
Points: 0

overflowed 2nd col - edit - new problem :(

Aye, after posting this I did discuss maybe using a container to base all other distances on, which ought to work. I'll play with this again this afternoon and give your CSS a whirl (I'll even try it on a Mac for ya!).

-- Frances

fberriman
fberriman's picture
Offline
Enthusiast
Reading, England, UK
Last seen: 14 years 40 weeks ago
Reading, England, UK
Joined: 2006-06-02
Posts: 146
Points: 0

overflowed 2nd col - edit - new problem :(

Hey, nice one. Works in Safari too. Cheers for that. Laughing out loud

-- Frances

fberriman
fberriman's picture
Offline
Enthusiast
Reading, England, UK
Last seen: 14 years 40 weeks ago
Reading, England, UK
Joined: 2006-06-02
Posts: 146
Points: 0

overflowed 2nd col - edit - new problem :(

Just to follow up - I ended up adding a width and margin:0 auto; to my float container, so that my content could be centred, and I could ALSO add full width header and footer (since the width could then be removed from the body). Gives me lots of options now!

-- Frances

Lorraine
Lorraine's picture
Offline
Elder
UK
Last seen: 15 years 15 weeks ago
UK
Timezone: GMT+1
Joined: 2005-01-04
Posts: 1001
Points: 0

overflowed 2nd col - edit - new problem :(

Proper job Laughing out loud

fberriman
fberriman's picture
Offline
Enthusiast
Reading, England, UK
Last seen: 14 years 40 weeks ago
Reading, England, UK
Joined: 2006-06-02
Posts: 146
Points: 0

overflowed 2nd col - edit - new problem :(

Right, okay. I'm stuck again... I think I've shot myself in the foot as far as footers go. I need to get a fullwidth footer to sit below the contents (either below the red or grey, depending on which is longer that the time).

XHTML:

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>R&amp;D</title>

<link href="stylesheet/default.css" type=text/css rel=stylesheet /> 
</head>
<body>

<div id="float">
	<div id="redbg">
				<div id="content">
					<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse accumsan. Praesent iaculis, quam sit amet scelerisque aliquam, mauris tellus dapibus sapien, quis ultricies velit magna et pede. Cras sit amet tortor ut nisl vehicula ornare. Nulla ac elit sit amet magna blandit semper. Pellentesque pretium posuere felis. Praesent interdum eros ut est. Vestibulum semper lorem non ligula. Vivamus rhoncus faucibus nibh. Vivamus nec libero ac erat malesuada varius. Fusce auctor, est nec mattis tristique, dolor nibh tincidunt nibh, id imperdiet velit ante vitae nisl. Proin suscipit nisl ac dolor pellentesque consectetuer. Donec accumsan suscipit tellus. Quisque vehicula, tellus sit amet tincidunt condimentum, dolor urna lacinia neque, id cursus libero arcu quis velit. Praesent vulputate hendrerit nibh.</p>
					<p>Phasellus diam. Vivamus id mi vel augue egestas imperdiet. Aenean blandit. Donec porta purus in est. Praesent porttitor neque eu nunc. Nullam quis nibh non augue lacinia egestas. Pellentesque convallis. In ac lorem. Donec congue laoreet justo. Nulla quis ligula ac pede molestie varius. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec imperdiet. Quisque vitae sapien et ipsum luctus pulvinar. </p>
				</div>
	</div>
	<div id="greybox">
				<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse accumsan. Praesent iaculis, quam sit amet scelerisque aliquam, mauris tellus dapibus sapien, quis ultricies velit magna et pede. Cras sit amet tortor ut nisl vehicula ornare. Nulla ac elit sit amet magna blandit semper. Pellentesque pretium posuere felis. Praesent interdum eros ut est. Vestibulum semper lorem non ligula. Vivamus rhoncus faucibus nibh. Vivamus nec libero ac erat malesuada varius. Fusce auctor, est nec mattis tristique, dolor nibh tincidunt nibh, id imperdiet velit ante vitae nisl. Proin suscipit nisl ac dolor pellentesque consectetuer. Donec accumsan suscipit tellus. Quisque vehicula, tellus sit amet tincidunt condimentum, dolor urna lacinia neque, id cursus libero arcu quis velit. Praesent vulputate hendrerit nibh.</p>
				<p>Phasellus diam. Vivamus id mi vel augue egestas imperdiet. Aenean blandit. Donec porta purus in est. Praesent porttitor neque eu nunc. Nullam quis nibh non augue lacinia egestas. Pellentesque convallis. In ac lorem. Donec congue laoreet justo. Nulla quis ligula ac pede molestie varius. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec imperdiet. Quisque vitae sapien et ipsum luctus pulvinar. </p>
				<p>Phasellus diam. Vivamus id mi vel augue egestas imperdiet. Aenean blandit. Donec porta purus in est. Praesent porttitor neque eu nunc. Nullam quis nibh non augue lacinia egestas. Pellentesque convallis. In ac lorem. Donec congue laoreet justo. Nulla quis ligula ac pede molestie varius. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec imperdiet. Quisque vitae sapien et ipsum luctus pulvinar. </p>
	</div>
</div>
	<div id="footer">
				<p>&copy; copyright stuff. All rights reserved  <span class="green">|</span> <a href="../009_legal.html">Terms &amp; Conditions</a> <span class="green">|</span> <a href="../010_policy.html">Privacy policy</a></p>
	</div>

</body>
</html>

CSS:

/* 
====== 1: START: Globals ======
*/

*	{ 

}
body {
   font-weight: normal;
   font-size: 12px;
   margin: 0px;
   color: #fff;
   font-family: Arial, Helvetica, sans-serif;
   background-color:#000000;



} 
a, a:hover, a:visited, a:active{
	color: #000000;
	background-color:#E9E9E9;
}

/* 
====== 1: END: Globals ======
*/
/*
====== 3: START: Layouts ======
*/


#float{
	padding-left: 5px;
	padding-top: 40px;
	width: 780px;
	border: 1px solid blue;
	margin: 0 auto;
}	
#footer{
	clear: both;
	background-color: #00CCFF;
}
#redbg{
	width: 700px;
	background-color:#CC3333;
	text-align: left;
	border-top: #FFCCCC 2px solid;
	border-left:#FFCCCC 2px solid;
	border-bottom:#990000 2px solid;
	border-right:#990000 2px solid;
	
}
#content{
	width: 320px;
	padding: 10px;
}
#greybox{ 
   position: absolute;
   top: 20px;
   margin-left: 340px;
   width: 300px;
   background-color:#999999;
   padding: 10px;
   height: auto;
   border-top:#CCCCCC 2px solid;
   border-left:#CCCCCC 2px solid;
   border-bottom:#333333 2px solid;
   border-right:#333333 2px solid; 
}
/*
====== 3: END: Layouts ======
*/

Got any bright ideas, or am I stuffed and will have to think of another way of creating this layout?

-- Frances

Lorraine
Lorraine's picture
Offline
Elder
UK
Last seen: 15 years 15 weeks ago
UK
Timezone: GMT+1
Joined: 2005-01-04
Posts: 1001
Points: 0

overflowed 2nd col - edit - new problem :(

Well... you haven't got any floats/float containers... not even the chap called #float. So, as you've probably noticed, clear:both on #footer has no effect and absolute positioning on #greybox is doing you no favours either. Crying

I would have thought a similar effect can be achieved with 3 cols(floated/contained/cleared). Left red bg with text, Right red bg only and Center grey bg with a bit of a fiddle (techie term) on the top margin. But it may be best to test a full width header on there as well - just in case, if, as you mentioned above, that is what you want.

fberriman
fberriman's picture
Offline
Enthusiast
Reading, England, UK
Last seen: 14 years 40 weeks ago
Reading, England, UK
Joined: 2006-06-02
Posts: 146
Points: 0

overflowed 2nd col - edit - new problem :(

Lorraine wrote:
Well... you haven't got any floats/float containers... not even the chap called #float. So, as you've probably noticed, clear:both on #footer has no effect and absolute positioning on #greybox is doing you no favours either. Crying

I would have thought a similar effect can be achieved with 3 cols(floated/contained/cleared). Left red bg with text, Right red bg only and Center grey bg with a bit of a fiddle (techie term) on the top margin. But it may be best to test a full width header on there as well - just in case, if, as you mentioned above, that is what you want.

Yeah, I called it float and never ended up using it as such... it's more "container" now.

I've put in a full width header, and that will work, but taken it out again because I don't need it. The footer isn't working because of the absolute on the grey.

The reason I need it to work like this, is because I need the red OR the grey to be the longest, and allow the red to show a little behind the grey on the right side of it. There's no way to fudge that free-flow look with images (if they could both expand at the same rate together, I'd have done that as a 2-col layout).

Crying

I'm taking lunch now and hoping for inspiration on return!

-- Frances

Lorraine
Lorraine's picture
Offline
Elder
UK
Last seen: 15 years 15 weeks ago
UK
Timezone: GMT+1
Joined: 2005-01-04
Posts: 1001
Points: 0

overflowed 2nd col - edit - new problem :(

fberriman wrote:
The footer isn't working because of the absolute on the grey.

I didn't say it in the same way but... err... yes.

Quote:
The reason I need it to work like this, is because I need the red OR the grey to be the longest, and allow the red to show a little behind the grey on the right side of it. There's no way to fudge that free-flow look with images (if they could both expand at the same rate together, I'd have done that as a 2-col layout).

Having some difficulty understanding what you're after here.
What is wrong with the display if you just reduce the amount of text in the grey div to make it the shorter of the two?
Do you want the text in the red div to "flow" the width of the red div beneath the shorter grey div?
Do you want the grey div to have the red showing to the right of it just for the height of the grey div?
Are you intending to use non-tileable images?
Have you got mock-up piccies for red the longer and one for grey the longer?

fberriman
fberriman's picture
Offline
Enthusiast
Reading, England, UK
Last seen: 14 years 40 weeks ago
Reading, England, UK
Joined: 2006-06-02
Posts: 146
Points: 0

overflowed 2nd col - edit - new problem :(

Quote:
Having some difficulty understanding what you're after here.

I'm not the best at explaining... you should see me flapping my hands about around here sometime!

Quote:

What is wrong with the display if you just reduce the amount of text in the grey div to make it the shorter of the two?

If the text is reduced in the grey, it should become shorter than the red - but the footer will need to remain below the red. The footer should never be behind/on top of either of those two divs

Quote:
Do you want the text in the red div to "flow" the width of the red div beneath the shorter grey div?

No, fixed width for the actual content in the div.

Quote:
Do you want the grey div to have the red showing to the right of it just for the height of the grey div?

The red to the right of it must always be as long as the red to the left - so which ever method I end up using must make it look like all the red is part of the same box.

Quote:
Are you intending to use non-tileable images?

If I ended up using a method that used images, I imagine I'd use tiled images, on the y axis.

Quote:
Have you got mock-up piccies for red the longer and one for grey the longer?

Yeah, but I can't put them up (gone to client today, I don't think they'd like me putting them online a whole lot). If you fill the current mock-up I've stuck on here with lots of lipsum, and let it flow down then that'd be the same. As I said, the width of the text doesn't need to flow around the grey - infact, it shouldn't, according to Designs designs!

-- Frances

fberriman
fberriman's picture
Offline
Enthusiast
Reading, England, UK
Last seen: 14 years 40 weeks ago
Reading, England, UK
Joined: 2006-06-02
Posts: 146
Points: 0

overflowed 2nd col - edit - new problem :(

I don't have the foggiest idea if this'll help explain what I'm trying to create, but this very quick (4 minutes!) layout of the 3 main types of display the page needs to be able to do are what I'm driving at.

http://www.fberriman.com/layout.jpg or see attached

-- Frances

Lorraine
Lorraine's picture
Offline
Elder
UK
Last seen: 15 years 15 weeks ago
UK
Timezone: GMT+1
Joined: 2005-01-04
Posts: 1001
Points: 0

overflowed 2nd col - edit - new problem :(

OK your reply and layout pic cut out a lot of what I thought could be problems.

So... After a stiff drink and a bit (well a lot actually) of feverish bookmark searching - potentially, possibly, perhaps - a eureka moment.
Have you tried the layout using z-index?

Interesting sample from that article here.
Increase the text size a few times in Fx (even just the twice in IE) and "see how they flow". Smile Ditch the AP, get that lot contained properly and the cleared footer should follow beneath the container.

fberriman
fberriman's picture
Offline
Enthusiast
Reading, England, UK
Last seen: 14 years 40 weeks ago
Reading, England, UK
Joined: 2006-06-02
Posts: 146
Points: 0

overflowed 2nd col - edit - new problem :(

Lorraine wrote:
OK your reply and layout pic cut out a lot of what I thought could be problems.

So... After a stiff drink and a bit (well a lot actually) of feverish bookmark searching - potentially, possibly, perhaps - a eureka moment.
Have you tried the layout using z-index?

Interesting sample from that article here.
Increase the text size a few times in Fx (even just the twice in IE) and "see how they flow". Smile Ditch the AP, get that lot contained properly and the cleared footer should follow beneath the longest.

Oh no! I didn't want to drive anyone to drink yet... At least wait til the sun starts setting.

Does that second link look broken to you? Their central content divs are flowing WAY low (broken low, heh).

I think my brain is getting fried on this today. I will read that article and hope it sinks in over the weekend (after a few southern comforts), and try again fresh on Monday morning. I'll report back, hopefully with a working resolution for all to see!

-- Frances

Lorraine
Lorraine's picture
Offline
Elder
UK
Last seen: 15 years 15 weeks ago
UK
Timezone: GMT+1
Joined: 2005-01-04
Posts: 1001
Points: 0

overflowed 2nd col - edit - new problem :(

fberriman wrote:

Does that second link look broken to you? Their central content divs are flowing WAY low (broken low, heh).

From the css - it's auto width-ed, not meant to be up-top, but to show how it can be overlapped.
Hey, I make my own sunset here Wink

fberriman
fberriman's picture
Offline
Enthusiast
Reading, England, UK
Last seen: 14 years 40 weeks ago
Reading, England, UK
Joined: 2006-06-02
Posts: 146
Points: 0

overflowed 2nd col - edit - new problem :(

Lorraine wrote:

From the css - it's auto width-ed, not meant to be up-top, but to show how it can be overlapped.
Hey, I make my own sunset here Wink

heh. A sunrise would be more beneficial right now.

Anyway, thanks for your help today. I think I've almost got my head around it, I just need to not look at it for a day and it'll practically fix itself. The things I do to keep designers happy.

-- Frances

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 47 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

overflowed 2nd col - edit - new problem :(

Designers, pah

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

fberriman
fberriman's picture
Offline
Enthusiast
Reading, England, UK
Last seen: 14 years 40 weeks ago
Reading, England, UK
Joined: 2006-06-02
Posts: 146
Points: 0

overflowed 2nd col - edit - new problem :(

Hey guys, came in this morning and got a layout doing what I wanted.. thought you might like to see it;

The XHTML is identical to my last one, so I won't repost, the only difference is this part of the CSS:

#float{
	padding-left: 5px;
	padding-top: 40px;
	width: 710px;
	border: 1px solid blue;
	margin: 0 auto;
}	
#footer{
	clear: both;
	background-color: #00CCFF;
	z-index: 3;
}
#redbg{
	width: 700px;
	background-color:#CC3333;
	text-align: left;
	border-top: #FFCCCC 2px solid;
	border-left:#FFCCCC 2px solid;
	border-bottom:#990000 2px solid;
	border-right:#990000 2px solid;
	z-index: 1;
	
}
#content{
	width: 320px;
	padding: 10px;
}
#greybox{ 
    width: 300px;
	position: relative;
	margin-left: 380px;
	margin-top: -425px;
   background-color:#CCCCCC;
   border-top:#CCCCCC 2px solid;
   border-left:#CCCCCC 2px solid;
   border-bottom:#333333 2px solid;
   border-right:#333333 2px solid; 
   z-index: 2;
}

Switched positioning for relative (and added position elements to make sure the z-index works, if it's needed) and then used margins to pull the grey box up to where I needed it to be. Works in IE 5.0+, FF and Safari.

-- Frances

Lorraine
Lorraine's picture
Offline
Elder
UK
Last seen: 15 years 15 weeks ago
UK
Timezone: GMT+1
Joined: 2005-01-04
Posts: 1001
Points: 0

overflowed 2nd col - edit - new problem :(

:-k
Not tested: but what happens in Firefox when:

1) the red box is much longer than it is now
I would think the grey box is no longer just above the top of the red box but is positioned with the top of it 425px up from the bottom of the red box.

2) the grey box is shorter than the red box?
Does Firefox show a containment issue, in that only the grey box seems to be pushing the footer down?

Just curious - it could just be my imprecise misunderstanding of layouts for which I am infamous around these parts. Cool

fberriman
fberriman's picture
Offline
Enthusiast
Reading, England, UK
Last seen: 14 years 40 weeks ago
Reading, England, UK
Joined: 2006-06-02
Posts: 146
Points: 0

overflowed 2nd col - edit - new problem :(

Lorraine wrote:
:-k
Not tested: but what happens in Firefox when:

1) the red box is much longer than it is now
I would think the grey box is no longer just above the top of the red box but is positioned with the top of it 425px up from the bottom of the red box.

2) the grey box is shorter than the red box?
Does Firefox show a containment issue, in that only the grey box seems to be pushing the footer down?

Just curious - it could just be my imprecise misunderstanding of layouts for which I am infamous around these parts. Cool

lol. I've been playing with it all morning, and founds lots of flaws in this method, so I'm scrapping it... AGAIN. The main problem is, the margin I was using to move the box up relies on the red content always being the same height, otherwise it moves up too far. It's just causing me many headaches.

I'm going over the designs and looking for other ways to do them. I have to have a site that'll flex with variable content, as I've got to make this in 7 languages (and German for example, always seems to take up about a 3rd more space than English).

I've looked closely at the designs, and there is only one page that will have the effect of the grey box being longer than the red - and that is a landing page of sorts and the grey will need to be larger anyway, so I'm going to do that as a one off special style set. The other pages I'm fudging, sort of. Creating a top image with the overlaps to sit along to top of that content, then a a floated 2 column design below to line up. I've made that, and it works, but as I said, it won't allow for grey to overlap below. It's not what I wanted, but it'll do (I can't spend another day making z-indexed, fancy floaty columns work!).

-- Frances

Lorraine
Lorraine's picture
Offline
Elder
UK
Last seen: 15 years 15 weeks ago
UK
Timezone: GMT+1
Joined: 2005-01-04
Posts: 1001
Points: 0

overflowed 2nd col - edit - new problem :(

Right then... I've just started fiddling with it, but now I have no excuse for not getting back to doing some housework, washing, ironing, cooking - which I'd rather not be doing, I'll have you know Crying
I'll just leave you to your image-slicing Smile

fberriman
fberriman's picture
Offline
Enthusiast
Reading, England, UK
Last seen: 14 years 40 weeks ago
Reading, England, UK
Joined: 2006-06-02
Posts: 146
Points: 0

overflowed 2nd col - edit - new problem :(

Lorraine wrote:
Right then... I've just started fiddling with it, but now I have no excuse for not getting back to doing some housework, washing, ironing, cooking - which I'd rather not be doing, I'll have you know Crying
I'll just leave you to your image-slicing Smile

It's not as bad as it sounds.. It's just 1 image that sits on the top of the central content, to give the effect. Since the effect is purely decorational, and it can be done in the CSS, I don't feel so bad using it.

If you really don't want to do any house work, feel free to come up with a pure CSS method! Tongue

-- Frances

Lorraine
Lorraine's picture
Offline
Elder
UK
Last seen: 15 years 15 weeks ago
UK
Timezone: GMT+1
Joined: 2005-01-04
Posts: 1001
Points: 0

overflowed 2nd col - edit - new problem :(

fberriman wrote:

If you really don't want to do any house work, feel free to come up with a pure CSS method! Tongue

OK Smile
Chores all done, everyone fed and watered, got bored with the television and 45 mins later... tada... stick this in your browser and see how it goes. Tongue
Validates, no hacks (except the Mac IE thingy), no images, either column longest, works in IE6, Fx 1.5, Op8 and NS8.
<!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="en" lang="en" >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>R &amp; D</title>
<style type="text/css">
html, body{ 
 	margin:0; 
 	padding:0; 
 	text-align:center;
 	background: #000;
 	color: #fff;
}
body {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
}
p{
 	margin: 0;
	padding: 0;
 }
#header{
 	height:100px; 
  	background:#9FFFFF;
	color: #000; 
 	width:100%;
	font-size: 20px;
} 
#wrapper{ 
 	width:760px; 
 	text-align:left;  
	/*margin: 0 auto;*//** you could leave this in together with margin-top but the validator doesn't like it **/
	margin-top: 40px;
	margin-left: auto; /**instead of margin 0 auto **/
	margin-right: auto; /** ditto **/
	background: #c33;
	color: #fff;
	border-top: #FFCCCC 2px solid; 
   border-left:#FFCCCC 2px solid; 
   border-bottom:#990000 2px solid; 
   border-right:#990000 2px solid; 
} 
#innerwrap{
	width: 720px;
	margin: 0 auto;
}
#leftcol{
 	width:380px; 
 	float:left;
	padding-top: 15px; 
 }
#rightcol{
 	background: #ccc;
	color: #000;  
 	float: right; 
 	position: relative;
 	width:320px; 
	top: -20px;
	margin-bottom: -20px;
	border-top:#fff 2px solid; 
   border-left:#fff 2px solid; 
   border-bottom:#333333 2px solid; 
   border-right:#333333 2px solid; 
 }
 #rightcol p {
 padding: 15px;
 }
#footer{
 	height:50px; 
  	background:#36C0EC; 
	color: #000;
 } 
 
 /* *** Float containers fix:
 http://www.csscreator.com/attributes/containedfloat.php *** */ 
.clearfix:after {
 	content: "."; 
 	display: block; 
	height: 0; 
 	clear: both; 
 	visibility: hidden;
 }
.clearfix{display: inline-table;}
/* Hides from IE-mac \*/
* html .clearfix{height: 1%;}
.clearfix{display: block;}
/* End hide from IE-mac */ 
</style>


</head>
<body>
<div> Header </div>
	<div>
		<div> 
			<div>               
			<p>Phasellus diam. Vivamus id mi vel augue egestas imperdiet. Aenean blandit. Donec porta purus in est. Praesent porttitor neque eu nunc. Nullam quis nibh non augue lacinia egestas. Pellentesque convallis. In ac lorem. Donec congue laoreet justo. Nulla quis ligula ac pede molestie varius. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec imperdiet. Quisque vitae sapien et ipsum luctus pulvinar. </p> 
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse accumsan. Praesent iaculis, quam sit amet scelerisque aliquam, mauris tellus dapibus sapien, quis ultricies velit magna et pede. Cras sit amet tortor ut nisl vehicula ornare. Nulla ac elit sit amet magna blandit semper. Pellentesque pretium posuere felis. Praesent interdum eros ut est. Vestibulum semper lorem non ligula. Vivamus rhoncus faucibus nibh. Vivamus nec libero ac erat malesuada varius. Fusce auctor, est nec mattis tristique, dolor nibh tincidunt nibh, id imperdiet velit ante vitae nisl. Proin suscipit nisl ac dolor pellentesque consectetuer. Donec accumsan suscipit tellus. Quisque vehicula, tellus sit amet tincidunt condimentum, dolor urna lacinia neque, id cursus libero arcu quis velit. Praesent vulputate hendrerit nibh.</p> 
         <p>Phasellus diam. Vivamus id mi vel augue egestas imperdiet. Aenean blandit. Donec porta purus in est. Praesent porttitor neque eu nunc. Nullam quis nibh non augue lacinia egestas. Pellentesque convallis. In ac lorem. Donec congue laoreet justo. Nulla quis ligula ac pede molestie varius. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec imperdiet. Quisque vitae sapien et ipsum luctus pulvinar. </p>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse accumsan. Praesent iaculis, quam sit amet scelerisque aliquam, mauris tellus dapibus sapien, quis ultricies velit magna et pede. Cras sit amet tortor ut nisl vehicula ornare. Nulla ac elit sit amet magna blandit semper. Pellentesque pretium posuere felis. Praesent interdum eros ut est. Vestibulum semper lorem non ligula. Vivamus rhoncus faucibus nibh. Vivamus nec libero ac erat malesuada varius. Fusce auctor, est nec mattis tristique, dolor nibh tincidunt nibh, id imperdiet velit ante vitae nisl. Proin suscipit nisl ac dolor pellentesque consectetuer. Donec accumsan suscipit tellus. Quisque vehicula, tellus sit amet tincidunt condimentum, dolor urna lacinia neque, id cursus libero arcu quis velit. Praesent vulputate hendrerit nibh.</p> 
         <p>Phasellus diam. Vivamus id mi vel augue egestas imperdiet. Aenean blandit. Donec porta purus in est. Praesent porttitor neque eu nunc. Nullam quis nibh non augue lacinia egestas. Pellentesque convallis. In ac lorem. Donec congue laoreet justo. Nulla quis ligula ac pede molestie varius. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec imperdiet. Quisque vitae sapien et ipsum luctus pulvinar. </p>
            </div> 
  
   <div>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse accumsan. Praesent iaculis, quam sit amet scelerisque aliquam, mauris tellus dapibus sapien, quis ultricies velit magna et pede. Cras sit amet tortor ut nisl vehicula ornare. Nulla ac elit sit amet magna blandit semper. Pellentesque pretium posuere felis. Praesent interdum eros ut est. Vestibulum semper lorem non ligula. Vivamus rhoncus faucibus nibh. Vivamus nec libero ac erat malesuada varius. Fusce auctor, est nec mattis tristique, dolor nibh tincidunt nibh, id imperdiet velit ante vitae nisl. Proin suscipit nisl ac dolor pellentesque consectetuer. Donec accumsan suscipit tellus. Quisque vehicula, tellus sit amet tincidunt condimentum, dolor urna lacinia neque, id cursus libero arcu quis velit. Praesent vulputate hendrerit nibh.</p> 
           <!--<p>Phasellus diam. Vivamus id mi vel augue egestas imperdiet. Aenean blandit. Donec porta purus in est. Praesent porttitor neque eu nunc. Nullam quis nibh non augue lacinia egestas. Pellentesque convallis. In ac lorem. Donec congue laoreet justo. Nulla quis ligula ac pede molestie varius. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec imperdiet. Quisque vitae sapien et ipsum luctus pulvinar. </p> 
            <p>Phasellus diam. Vivamus id mi vel augue egestas imperdiet. Aenean blandit. Donec porta purus in est. Praesent porttitor neque eu nunc. Nullam quis nibh non augue lacinia egestas. Pellentesque convallis. In ac lorem. Donec congue laoreet justo. Nulla quis ligula ac pede molestie varius. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec imperdiet. Quisque vitae sapien et ipsum luctus pulvinar. </p>	            
			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse accumsan. Praesent iaculis, quam sit amet scelerisque aliquam, mauris tellus dapibus sapien, quis ultricies velit magna et pede. Cras sit amet tortor ut nisl vehicula ornare. Nulla ac elit sit amet magna blandit semper. Pellentesque pretium posuere felis. Praesent interdum eros ut est. Vestibulum semper lorem non ligula. Vivamus rhoncus faucibus nibh. Vivamus nec libero ac erat malesuada varius. Fusce auctor, est nec mattis tristique, dolor nibh tincidunt nibh, id imperdiet velit ante vitae nisl. Proin suscipit nisl ac dolor pellentesque consectetuer. Donec accumsan suscipit tellus. Quisque vehicula, tellus sit amet tincidunt condimentum, dolor urna lacinia neque, id cursus libero arcu quis velit. Praesent vulputate hendrerit nibh.</p> 
               <p>Phasellus diam. Vivamus id mi vel augue egestas imperdiet. Aenean blandit. Donec porta purus in est. Praesent porttitor neque eu nunc. Nullam quis nibh non augue lacinia egestas. Pellentesque convallis. In ac lorem. Donec congue laoreet justo. Nulla quis ligula ac pede molestie varius. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec imperdiet. Quisque vitae sapien et ipsum luctus pulvinar. </p> 
         <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse accumsan. Praesent iaculis, quam sit amet scelerisque aliquam, mauris tellus dapibus sapien, quis ultricies velit magna et pede. Cras sit amet tortor ut nisl vehicula ornare. Nulla ac elit sit amet magna blandit semper. Pellentesque pretium posuere felis. Praesent interdum eros ut est. Vestibulum semper lorem non ligula. Vivamus rhoncus faucibus nibh. Vivamus nec libero ac erat malesuada varius. Fusce auctor, est nec mattis tristique, dolor nibh tincidunt nibh, id imperdiet velit ante vitae nisl. Proin suscipit nisl ac dolor pellentesque consectetuer. Donec accumsan suscipit tellus. Quisque vehicula, tellus sit amet tincidunt condimentum, dolor urna lacinia neque, id cursus libero arcu quis velit. Praesent vulputate hendrerit nibh.</p> 
               <p>Phasellus diam. Vivamus id mi vel augue egestas imperdiet. Aenean blandit. Donec porta purus in est. Praesent porttitor neque eu nunc. Nullam quis nibh non augue lacinia egestas. Pellentesque convallis. In ac lorem. Donec congue laoreet justo. Nulla quis ligula ac pede molestie varius. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec imperdiet. Quisque vitae sapien et ipsum luctus pulvinar. </p> -->
            </div> 
</div><innerwrap>
</div><wrapper>

	<div>Footer</div>
	
</body>
</html>

But I expect you left for home ages ago and are not interested in work thangs until the morning :roll:

fberriman
fberriman's picture
Offline
Enthusiast
Reading, England, UK
Last seen: 14 years 40 weeks ago
Reading, England, UK
Joined: 2006-06-02
Posts: 146
Points: 0

overflowed 2nd col - edit - new problem :(

Yeah, I'm at home now, but I need to come over and do some housework for you by the looks of things!

-- Frances

Lorraine
Lorraine's picture
Offline
Elder
UK
Last seen: 15 years 15 weeks ago
UK
Timezone: GMT+1
Joined: 2005-01-04
Posts: 1001
Points: 0

overflowed 2nd col - edit - new problem :(

Just noticed the html is partially stripped from that code. I had a few problems getting the HTML and CSS up there in one post - like several others have experienced recently. So just in case it isn't obvious, the structure is: it works in preview so here's hoping it works after submit: [-o<

<div id="header">
</div> 
   <div id="wrapper"> 
      <div id="innerwrap" class="clearfix"> 
         <div id="leftcol"> 
         </div>
         <div id="rightcol">
         </div>
      </div><!--innerwrap --> 
    </div><!--wrapper --> 
<div id="footer">
</div>

Hu...bl**dy...ray :whistle:
Housework all done thanks but the car needs a wash and polish. Laughing out loud

fberriman
fberriman's picture
Offline
Enthusiast
Reading, England, UK
Last seen: 14 years 40 weeks ago
Reading, England, UK
Joined: 2006-06-02
Posts: 146
Points: 0

overflowed 2nd col - edit - new problem :(

woo. So yeah, you've created in CSS what I had to end up doing with a header image yesterday. It's pretty darn swish!

So, Saturday morning, I'm polishing up your car? Smile

-- Frances