rassul Posted March 21, 2013 Share Posted March 21, 2013 Hi, I have a fluid layout that expands/shrinks as changing the browser's width. The issue is when I make the browser's width narrower then boxes fall apart. Your help is appreciated with perhaps some explanation. Pictures are attached for further help. Thanks in advance. <!DOCTYPE html><html><head> <meta charset="utf-8"> <title></title> <style type="text/css" media="screen"> * { margin: 0; padding: 0; } #container { width: 80%; height: 300px; margin-left: auto; margin-right: auto; background: gray; } #header { height: 65px; background: #FF6600; text-align: center; } #content { height: 190px; width: 70%; float: left; background: ##FFFF66; min-width: 300px; } #side { width: 29%; height: 190px; float: right; background: #A3C266; min-width: 100px; } #footer { clear: both; height: 35px; background: #FFA366; } ul { list-style-type: none; padding: 10px;} p {text-align: center;} #content p {text-align: left; padding: 5px;} </style></head><body> <div id="container" > <div id="header"> <h1>This is a test</h1> <h3>April 3, 2013</h3> </div> <div id="content"> <p>Lorem ipsum Etiam eget dui. Aliquam erat volutpat. Sed at lorem in nunc porta tristique. Proin nec augue.</p> </div> <div id="side"> <ul> <li> <a href="#">Item 1</a> </li> <li> <a href="#">Item 2</a> </li> <li> <a href="#">Item 3</a> </li> <li> <a href="#">Item 4</a> </li> </ul> </div> <div id="footer"> <p>University</p> </div></div> </body></html> Link to comment Share on other sites More sharing options...
Ingolme Posted March 21, 2013 Share Posted March 21, 2013 Assign a min-width to the container Link to comment Share on other sites More sharing options...
deldalton Posted March 21, 2013 Share Posted March 21, 2013 Assign a min-width to the container Exactly! ... Link to comment Share on other sites More sharing options...
rassul Posted March 21, 2013 Author Share Posted March 21, 2013 Resolved, thanks to both of you, deldalton and Ingolme. 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