How to make div block fixed as window size changes? - html

Question

Here's my html and css code :
<div id="navigation_header">
.....<br>
.....<br>
.....<br>
</div>
<div id="main_page">
**********
</div>
#navigation_header {
float:left;
}
#main_page {
float:left;
}
As you can see ,the main_page is right to the navigation bar.
However when I resize the browser window , as the width goes smaller , the main_page will appear at the bottom of navigation bar.
How can I make the main page fixed right to navigation bar as I change the window size.
PS: I created a fiddle for this, check it http://jsfiddle.net/E83dH/

Answer 1

For what you want you should wrap both elements with a DIV and style with a min-width:
.wrap { width:100%; min-width:300px;} // * min-width should be the combined width of both elements.
http://jsfiddle.net/T87q5/
check out the demo

Answer 2

Rather than float your #main_page, give it an overflow property. It will take up all of and only the available width.
#main_page {
overflow:hidden;
}
JSFiddle

Answer 3

You have to provide % width if you want to change the size of div too according to the screen width.
Here is the css
#navigation_header {
float:left;
width:30%;
}
#main_page {
float:left;
width:70%;
}
You can check it here [jsfiddle]http://jsfiddle.net/E83dH/1/

Answer 4

What I would suggest you do instead is put both things inside a container and give the container a min width. Infact give all your div's a min-width
http://jsfiddle.net/E83dH/3/
HTML
<div class='container'>
<div id="navigation_header">.....
<br>.....
<br>.....
<br>
</div>
<div id="main_page">**********</div>
</div>
CSS
#navigation_header {
float:left;
}
#main_page {
float:left;
}
.container {
min-width:300px;
}
This will ensure that you get a scrollbar at the bottom but the second div doesn't come below. Note that the min-width should be the sum width of the two elements at the point when the second element comes below the first.