I have two divs: one is floated left and the other right. The div on the right is a constant size, but I want the div on the left to change it's width according to the window size. I currently have the width set to 75%, which looks great at a certain size. However, when the window get's relatively large, the space in between the two divs becomes too large. How can I set the width of the div on the left so that it's distance from the div on the right is constant, regardless of window size?
2 Answers
Set the left-most div's width to 100% and give it a margin-right the same width as the right div. Then make the right div's position absolute and fix it to the top-right corner of the page.
1 Comment
jaypeagi
Also worth adding a
word-wrap: break-word; to save this breaking with long words/urls. CSS3 only unfortunately.You can set the left floating div to 100% and give it a margin as wide as the right floating div. That should work
Like this jsfiddle
4 Comments
jaypeagi
float: right can be unpredictable in IE 7 and below - in my experience at least!
bart s
"and below" you mean IE 6? IMHO if webpages must remain compatible with IE7 and below we also cannot use HTML5, no video tags etc.
jaypeagi
Depends on the context of the website. At work I have to ensure webpages are functional in IE7. Also, many HTML5 features degrade nicely in older browsers. Not a reason not to use it, but worth baring in mind!
bart s
I design a webapp on iPod and iPad and even though it is mobile safari you might think you can fully test on desktop safari (windows) or chrome (both webkit browsers)... well ... NOT. Some features in mobile safari are not working in desktop safari... browser hell