denno020 Posted January 31, 2011 Share Posted January 31, 2011 I'm trying to create a content page which will have a div in the top left corner of a wrapper, which I've floated to the left, so as to have text 'wrap' around it. However, I also want a div in the top right corner, but I'm not sure how to go about doing this? I've tried adding a div directly after the first one thats in the left corner, and then floating that to the right, however that doesn't appear to work. I've attached a picture of what I'm talking about. The black box is the wrapper. The red box is the div floated to the left. The green is the div that I want to appear in the top right hand corner, and the blue is the box that I would like the text to fit in. As you can see, when it gets to be below the height of the divs, it should then expand to use the whole width of the wrapper. How would I be able to achieve this? Cheers Denno [attachment deleted by admin] Quote Link to comment https://forums.phpfreaks.com/topic/226200-div-in-top-right-and-top-left-corner-with-text-in-middle-floats/ Share on other sites More sharing options...
cssfreakie Posted January 31, 2011 Share Posted January 31, 2011 well i think this is what you are looking for. pay attention to the order of the elements btw in the html part that is. css: body{ text-align: center; } #wrapper{ border:1px dotted grey; width:960px; margin:0 auto; } #left{ border: 1px dotted blue; width: 150px; height: 150px; float:left; } #right{ border: 1px dotted red; width: 150px; height: 150px; float:right; } p{ text-align: justify; } html markup <body> <div id="wrapper"> <div id="left"></div> <div id="right"></div> <p>Loads of text here.</p> </div> </body> working example here: http://cssfreakie.webege.com/divs.php good luck with it! P.s. you can of-course give the little blocks some margin to create more space around them. Quote Link to comment https://forums.phpfreaks.com/topic/226200-div-in-top-right-and-top-left-corner-with-text-in-middle-floats/#findComment-1167889 Share on other sites More sharing options...
denno020 Posted February 1, 2011 Author Share Posted February 1, 2011 That's awesome man! Thanks heaps. I don't know why it wouldn't work for me when trying :S. Thanks for providing the working example too, very helpful. Denno Quote Link to comment https://forums.phpfreaks.com/topic/226200-div-in-top-right-and-top-left-corner-with-text-in-middle-floats/#findComment-1168135 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.