CODEWITHSUNDEEP
htmlcss
Johnny Chen
Johnny Chen

Reputation: 2070

How to make div block fixed as window size changes?

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/

Upvotes: 1

Views: 8821

Answers (4)

webkit
webkit

Reputation: 3369

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

Upvotes: 2

Abijeet Patro
Abijeet Patro

Reputation: 2884

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.

Upvotes: 1

AeJey
AeJey

Reputation: 1457

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/

Upvotes: 1

George
George

Reputation: 36784

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

Upvotes: 1

Related Questions