Overlapping containers issue

HTML & CSS
1

Hey All,

I’m trying to work out a layout that has a couple of rectangular containers that overlap each other, both containing text and where either container’s height (determined by their content) will influence the height of the outside container.

So far I’ve knocked out some HTML and CSS that do roughly what I want. I have an outside container 900px wide with a black border so I can see what it’s doing and then I have a light blue horizontal rectangle that is 840px wide and overlapping that I have another rectangle 430px wide.

Here’s a screenshot of what it looks like:

HTML & CSS as follows:


<html>
<head>
<style type="text/css">
body {
    text-align:center;
}

#outside {
    width:900px;
    margin:auto;
    text-align:left;
    border:solid 1px black;
}

#left {
    width:840px;
    min-height:350px;
    float:left; /* otherwise the #right container will wrap */
    background-color:#f4f5f9;
}

#left H3, #left p {
    width:380px;
    margin:20px;
}

#right {
    position:relative; 
    left:430px; 
    top:30px; 
    width:427px; 
    min-height:343px; 
    padding:20px 16px;
    margin-bottom:50px;
    background-color:#cad6e4;
}

</style>

</head>

<body>

<div id="outside">

<div id="left"> </div>

<div id="right"></div>

<div style="clear:both"></div>

</div>

</body>
</html>

I have a couple of problems with this approach:
a) It doesn’t work in IE7 or less. Also not in Compatibility mode.

b) As soon as I add content to the Left side it pushed the content of the right side down. I want the right side and the left side to be independent of each other but I want them to influence the height of the outside container.

Any ideas?

Cheers,
Andrew

2

Well, saved by Paul O’B yet again.

Thanks Kalon, donboe & SpacePhoenix for all the help.

Paul’s solution #1 was exactly what I was aiming for. At one point I thought that I could do it with a typical two column layout but I couldn’t figure out how to make the #left coloured box sit behind the #right one. It looks like the #inner container was the magic that makes it work. I’ll have to play with that some more.

Thanks a bunch. When I make it back to the UK, I owe you a pint :smiley:

I also really like the equalizing columns too. I’ve read quite a bit about those but haven’t had the opportunity to use them yet. Ya gotta love CSS!

Cheers,
Andrew

3

That explains a lot :slight_smile: How can overflow hidden defeats the purpose?

Anyway. The way I see it is this you have a left and a right div right? The width of the left div is 840px. But after that you declare that the content of that div should not be wider than 380px;


#left H3, #left p {
    width:380px;
    margin:20px;
}

Why not give the outer a background image width: 840px and make both divs floating.


#outside {
    position: relative;
    width:900px;
    margin:auto;
    text-align:left;
    border:solid 1px black;
	background: url(yourImage) repeat-y;
}
#left {
    width:340px;
	min-height:350px;
	margin-right: 90px;
	float: left;
	display: inline
}


#right {
	width:427px;
	min-height:343px;
	margin: 30px 0 50px;
    float: left; 
    background-color:#cad6e4;
}
4

Haha. That’s funny… I was thinking the same thing (using Javascript to set the height of the outside container).

There has to be a pure CSS method but I’m probably looking at it from the wrong direction.

5

Well we can’t use absolute positioning on the #left or #right div because when you set a container to absolute positioning, it no longer has influence on the container it is inside of and I want to make the #outside container stretch when either the #left or the #right container requires it.

This is a tricky one and I’m not sure what it’ll take to make it work.

BTW: Thanks for all the help on this :smiley:

6

The left and right divs will contain dynamic information so in some cases the left will be longer and in others the right will be longer. The outside container won’t have overflow hidden as that sort of defeats the purpose.

I want the outside to stretch if either left or right run longer that the outside container.

kalon’s first example but without overflow is the best approach so far but I have to figure out how to not have my #left or #right positioned absolutely.

The following example shows sort of what you might expect… The right side will influence the outside because it’s positioned relative.

The left side has no influence on the outside container that is the problem.


<!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" />
<title>Untitled Document</title>

<style type="text/css">

