CSS to place a div within an area of another (not parent) div_问答_开发者

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

开发者 https://www.devze.com 2023-01-24 23:13 出处：网络

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 div

相关专题：css layout

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/

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

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

精彩评论

关注公众号

热门标签

图文推荐

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

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

更多 问答 相关资讯：

精彩评论

关注公众号

热门标签

图文推荐

更多问答相关资讯：