Two divs floating left and right: How can I keep them on the same level when a page resizes?
32,452
Solution 1
Set a min-width to your container:
#container {
min-width: 1000px;
}
Solution 2
Give the #container DIV a min-width: 1000px property, that way the parent will always be wide enough to hold both the children side-by-side.
Author by
aarona
Updated on November 05, 2020Comments
-
aarona over 3 years
Given the following HTML:
<!DOCTYPE html> <html> <body> <div id="container"> <div id="left" style="float: left; background-color: #777; width: 500px;"> Here is some content. Blah blah blah etc. <div style="height: 50px;">Some more content</div> And finally some more. </div> <div id="right" style="float: right; background-color: #aaa; width: 500px;"> Here is some content. Blah blah blah etc. <div style="height: 50px;">Some more content</div> And finally some more. </div> <div style="float: clear;"></div> </div> </body> </html>What can I do to
div#containeror another tag to preventdiv#rightfrom moving underdiv#leftwhen I resize the browser window such that the windows width is smaller then1000px? -
aarona over 13 yearsThat didn't do it. You should change your answer or remove the code. I appreciate the link though. I'll check it out.