body {
    text-align:center;
}
#outside {
 position: relative;
    width:900px;
    margin:auto;
    text-align:left;
    border:solid 1px black;
}
#left {
    width:840px;
    position: absolute;
    top: 0px;
    left: 0px;
    min-height:350px;
    background-color:#f4f5f9;
}

#left H3, #left p {
    width:380px;
    margin:20px;
}

#right {
    position:relative; 
    left:430px; 
    top:30px; 
    width:427px; 
    min-height:343px; 
    padding:20px 16px;
    margin-bottom:50px;
    background-color:#cad6e4;
}

#right .picture {
    position:relative;
    float:right;
    top:38px;
}
 
</style>
</head>
<body>
 
<div id="outside">
<div id="left">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris consectetur feugiat convallis. Sed justo erat, consectetur vel vulputate eu, iaculis et leo. Phasellus risus libero, varius sed consequat sed, vulputate egestas lectus. Duis nisl velit, mattis a tincidunt in, ultricies a elit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam bibendum facilisis lorem ut gravida. Fusce feugiat enim at odio vulputate dapibus. Suspendisse nec ipsum non odio imperdiet aliquet ac vel orci. Duis tincidunt nibh quis neque bibendum sed vestibulum enim varius. Sed aliquam dolor non felis facilisis sagittis. Quisque gravida porta gravida. Duis ornare dui at libero lobortis pellentesque. Nullam vitae viverra magna. Donec ac elit tortor. Donec magna neque, dignissim sit amet rutrum non, elementum in justo. Integer sed nisl urna, vehicula aliquet massa. Praesent porttitor elementum arcu, eu eleifend nisi tempus posuere. </p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris consectetur feugiat convallis. Sed justo erat, consectetur vel vulputate eu, iaculis et leo. Phasellus risus libero, varius sed consequat sed, vulputate egestas lectus. Duis nisl velit, mattis a tincidunt in, ultricies a elit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam bibendum facilisis lorem ut gravida. Fusce feugiat enim at odio vulputate dapibus. Suspendisse nec ipsum non odio imperdiet aliquet ac vel orci. Duis tincidunt nibh quis neque bibendum sed vestibulum enim varius. Sed aliquam dolor non felis facilisis sagittis. Quisque gravida porta gravida. Duis ornare dui at libero lobortis pellentesque. Nullam vitae viverra magna. Donec ac elit tortor. Donec magna neque, dignissim sit amet rutrum non, elementum in justo. Integer sed nisl urna, vehicula aliquet massa. Praesent porttitor elementum arcu, eu eleifend nisi tempus posuere. </p>
</div>
<div id="right"> 
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris consectetur feugiat convallis. Sed justo erat, consectetur vel vulputate eu, iaculis et leo. Phasellus risus libero, varius sed consequat sed, vulputate egestas lectus. Duis nisl velit, mattis a tincidunt in, ultricies a elit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam bibendum facilisis lorem ut gravida. Fusce feugiat enim at odio vulputate dapibus. Suspendisse nec ipsum non odio imperdiet aliquet ac vel orci. Duis tincidunt nibh quis neque bibendum sed vestibulum enim varius. Sed aliquam dolor non felis facilisis sagittis. Quisque gravida porta gravida. Duis ornare dui at libero lobortis pellentesque. Nullam vitae viverra magna. Donec ac elit tortor. Donec magna neque, dignissim sit amet rutrum non, elementum in justo. Integer sed nisl urna, vehicula aliquet massa. Praesent porttitor elementum arcu, eu eleifend nisi tempus posuere. </p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris consectetur feugiat convallis. Sed justo erat, consectetur vel vulputate eu, iaculis et leo. Phasellus risus libero, varius sed consequat sed, vulputate egestas lectus. Duis nisl velit, mattis a tincidunt in, ultricies a elit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam bibendum facilisis lorem ut gravida. Fusce feugiat enim at odio vulputate dapibus. Suspendisse nec ipsum non odio imperdiet aliquet ac vel orci. Duis tincidunt nibh quis neque bibendum sed vestibulum enim varius. Sed aliquam dolor non felis facilisis sagittis. Quisque gravida porta gravida. Duis ornare dui at libero lobortis pellentesque. Nullam vitae viverra magna. Donec ac elit tortor. Donec magna neque, dignissim sit amet rutrum non, elementum in justo. Integer sed nisl urna, vehicula aliquet massa. Praesent porttitor elementum arcu, eu eleifend nisi tempus posuere. </p>
</div>

