ben03 Posted February 21, 2016 Share Posted February 21, 2016 Hi, Am sure this should be relatively straight forward, but have looked at it too long... I am trying to get 2 divs to sit next to each other within a parent container. The second div drops to the line below currently. I don't want to set a width on the parent container as the site is responsive. How would I achieve this correctly? Thanks in advance! Link to comment Share on other sites More sharing options...
Sunamena Posted February 21, 2016 Share Posted February 21, 2016 HTML<div id="wrapper"> <div id="leftone"> CONTENT </div> <div id="rightone"> CONTENT </div></div>CSS#wrapper {width:100%;}#leftone {width:50%;}#rightone {width:50%; float:right;} I think that is what you are looking for? Link to comment Share on other sites More sharing options...
ben03 Posted February 23, 2016 Author Share Posted February 23, 2016 Ah sweet thanks for this. I won't be able to use the witch values used here but perhaps only giving the right div a float will do the job... Will give it a go... Link to comment Share on other sites More sharing options...
davej Posted February 24, 2016 Share Posted February 24, 2016 The trick is that it doesn't really work, because of rounding problems, so cheating is involved. Link to comment Share on other sites More sharing options...
ben03 Posted February 24, 2016 Author Share Posted February 24, 2016 Ok no that didn't work. Maybe I will have to assign widths and then percentages on smaller browsers. I tried giving both 'display:inline-block' but it was having none of it. If anyone can think of a better solution, let me know. Thanks for the help though! Link to comment Share on other sites More sharing options...
Sunamena Posted February 25, 2016 Share Posted February 25, 2016 In this topic they suggested to let them all float to the left or right within a parent division: http://w3schools.invisionzone.com/index.php?showtopic=44996 Link to comment Share on other sites More sharing options...
dsonesuk Posted February 25, 2016 Share Posted February 25, 2016 Post #2 won't work because you are placing a floated element AFTER a non floated block element, the non floated block element will do what it is supposed to do by forcing any element following it down, it does not matter if its width only covers half or quarter of its parents width compared with following sibling being half the width, stacking will occur. 1 Link to comment Share on other sites More sharing options...
dsonesuk Posted February 25, 2016 Share Posted February 25, 2016 <!DOCTYPE html> <html> <head> <style> #wrapper {/*width:100%; not required because ITS A BLOCK ELEMENT */ } #leftone { background-color: red; float:left; } #rightone { background-color: blue; } </style> </head> <body> <div id="wrapper"> <div id="leftone"> CONTENT </div> <div id="rightone"> CONTENT </div> </div> </body> </html> floating leftone first, fixes the stacking problem, note because the following element is block element it fills the remaining area available to it, you could apply float: left; to rightone which cause it to remain butted to leftone but because has no defined width set and floated it will shrink to content within it. <!DOCTYPE html> <html> <head> <style> #wrapper {/*width:100%; not required because ITS A BLOCK ELEMENT */ font-size:0; } #wrapper > div {display: inline-block; font-size: 16px;} #leftone { background-color: red; } #rightone { background-color: blue; } </style> </head> <body> <div id="wrapper"> <div id="leftone"> CONTENT </div> <div id="rightone"> CONTENT </div> </div> </body> </html> Link to comment Share on other sites More sharing options...
ben03 Posted March 4, 2016 Author Share Posted March 4, 2016 Thanks for the help with this Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now