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;
}
(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.
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/
加载中,请稍侯......
精彩评论