Snowl Posted March 12, 2010 Share Posted March 12, 2010 How can I float a div in the center and have another div next to it <style type="text/css"> .mcontainer{ background-color: #fff; width: 525px; margin-left: 9px; padding: 10px; border: 1px solid black; float: center; } .scontainer{ background-color: #fff; width: 250px; height: 400px; margin-left: 9px; padding: 10px; border: 1px solid black; float: right; } </style> <div class="scontainer">lalal</div> <div class="mcontainer"> <iframe name="mcc" id="mcc" src="[url="http://google.com"]http://google.com[/url]" width="100%" height="400px" frameborder="0" allowtransparency="yes" scrolling="No"></iframe> </div> </div> but have "mcontainer" in the center and have "scontainer" on its immdiate right? Thanks. Link to comment Share on other sites More sharing options...
0 sweetsam Posted March 12, 2010 Share Posted March 12, 2010 markup... <div id="scontainer"> </div> <div id="mcontainer"> </div> css... #scontainer { float : right; width: 400px; } #mcontainer { margin-right: 400px; } Link to comment Share on other sites More sharing options...
0 Snowl Posted March 12, 2010 Author Share Posted March 12, 2010 That's not what I want, sorry. I mean something like this ............[----------][----] ............[----------][----] ............[----------][----] So one div is in the center and the other div on the side right next to it Link to comment Share on other sites More sharing options...
0 jordan. Posted March 12, 2010 Share Posted March 12, 2010 Probably would need to use absolute positioning. Is the centred div fixed width? If so, centre the first div like you would normally do. Then for the side div, give it this: #sidediv { position: absolute; left: 50%; margin-left: half-the-width-of-centred-div; } That should work. Link to comment Share on other sites More sharing options...
0 sweetsam Posted March 12, 2010 Share Posted March 12, 2010 Is this the kind of layout you are after ? Link to comment Share on other sites More sharing options...
Question
Snowl
How can I float a div in the center and have another div next to it
<style type="text/css"> .mcontainer{ background-color: #fff; width: 525px; margin-left: 9px; padding: 10px; border: 1px solid black; float: center; } .scontainer{ background-color: #fff; width: 250px; height: 400px; margin-left: 9px; padding: 10px; border: 1px solid black; float: right; } </style> <div class="scontainer">lalal</div> <div class="mcontainer"> <iframe name="mcc" id="mcc" src="[url="http://google.com"]http://google.com[/url]" width="100%" height="400px" frameborder="0" allowtransparency="yes" scrolling="No"></iframe> </div> </div>but have "mcontainer" in the center and have "scontainer" on its immdiate right?
Thanks.
Link to comment
Share on other sites
4 answers to this question
Recommended Posts