</div>

</body>
</html>
7

Well maybe… I’m not so sure. The text wouldn’t have ever overlapped in the example because I styled paragraph text to have a width of 380px:

#left H3, #left p {
width:380px;
margin:20px;
}

All the same, I consider myself to be pretty clever with CSS but I didn’t consider Paul’s solution of the addition of an #inner div with display: inline; that is a great solution. Otherwise I was all set to use your JavaScript solution until I figured this out.

Edit: I think I’ll go over to the SP bookstore and add CSS Anthology to my library along with the Ultimate CSS Reference.

Cheers,
Andrew

8

This is a bit trickier than I thought - well for me at least :frowning:

I was hoping overflow: hidden would work the same for postion styles as it does for float but it appears not to.

This would be very easy if your left and right divs did not have to overlap.

You could just use

 
#outside {
    text-align:left;
    border:solid 1px black;
    overflow: hidden
}
#left {
    float: left;
    width: 50&#37;;
    background-color: green;
}
#right {
    float: right;
    height: 200px;
    width: 49%; 
    background-color: blue;
}

and the outside div’s height would adjust to the taller of the 2 inner divs.

Do your 2 left and right divs have to overlap? I don’t see why you would want to hide the text of the left div where the right div is above it.

9

Thanks but that only hides the overflowed content of the left div… I would like it to make increase the outside container’s height.

10

You were too quick for me :slight_smile:

I added an edit in my original post adding

 
overflow: hidden

to #outside.

That should fix it.

11

Wow, that was fast thanks. I wasn’t expecting a response so quickly. The CSS forum rocks!

This is better that my original but the #left container (because it’s absolutely positioned) doesn’t influence the size of the outside container.

So I guess the question is how to do this without setting the #left container’s position to absolute. This illustrates the problem:


<!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" />
<title>Untitled Document</title>

<style type="text/css">

body {
    text-align:center;
}
#outside {
 position: relative;
    width:900px;
    margin:auto;
    text-align:left;
    border:solid 1px black;
}
#left {
    width:840px;
    position: absolute;
    top: 0px;
    left: 0px;
    min-height:350px;
    background-color: green;
}

#left H3, #left p {
    width:380px;
    margin:20px;
}

#right {
    position:relative; 
    left:430px; 
    top:30px; 
    width:427px; 
    min-height:343px; 
    padding:20px 16px;
    margin-bottom:50px;
    background-color: blue;
}
 
</style>
</head>
<body>
 
<div id="outside">
<div id="left">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris consectetur feugiat convallis. Sed justo erat, consectetur vel vulputate eu, iaculis et leo. Phasellus risus libero, varius sed consequat sed, vulputate egestas lectus. Duis nisl velit, mattis a tincidunt in, ultricies a elit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam bibendum facilisis lorem ut gravida. Fusce feugiat enim at odio vulputate dapibus. Suspendisse nec ipsum non odio imperdiet aliquet ac vel orci. Duis tincidunt nibh quis neque bibendum sed vestibulum enim varius. Sed aliquam dolor non felis facilisis sagittis. Quisque gravida porta gravida. Duis ornare dui at libero lobortis pellentesque. Nullam vitae viverra magna. Donec ac elit tortor. Donec magna neque, dignissim sit amet rutrum non, elementum in justo. Integer sed nisl urna, vehicula aliquet massa. Praesent porttitor elementum arcu, eu eleifend nisi tempus posuere. </p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris consectetur feugiat convallis. Sed justo erat, consectetur vel vulputate eu, iaculis et leo. Phasellus risus libero, varius sed consequat sed, vulputate egestas lectus. Duis nisl velit, mattis a tincidunt in, ultricies a elit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam bibendum facilisis lorem ut gravida. Fusce feugiat enim at odio vulputate dapibus. Suspendisse nec ipsum non odio imperdiet aliquet ac vel orci. Duis tincidunt nibh quis neque bibendum sed vestibulum enim varius. Sed aliquam dolor non felis facilisis sagittis. Quisque gravida porta gravida. Duis ornare dui at libero lobortis pellentesque. Nullam vitae viverra magna. Donec ac elit tortor. Donec magna neque, dignissim sit amet rutrum non, elementum in justo. Integer sed nisl urna, vehicula aliquet massa. Praesent porttitor elementum arcu, eu eleifend nisi tempus posuere. </p>
</div>
<div id="right">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris consectetur feugiat convallis. Sed justo erat, consectetur vel vulputate eu, iaculis et leo. Phasellus risus libero, varius sed consequat sed, vulputate egestas lectus. Duis nisl velit, mattis a tincidunt in, ultricies a elit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam bibendum facilisis lorem ut gravida. Fusce feugiat enim at odio vulputate dapibus. Suspendisse nec ipsum non odio imperdiet aliquet ac vel orci. Duis tincidunt nibh quis neque bibendum sed vestibulum enim varius. Sed aliquam dolor non felis facilisis sagittis. Quisque gravida porta gravida. Duis ornare dui at libero lobortis pellentesque. Nullam vitae viverra magna. Donec ac elit tortor. Donec magna neque, dignissim sit amet rutrum non, elementum in justo. Integer sed nisl urna, vehicula aliquet massa. Praesent porttitor elementum arcu, eu eleifend nisi tempus posuere. </p>
  
