Floating Second Element Right W/o Specifying Width Of First?
(Apologies for the title. The problem is much more easily demonstrated than named.) I have two elements: a content container (#content) and an ads container (#ads). The content co
Solution 1:
if you're not scared of css3 (basically meaning, you don't have to bother about ie) this is indeed possible:
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.container{display:-moz-box; -moz-box-orient:horizontal; width:500px; background:yellow;}
.content{-moz-box-flex:1; background:red;}
.ads{background:blue; width:100px;}
</style>
</head>
<body>
<p>with ads:</p>
<div class="container">
<div class="content">content</div>
<div class="ads">ads</div>
</div>
<p>without ads:</p>
<div class="container">
<div class="content">content</div>
</div>
</body>
</html>
this is firefox only, be sure to apply the corresponding vendor prefixes (-webkit-, -o-) for other browsers. to make this work in ie though there will be some javascript to write.
Solution 2:
requirements 1 & 3 are contradicting each other. if you want that #ads follows #content in the source and not provide width to #content then ads will be shown below the content and not in the right.since #content doesn't have width it will occupy full width of container. I think you need to give away with requirement 1.The way it is done now is absolutely fine.
Post a Comment for "Floating Second Element Right W/o Specifying Width Of First?"