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><htmllang="en-US"><head><metacharset="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><divclass="container"><divclass="content">content</div><divclass="ads">ads</div></div><p>without ads:</p><divclass="container"><divclass="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?"