Divs are offset when I resize the window
I have placed 2 divs side by side, one containing the logo and the other containing the text boxes. When I view this page in high resolution everything is fine. But, when I resize the window, the second div also shrinks and drops below the 1st div.
But I want them to stay there side by side at any resolution. kindly provide this code solution.
I assume you are using floats to position them next to each other. You can wrap another div around the two divs with the minimum width you want the page to view. which will stop the second shot below the first
<div id="wrapper">
<div id="logo">...</div>
<div id="text">...</div>
</div>
for him:
#wrapper { width: 980px; }
#wrapper div { float: left; }
#logo { width: 200px; }
#text { width: 780px; }
something like that. if someone resizes the window to 980px (or uses a lower screen resolution) you get horizontal scrolling.
// edit in response to comment you can use minimum width to make it more flexible. will call IE
#wrapper { min-width: 980px; }
#wrapper div { float: left; }
#logo { width: 200px; }
#text { min-width: 780px; }
min-width is not supported by IE6, so you might need a fix for this.
a source to share
the second slides div is below the first because there is not enough width in the container for both of them to fit side by side.
There are two ways to fix this:
- change the "overflow" property of the node container to "hidden" (or even overflow).
- Set the "minimum width" of the container. However, this approach suffers from special hacks required by IE. Also, the minimum width approach usually cannot be done overnight. It should be planned from the very beginning of the page design.
Hope it helps.
Hooray!
a source to share
I tried to keep the total width 1% less (1% unused) of the total of both divs ... seems to work for me :) Myabe helpful to someone.
CSS
#Content {
width: 100%;
height: auto;
margin-top: 26px;
float: left;
}
#ContentLeft {
margin-left: 5px;
float: left;
width: 19%;
}
#ContentMain {
width: 80%;
margin-right: 5px;
float: right;
}
HTML:
<html>
<body>
<div id="Content">
<div id="ContentLeft">Left menu</div>
<div id="ContentMain">Here goes the bigger content</div>
</div>
</body>
</html>
a source to share