</div>


</div>


</body>
</html>
12

We can even do it with 2 equalising and matching column lengths (when either column stretches the other follows). :slight_smile:


<!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=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">
body {
    text-align:center;
}
#outside {
    position: relative;
    width:900px;
    padding:0 0 20px;
    margin:auto;
    text-align:left;
    border:solid 1px black;
    overflow:hidden;/* clear:float*/
}
#left {
    float:left;
    min-height:350px;
    width:375px;
    margin:-50px 0 -50px -400px;
    position:relative;
    display:inline;
}
#left H3, #left p {
    margin:20px;
}
#right {
    width:397px;
    min-height:343px;
    padding:20px 16px;
    margin:50px -50px 50px 0;
    background-color:#cad6e4;
    float:right;
    position:relative;
}
#inner {
    float:left;
    width:800px;
    margin:20px 0 1px 30px;
    background:#f4f5f9;
    display:inline;
    background:red;
}
</style>
</head>
<body>
<div id="outside">
    <div id="inner">
        <div id="right">
            <div id="left">
                <p>Left Column Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris consectetur feugiat convallis. Sed justo erat, consectetur vel vulputate eu, iaculis et leo. Phasellus risus libero, varius sed consequat sed, vulputate egestas lectus. Duis nisl velit, mattis a tincidunt in, ultricies a elit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam bibendum facilisis lorem ut gravida. Fusce feugiat enim at odio vulputate dapibus. Suspendisse nec ipsum non odio imperdiet aliquet ac vel orci. Duis tincidunt nibh quis neque bibendum sed vestibulum enim varius. Sed aliquam dolor non felis facilisis sagittis. Quisque gravida porta gravida. Duis ornare dui at libero lobortis pellentesque. Nullam vitae viverra magna. Donec ac elit tortor. Donec magna neque, dignissim sit amet rutrum non, elementum in justo. Integer sed nisl urna, vehicula aliquet massa. Praesent porttitor elementum arcu, eu eleifend nisi tempus posuere. </p>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris consectetur feugiat convallis. Sed justo erat, consectetur vel vulputate eu, iaculis et leo. Phasellus risus libero, varius sed consequat sed, vulputate egestas lectus. Duis nisl velit, mattis a tincidunt in, ultricies a elit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam bibendum facilisis lorem ut gravida. Fusce feugiat enim at odio vulputate dapibus. Suspendisse nec ipsum non odio imperdiet aliquet ac vel orci. Duis tincidunt nibh quis neque bibendum sed vestibulum enim varius. Sed aliquam dolor non felis facilisis sagittis. Quisque gravida porta gravida. Duis ornare dui at libero lobortis pellentesque. Nullam vitae viverra magna. Donec ac elit tortor. Donec magna neque, dignissim sit amet rutrum non, elementum in justo. Integer sed nisl urna, vehicula aliquet massa. Praesent porttitor elementum arcu, eu eleifend nisi tempus posuere. </p>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris consectetur feugiat convallis. Sed justo erat, consectetur vel vulputate eu, iaculis et leo. Phasellus risus libero, varius sed consequat sed, vulputate egestas lectus. Duis nisl velit, mattis a tincidunt in, ultricies a elit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam bibendum facilisis lorem ut gravida. Fusce feugiat enim at odio vulputate dapibus. Suspendisse nec ipsum non odio imperdiet aliquet ac vel orci. Duis tincidunt nibh quis neque bibendum sed vestibulum enim varius. Sed aliquam dolor non felis facilisis sagittis. Quisque gravida porta gravida. Duis ornare dui at libero lobortis pellentesque. Nullam vitae viverra magna. Donec ac elit tortor. Donec magna neque, dignissim sit amet rutrum non, elementum in justo. Integer sed nisl urna, vehicula aliquet massa. Praesent porttitor elementum arcu, eu eleifend nisi tempus posuere. </p>
            </div>
            <p>Right Column Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris consectetur feugiat convallis. Sed justo erat, consectetur vel vulputate eu, iaculis et leo. Phasellus risus libero, varius sed consequat sed, vulputate egestas lectus. Duis nisl velit, mattis a tincidunt in, ultricies a elit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam bibendum facilisis lorem ut gravida. Fusce feugiat enim at odio vulputate dapibus. Suspendisse nec ipsum non odio imperdiet aliquet ac vel orci. Duis tincidunt nibh quis neque bibendum sed vestibulum enim varius. Sed aliquam dolor non felis facilisis sagittis. Quisque gravida porta gravida. Duis ornare dui at libero lobortis pellentesque. Nullam vitae viverra magna. Donec ac elit tortor. Donec magna neque, dignissim sit amet rutrum non, elementum in justo. Integer sed nisl urna, vehicula aliquet massa. Praesent porttitor elementum arcu, eu eleifend nisi tempus posuere. </p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris consectetur feugiat convallis. Sed justo erat, consectetur vel vulputate eu, iaculis et leo. Phasellus risus libero, varius sed consequat sed, vulputate egestas lectus. Duis nisl velit, mattis a tincidunt in, ultricies a elit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam bibendum facilisis lorem ut gravida. Fusce feugiat enim at odio vulputate dapibus. Suspendisse nec ipsum non odio imperdiet aliquet ac vel orci. Duis tincidunt nibh quis neque bibendum sed vestibulum enim varius. Sed aliquam dolor non felis facilisis sagittis. Quisque gravida porta gravida. Duis ornare dui at libero lobortis pellentesque. Nullam vitae viverra magna. Donec ac elit tortor. Donec magna neque, dignissim sit amet rutrum non, elementum in justo. Integer sed nisl urna, vehicula aliquet massa. Praesent porttitor elementum arcu, eu eleifend nisi tempus posuere. </p>
        </div>
    </div>
