Arty Ziff Posted October 9, 2011 Share Posted October 9, 2011 I have a "wrapper" DIV that contains a collection of other, smaller DIVs that organize data. In addition to the collection of smaller DIVs, the "wrapper" DIV also has some text. I'd like all the smaller DIVs to "float" right, in a horizontal row, and have the text wrap nicely to the left. See my example here: www.SiliconSatan.com/dtest.php Any ideas on how to do this? NOTE: The content for my example is there to provide content (it's from Google's weather API), I could have also used "Lorem Ipsum" ... Quote Link to comment Share on other sites More sharing options...
sunfighter Posted October 9, 2011 Share Posted October 9, 2011 I left the boarder info in so you could see how div were arranged. <html> <head> <style type="text/css"> #wwrapper { position: relative; left: 150px; //border: blue solid 1px; height: 210px; width: 600px; } #overall { width: 395px; height: 200px; border: green solid 1px; display:block; float:right; } #inner, #inner2, #inner3, #inner4 { position:relative; float:left; margin-left: 5px; //border: red solid 1px; height: 150px; width: 90px; } </style> </head> <body> <div id="wwrapper" style="text-align:left;"> <div id="overall"> <div id="inner"> Sun<br> <img src="http://www.google.com/ig/images/weather/mostly_sunny.gif" alt=""><br> High: 61<br>Low: 49<br>Mostly Sunny </div> <div id="inner2"> Mon<br> <img src="http://www.google.com/ig/images/weather/rain.gif" alt=""><br> High: 56<br>Low: 49<br>Rain </div> <div id="inner3"> Tue<br> <img src="http://www.google.com/ig/images/weather/rain.gif" alt=""><br> High: 56<br>Low: 47<br>Rain </div> <div id="inner4"> Wed<br> <img src="http://www.google.com/ig/images/weather/chance_of_rain.gif" alt=""><br> High: 58<br>Low: 45<br>Chance of Showers </div> </div> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </div> </body> </html> Quote Link to comment Share on other sites More sharing options...
Arty Ziff Posted October 9, 2011 Author Share Posted October 9, 2011 Yup, I thought grouping the divs and than floating the container right would be the way to do it... THANKS! Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.