How to position a sibling child div in previous sibling container?

HTML & CSS
1

This is a hard one to explain so I’ve created a couple of illustrations to show what I have now and what I’m need to achieve when done.

First, here’s the layout I currently have (green block is .content container, blue block is .sidebar container) …

And here’s what my intended layout will be after applying the right css…

Here’s is the markup, which is fixed, so all I can do is use css to make the layout flow like i want…

<div class="main">
	<div class="content">
		<h1 class="posttitle">Welcome to our website!</h1>
		<p class="excerpt">Some excerpt text</p>
		<div class="entry">
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vulputate pellentesque justo, at interdum leo congue sit amet. Donec feugiat, urna id malesuada euismod, leo tellus ultrices nulla, non mattis mauris libero eu nibh. Nulla bibendum faucibus adipiscing. Integer vel libero eget erat molestie tincidunt. Proin ultrices ultrices tempus.</p> 
			<p>Pellentesque a aliquam tellus. Sed cursus mi nec libero suscipit ultricies. Morbi id mi eu lectus vehicula euismod. Nunc a lorem lacus. Donec euismod pharetra egestas. Maecenas ac facilisis augue. Sed lobortis dictum ornare. Etiam non auctor metus. In aliquet euismod turpis, non iaculis risus dapibus nec. Integer ut enim tortor. Nullam vehicula consectetur sem a dapibus. Phasellus adipiscing metus leo. Nulla tempus elit id mi rutrum rutrum.</p> 
		</div>
	</div>
	<div class="sidebar">
		<div class="sb2 menu side widget_text">
			<h4 class="sidebarTitle">Our Specialists</h4>			
			<div class="textwidget">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras at consequat mauris. Suspendisse sollicitudin dolor rhoncus risus adipiscing vitae blandit ante malesuada. Vestibulum erat metus, gravida nec porta sit amet, tempor vitae tortor. Donec vestibulum mattis mauris id adipiscing. Aliquam nisi lorem, ornare at molestie mattis, vestibulum sed justo. Sed a ligula ligula. Donec rhoncus, ipsum non accumsan feugiat, purus metus lobortis enim, vel sagittis nisl tellus fermentum risus.
			</div> 
		</div>
		
		<div class="sb3 menu side widget_text">
			<h4 class="sidebarTitle">Our Services</h4>			
			<div class="textwidget">
				<ul> 
					<li>Service One</li> 
					<li>Service Two</li> 
					<li>Service Three</li> 
					<li>Service Four</li> 
					<li>Service Five</li> 
					<li>Service Six</li> 
					<li>Service Seven</li> 
				</ul>
			</div> 
		</div>
	</div>
</div>

And here is the current css for those elements…

.main {width:967px; margin:0 auto;position:relative;}

.content {background:#fff; border-radius:15px; -moz-border-radius:15px; margin-top:-50px; width:640px; float:left; padding:10px 20px; }

.sidebar {float:right; border-radius:15px; -moz-border-radius:15px; margin-top:-50px; width:230px; padding:10px 20px; background:url(spot.gif); color:#fff;}

.sidebar h4 {font-size:1.5em;padding:0;margin:5px 0 5px 0; border-bottom:1px solid #fff}

.sidebar .sb2 .textwidget {background:url(people.png) no-repeat; padding-top:160px;}

Since the sb2 div is not contained in the content div, is my only option to absolutely position the sb2 div in its intended place or is there a way to do it in flow?

2

Hi Scott,

Basically if you move sb2 with a negative margin and drag it into the content area it will just overlap as though you had absolutely positioned it. It will not take part in the flow.

You can of course adjust the content text to stay clear of the moved element but it will just be like having content next to an absolute element.

The only close solution is to use display:table-cell to create 3 cells across which will all take part in the flow but will not interact with each other though.


<!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">
.main {
    width:967px;
    margin:0 auto;
    position:relative;
    display:table;
}
.content {
    background:#fff;
    border-radius:15px;
    -moz-border-radius:15px;
}
.sidebar {
    color:#fff;
}
.sidebar h4 {
    font-size:1.5em;
    padding:0;
    margin:5px 0 5px 0;
    border-bottom:1px solid #fff
}
.sidebar .sb2 .textwidget {
    background: url(people.png) no-repeat;
    padding-top:160px;
}
.content, .sidebar {
    display:inline;
display:table-cell;/* ie8 needed this*/
}
.entry {
    width:300px;
    display:table-cell;
    background:yellow;
    padding:10px 20px;
    border-radius:15px;
    -moz-border-radius:15px;
}
.sb2, .sb3 {
    width:230px;
    display:table-cell;
    padding:10px 20px;
    border-radius:15px;
    -moz-border-radius:15px;
}
.sb2 {background:green;}
.sb3 {background:blue;}
</style>
</head>
<body>
<div class="main">
    <div class="content">
        <h1 class="posttitle">Welcome to our website!</h1>
        <p class="excerpt">Some excerpt text</p>
        <div class="entry">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vulputate pellentesque justo, at interdum leo congue sit amet. Donec feugiat, urna id malesuada euismod, leo tellus ultrices nulla, non mattis mauris libero eu nibh. Nulla bibendum faucibus adipiscing. Integer vel libero eget erat molestie tincidunt. Proin ultrices ultrices tempus.</p>
            <p>Pellentesque a aliquam tellus. Sed cursus mi nec libero suscipit ultricies. Morbi id mi eu lectus vehicula euismod. Nunc a lorem lacus. Donec euismod pharetra egestas. Maecenas ac facilisis augue. Sed lobortis dictum ornare. Etiam non auctor metus. In aliquet euismod turpis, non iaculis risus dapibus nec. Integer ut enim tortor. Nullam vehicula consectetur sem a dapibus. Phasellus adipiscing metus leo. Nulla tempus elit id mi rutrum rutrum.</p>
        </div>
    </div>
    <div class="sidebar">
        <div class="sb2 menu side widget_text">
            <h4 class="sidebarTitle">Our Specialists</h4>
            <div class="textwidget">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras at consequat mauris. Suspendisse sollicitudin dolor rhoncus risus adipiscing vitae blandit ante malesuada. Vestibulum erat metus, gravida nec porta sit amet, tempor vitae tortor. Donec vestibulum mattis mauris id adipiscing. Aliquam nisi lorem, ornare at molestie mattis, vestibulum sed justo. Sed a ligula ligula. Donec rhoncus, ipsum non accumsan feugiat, purus metus lobortis enim, vel sagittis nisl tellus fermentum risus. </div>
        </div>
        <div class="sb3 menu side widget_text">
            <h4 class="sidebarTitle">Our Services</h4>
            <div class="textwidget">
                <ul>
                    <li>Service One</li>
                    <li>Service Two</li>
                    <li>Service Three</li>
                    <li>Service Four</li>
                    <li>Service Five</li>
                    <li>Service Six</li>
                    <li>Service Seven</li>
                </ul>
            </div>
        </div>
    </div>
</div>
</body>
</html>

Couldn’t really see any other way apart from absolutely positioning it.

3

Paul, I agree. I had already set it to absolute but just wanted to make sure its as bulletproof as possible as is.

I don’t know why, but I always feel like if I’m not in the flow, I’m cheating :slight_smile:

BTW, are you published? Cederholm is good but I’d guess even he could learn a few tricks from you :wink:

4

The Ultimate CSS Reference - SitePoint Books

5

Uhm, instead of APo why not just float SB1 left and give it a negative margin to slide it over? Then SB2 will just ride up into it’s proper position alongside it’s floated sibling.

Nevermind – missed the wrapping behavior… Shouldn’t post after being awake 20 hours.