</div>
</body>
</html>
13

I’m glad it’s finally sorted out :slight_smile:

I didn’t see your reply your to this question back in post no. 7

Do your 2 left and right divs have to overlap? I don’t see why you would want to hide the text of the left div where the right div is above it.

If you made it clearer that you didn’t actually want to hide any content by the overlapping div, like your original code did, I’m pretty sure you would have got your solution earlier.

Anyway, all’s well that ends well :slight_smile:

14

I haven’t been able to work out how to do it with only css so as a workaround I have resorted to “cheating” and use javascript as well.

 
<!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>
<style type="text/css">
 
body {
    text-align:center;
}
 
#outside {
    position: relative;
    width:900px;
    margin:auto;
    text-align:left;
    border:solid 1px black;
}
#left {
    width:840px;
    position: absolute;
    margin: 10px 0px 20px 0px;
    padding: 10px 0px 0px 0px;
    border: 5px solid red;
    top: 0px;
    left: 0px;
    min-height:350px;
    background-color: green;
}
 
#right {
    position:absolute; 
    left:430px; 
    top:30px; 
    width:427px; 
    min-height:343px; 
    margin: 10px 0px 0px 0px;
    padding: 10px 0px 0px 0px;
    border: 5px solid orange;
    background-color: blue;
}
 
