Hi,
I’m trying to correct the display my site. Currently, when a browser window is set to “maximize” the page looks fine. When the browser window is set to “Restore Down”, and some of the width of the browser window is removed, the modules on my pages shift below content, or split apart and do not look correct.
Please see my site at: infinitesolutionsonline(.)com
I cannot even post my URL because of the intense anti-spam on this site. That’s ridiculous.
Please resize your browser window, so you may see what it is that I’m talking about. The modules I’m concerned with are the top left(subscribe) and top right(search) modules
How can I correct the position of these modules when the browser window is resized?
Any help is greatly appreciated. Thanks very much.
Ty
Everyone got tired of the spam, but yeah, I think newbs should be able to post links in the web design forum, as they often have them in their code when posting code (image urls, etc).
This may not seem terribly helpful at the moment, but before you do anything else, I urge you to throw your site (or a page of it) through the html validator and fix the validation errors. validator.w3.org
And then just because, go ahead and run your CSS through the CSS validator to check for any syntax errors. jigsaw.w3.org/css-validator
It’s a sure road to hair loss looking for bugs while you have invalid code. While fixing the invalid code may not fix your problem (I don’t think it affects your problem too much but I didn’t dig too deeply), it means anyone looking through your pages for bugs can rest assured that the problem isn’t caused by simple HTML or CSS errors.
Then we can take a closer look.
Hi, when the browser is smaller the input fields don’t have enough room to be on one line.
So thus one drops and increases the overall height of the form, which increases the overall height of the div holding it. Howeve,re you set height:105px and then overflow:hidden; on the div containing the form, so anything over 105px is going to be chopped off, which is what is happening :). On “div#header_r” remove the height 
Or the box holding the inputs set always wide enough so they don’t drop.
I was also unclear how wide was wide enough as far as the browser. I have 16" on hubby’s laptop now.
The biggest the screen can be while the issue still appears is 910px (for me)
I have a 20 inch monitor 
The closest parent of the form has a 20% width (sidebar div) so … yeah
You guys are awesome! 
I’ve removed overflow:hidden and increased the width of div.search input to 55%… This looks pretty accurate! :D:D
The only thing I dislike now is that the search & find bar moves toward the center of the page with the browser window reduced…
But I can live with that.
Thank you very much Stomme poes & RyanReese!
PS - I will also validate my site very soon. Thanks for that recommendation!
Goodluck in 2010 RyanReese!
Glad it worked, thanks and you’re welcome :).
This is also a related issue, so I thought I’d ask:
The text now shifts above the images on the left side when the browser is restored down. I’ve applied margin and padding to the div containing the text, however I’m not getting results I’m looking for.
Here is an example of the current issue:
infinitesolutionsonline(.)com/internet-services.html
Notice, with the page at maximize, the alignment is centered. When the page is restored down, the text overlays the images on the left.
Now, please see:
infinitesolutionsonline(.)com/computer-repair-and-maintenance.html
Here, I’ve applied:
#computermargin {
margin-left:5%;
margin-top:-5%;
padding-left:5%;
}
When the page is reduced down, the text looks almost decent. With the page set to maximize, the text has too much distance from left side.
How can I get the best of both worlds?
Thanks for the help.
Ty