CODEWITHSUNDEEP
csslayout
Mike
Mike

Reputation: 325

CSS to place a div within an area of another (not parent) div

Having some CSS troubles and hoping someone can help me. I'm trying to place #aside to the right of #landing but they don't share the same parent. Unfortunately I can't alter the structure of the divs (otherwise I'd put #aside within #container and it's all fixed), so looking for another solution.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<head> 
    <title>Test Layout</title> 
    <link rel="stylesheet" type="text/css" href="temp.css" /> 
</head>
<body>
    <div id="main">
        Main
        <div id="container">
            Container
            <div id="content">
                Content - Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                <div id="landing">
                Landing
                </div>
            </div>
        </div>
        <div id="aside">
            Aside
        </div>
    </div>
</body> 
</html>

CSS:

#main {
    height: auto;
    width: 988px;
    background-color: aqua;
}

#container {
    height: auto;
    width: 988px;
    background-color: blue;
}

#content {
    height: auto;
    width: 988px;
    background-color: fuchsia;
    float: left;
}

#landing {
height: auto;
width: 632px;
padding-right: 20px;
background-color: green;
float: left;
}

#aside {
    height: auto;
    width: 316px;
    border-left: 1px solid black;
    background-color: maroon;
    float: right;
}

Upvotes: 0

Views: 147

Answers (2)

David Thomas
David Thomas

Reputation: 253486

(This is intended more as a comment than an answer, but was a little too long to be inserted as a comment.)

The easiest way to do this is to use JavaScript, jQuery in particular offers the chance to apply:

$(document).ready(
  function(){
    $('#aside').insertAfter('#landing');
  });

If you must use CSS only, then as @Jere notes, you're stuck using negative margins.

Upvotes: 1

Diodeus - James MacFarlane
Diodeus - James MacFarlane

Reputation: 114417

I would use margin-top to nudge it up:

#aside {
    height: auto;
    width: 316px;
    border-left: 1px solid black;
    background-color: maroon;
    float: right;
    margin-top:-20px
}

See: http://jsfiddle.net/RHUPm/

Upvotes: 0

Related Questions