Div sections shifts when i resize the window

Question

hello all

I have placed 2 divs side by side, one conatins the logo and second contains the text fields. when i view this page at larger resolution, everything is ok. but when i resize the window, the second div also gets shited and comes below the 1st div.

But i want them to stay there side by side, at any resolution. kindly provide the code solution for this.

thanks kk

Answer 1

basically the second div needs somewhere to go if it won't fit. In your case the only option is to crop so wrap the line in a div with overflow:hidden.

Answer 2

I guess you use float to position them next to each other. You can wrap around the two divs with another div of a minimum width you want the page to be viewed in. that will stop the second one from dropping below the first one

<div id="wrapper">
    <div id="logo">...</div>
    <div id="text">...</div>
</div>

style for it would be:

#wrapper { width: 980px; }
#wrapper div { float: left; }
#logo { width: 200px; }
#text { width: 780px; }

something like that. if someone resizes the window to be narrower than 980px (or uses lower screen res) then you'll get horizontal scroll.

//edit in response to comment you can use min-width to make it more flexible. will cause IE

#wrapper { min-width: 980px; }
#wrapper div { float: left; }
#logo { width: 200px; }
#text { min-width: 780px; }

min-width isn't supported by IE6 so you may need fix for that.

Answer 3

the second div slides below the first one because there is not enough width in the container to allow both of them to be placed side by side.

This can be remedied in two ways:

1. change the "overflow" property of the container node to "hidden" (or even overflow).
2. Set the "min-width" of the container. This approach however, is afflicted by special hacks required for IE. Also, a min-width approach usually cannot be done abruptly. It has to be planned from the start of page design.

Hope that helps.

cheers!