How to get blue div
in line of yellow div
without changing the html and without using negative top margin
on blue div
?
css
<style type="text/css">
#main {width:600px;border:1px solid red;overflow:hidden;height:800px}
.float-left {width:200px;height:100px}
#right-side {float:right;background:blue;width:400px}
#one {background:yellow}
#two {background:green}
#three {background:brown}
#four {background:orange}
</style>
html
<div id="main">
<div class="float-left" id="one">
开发者_StackOverflow中文版 <img width="129" height="150" alt="" src="jmg.jpg">
</div>
<div class="float-left" id="two">bbbbbbb, Abbbbbbb</div>
<div class="float-left" id="three">+77 (0) 778 16887 399</div>
<div class="float-left" id="four"><a href="mailto:ccc@cccc.com">ccccc@cccc.com</a></div>
<div id="right-side">
<p>hello how are you.</p>
<p>i'm fine</p>
</div>
</div>
See live example here http://jsbin.com/uvuyo3/3
position: relative the container, then absolutely position that blue div top right
http://jsbin.com/uvuyo3/4/
If the left column will always be 200px wide, you can absolutely position it:
#main {width:600px;border:1px solid red;overflow:hidden;height:800px;position:relative;}
.float-left {width:200px;height:100px}
#right-side {float:right;background:blue;width:400px;position:absolute;left:200px;top:0;}
Don't forget the position:relative;
on #main
.
精彩评论