</style>
<script type="text/javascript">
 
window.onload=function() {
    var leftDiv = document.getElementById("left");
    var rightDiv = document.getElementById("right");
  var outsideDiv = document.getElementById("outside");
 
    //get the total height of the left div
    var leftHeight = leftDiv.clientHeight + leftDiv.style.marginTop 
    + leftDiv.style.marginBottom + leftDiv.style.paddingTop 
    + leftDiv.style.paddingBottom + leftDiv.style.borderWidth;
 
    //get the total height of the right div
    var rightHeight = rightDiv.clientHeight + rightDiv.style.marginTop 
    + rightDiv.style.marginBottom + rightDiv.style.paddingTop 
    + rightDiv.style.paddingBottom + rightDiv.style.borderWidth;
    
    //set the height og the outside div to the tallest div
    outsideDiv.style.height = (leftHeight*1 > rightHeight*1)? leftHeight+'px' : rightHeight + 'px';
}
 
</script>
 
</head>
<body>
<div id="outside">
<div id="left"> 
Lorem ipsum dolor sit amet, tellus et. Molestie auctor nisl faucibus ut, lorem tortor mattis, fusce nullam enim fringilla vel. 
Mauris vitae gravida dolor praesent. Id in nascetur aut odio, nam et. Pede libero bibendum sit felis pretium sodales, fusce 
pharetra vestibulum bibendum morbi ultricies nullam, est nulla, id amet mollis. Nec consectetuer urna dapibus luctus ut, 
ipsum nascetur consequat dapibus dui ac molestie, est nascetur id nec nunc. Mi etiam mauris facilisi sed, nec ut id, 
aliquam non, taciti donec ut. Risus integer hymenaeos velit, nisl suspendisse sollicitudin ut, sed tempor sagittis curae dolor, 
volutpat massa ut sagittis. Voluptatem a enim, lobortis lectus volutpat, vitae vero diam purus morbi class, tristique donec 
ante sed, ac turpis dis dui vestibulum aut.<br /><br />
Tortor sit voluptatem pede sodales turpis hac, vel velit suscipit, luctus bibendum molestie lacinia neque. Porttitor ante 
turpis in voluptate vivamus autem, gravida magna amet porta praesent tincidunt at, nam enim sodales ante non, sit nunc 
posuere odio libero nibh ac. Amet id dignissim vehicula tempor et eros. Est hendrerit est quis, et viverra est class pede 
voluptas libero, sed mauris tincidunt, ultrices praesent. Iaculis vivamus sapien id, lorem ante aliquet, commodo pede imperdiet 
congue, dictum integer eget sed orci. Suscipit vitae quis, massa elit faucibus massa, interdum nam pharetra nulla sed, sollicitudin 
egestas, magna viverra.<br /><br />
Vitae quis risus enim. Suspendisse a nulla a, vestibulum eros suspendisse. Magna wisi a ad molestie dolor. Quam vel mollis nulla 
pharetra. Qui congue inceptos ut vehicula, feugiat ultricies in pellentesque eu, eros aliquid vel nec dis, risus quis feugiat 
vestibulum praesent at. Ut nam aenean eu, etiam nonummy etiam tortor, arcu augue urna proident donec mattis praesent, vel commodo 
nulla habitasse sapien ullamcorper condimentum. Ipsum nunc leo dictum magna molestie enim, lacus est, ante habitasse scelerisque 
dolor leo sodales erat, tristique dapibus nulla vehicula elementum mauris velit, felis a est. Eget sit erat eget arcu donec, 
montes varius. Volutpat nisl ligula in. Suspendisse nullam dictum suspendisse, ante quam tortor at sed eu. Condimentum pulvinar 
vestibulum condimentum mattis, vehicula vivamus eget enim in, integer penatibus lobortis eu, wisi sit augue libero eget erat magnis, 
velit lacus nascetur rutrum sed ac. Sem rutrum vitae sollicitudin, mauris mauris sit wisi.<br /><br />
Et elit nunc, aliquam rhoncus, cras ante est ac consequat, vitae lacinia curabitur pellentesque ipsum bibendum gravida. Arcu in nisl. 
Vivamus etiam viverra morbi nunc, neque cras ut placerat id pulvinar eget, dolor vel pede nunc duis. Amet mi egestas porta, leo est 
nec et, suscipit sed ipsum mauris vitae. Libero vulputate massa perspiciatis laborum ipsum, leo parturient dapibus accumsan, nec 
viverra luctus a. Qui sit lorem scelerisque purus lectus, aptent habitant nunc turpis duis, malesuada a nam mi litora. Duis sapien 
felis, eu aute quis, elit dignissim hymenaeos vel.
</div>
<div id="right"></div>
 
</div>
</body>
</html>
15

Hi,

I think I may be missing the whole point here but it sounds like you just want a 2 column layout with the right column sticking out a bit.

e.g.


<!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=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">
body {
    text-align:center;
}
#outside {
    position: relative;
    width:900px;
    margin:auto;
    text-align:left;
    border:solid 1px black;
    overflow:hidden;/* clear:float*/
}
#left {
    float:left;
    min-height:350px;
    width:375px;
}
#left H3, #left p {
    margin:20px;
}
#right {
    width:397px;
    min-height:343px;
    padding:20px 16px;
    margin:50px -50px 50px 0;
    background-color:#cad6e4;
    float:right;
    position:relative;
}
#inner {
    float:left;
    width:800px;
    margin:20px 0 20px 30px;
    background:#f4f5f9;
    display:inline;
}
</style>
</head>
<body>
<div id="outside">
    <div id="inner">
        <div id="left">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris consectetur feugiat convallis. Sed justo erat, consectetur vel vulputate eu, iaculis et leo. Phasellus risus libero, varius sed consequat sed, vulputate egestas lectus. Duis nisl velit, mattis a tincidunt in, ultricies a elit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam bibendum facilisis lorem ut gravida. Fusce feugiat enim at odio vulputate dapibus. Suspendisse nec ipsum non odio imperdiet aliquet ac vel orci. Duis tincidunt nibh quis neque bibendum sed vestibulum enim varius. Sed aliquam dolor non felis facilisis sagittis. Quisque gravida porta gravida. Duis ornare dui at libero lobortis pellentesque. Nullam vitae viverra magna. Donec ac elit tortor. Donec magna neque, dignissim sit amet rutrum non, elementum in justo. Integer sed nisl urna, vehicula aliquet massa. Praesent porttitor elementum arcu, eu eleifend nisi tempus posuere. </p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris consectetur feugiat convallis. Sed justo erat, consectetur vel vulputate eu, iaculis et leo. Phasellus risus libero, varius sed consequat sed, vulputate egestas lectus. Duis nisl velit, mattis a tincidunt in, ultricies a elit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam bibendum facilisis lorem ut gravida. Fusce feugiat enim at odio vulputate dapibus. Suspendisse nec ipsum non odio imperdiet aliquet ac vel orci. Duis tincidunt nibh quis neque bibendum sed vestibulum enim varius. Sed aliquam dolor non felis facilisis sagittis. Quisque gravida porta gravida. Duis ornare dui at libero lobortis pellentesque. Nullam vitae viverra magna. Donec ac elit tortor. Donec magna neque, dignissim sit amet rutrum non, elementum in justo. Integer sed nisl urna, vehicula aliquet massa. Praesent porttitor elementum arcu, eu eleifend nisi tempus posuere. </p>
        </div>
        <div id="right">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris consectetur feugiat convallis. Sed justo erat, consectetur vel vulputate eu, iaculis et leo. Phasellus risus libero, varius sed consequat sed, vulputate egestas lectus. Duis nisl velit, mattis a tincidunt in, ultricies a elit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam bibendum facilisis lorem ut gravida. Fusce feugiat enim at odio vulputate dapibus. Suspendisse nec ipsum non odio imperdiet aliquet ac vel orci. Duis tincidunt nibh quis neque bibendum sed vestibulum enim varius. Sed aliquam dolor non felis facilisis sagittis. Quisque gravida porta gravida. Duis ornare dui at libero lobortis pellentesque. Nullam vitae viverra magna. Donec ac elit tortor. Donec magna neque, dignissim sit amet rutrum non, elementum in justo. Integer sed nisl urna, vehicula aliquet massa. Praesent porttitor elementum arcu, eu eleifend nisi tempus posuere. </p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris consectetur feugiat convallis. Sed justo erat, consectetur vel vulputate eu, iaculis et leo. Phasellus risus libero, varius sed consequat sed, vulputate egestas lectus. Duis nisl velit, mattis a tincidunt in, ultricies a elit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam bibendum facilisis lorem ut gravida. Fusce feugiat enim at odio vulputate dapibus. Suspendisse nec ipsum non odio imperdiet aliquet ac vel orci. Duis tincidunt nibh quis neque bibendum sed vestibulum enim varius. Sed aliquam dolor non felis facilisis sagittis. Quisque gravida porta gravida. Duis ornare dui at libero lobortis pellentesque. Nullam vitae viverra magna. Donec ac elit tortor. Donec magna neque, dignissim sit amet rutrum non, elementum in justo. Integer sed nisl urna, vehicula aliquet massa. Praesent porttitor elementum arcu, eu eleifend nisi tempus posuere. </p>
        </div>
    </div>
</div>
</body>
</html>

I may have got the wrong end of the stick so if that’s not right then draw a picture of what you want as this sounds straight forward to me :slight_smile:

16

I think you should do what SpacePhoenix said. Make the left div float: left and set the absolute positioning on the right div:

<style type="text/css">

body {
    text-align:center;
}
#outside {
 position: relative;
    width:900px;
    margin:auto;
    text-align:left;
    border:solid 1px black;
	overflow: hidden
}
#left {
    width:840px;
    float: left;
    min-height:350px;
    background-color: green;
}

#left H3, #left p {
    width:380px;
    margin:20px;
}

#right {
	left:430px; 
    top:30px; 
    width:427px; 
    min-height:343px; 
    padding:20px 16px;
    margin-bottom:50px;
    background-color: blue;
	position: absolute;

}
 
</style>
17

The way your example is now (post #4), the left div contains the most content. Since the outer has overflow hidden it will stretch along with the left div. Or you have something else in mind, but then you should say so. We just anticipate on what you show us :wink:

18

Try using a full doctype, ie might be displaying it in “quirks mode”.

<!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" lang="en" xml:lang="en">

<head>
<meta http-equiv='Content-Type' content='text/html charset=utf-8'/>
<title>Testing</title>

<style type="text/css">
body {
    text-align:center;
}

#outside {
    width:900px;
    margin:auto;
    text-align:left;
    border:solid 1px black;
}

#left {
    width:840px;
    min-height:350px;
    float:left; /* otherwise the #right container will wrap */
    background-color:#f4f5f9;
}

#left H3, #left p {
    width:380px;
    margin:20px;
}

#right {
    position:relative; 
    left:430px; 
    top:30px; 
    width:427px; 
    min-height:343px; 
    padding:20px 16px;
    margin-bottom:50px;
    background-color:#cad6e4;
}

</style>
</head>

<body>

<div id="outside">

<div id="left"> </div>

<div id="right"></div>

<div style="clear:both"></div>

</div>

</body>
</html>
19

something like this?

 
<!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>
<style type="text/css">
 
body {
    text-align:center;
}
#outside {
 position: relative;
    width:900px;
    margin:auto;
    text-align:left;
    border:solid 1px black;
    overflow: hidden
}
#left {
    width:840px;
    position: absolute;
    top: 0px;
    left: 0px;
    min-height:350px;
    background-color: green;
}
#right {
    position:relative; 
    left:430px; 
    top:30px; 
    width:427px; 
    min-height:343px; 
    padding:20px 16px;
    margin-bottom:50px;
    background-color: blue;
}
 
</style>
</head>
<body>
 
<div id="outside">
<div id="left"> </div>
<div id="right"></div>
 
</div>
 
</body>
</html>