Welcome to WebmasterWorld Guest from

Forum Moderators: not2easy

Message Too Old, No Replies

form throwing elements out of whack

3:23 pm on Jul 11, 2007 (gmt 0)

5+ Year Member

I am trying to add a search form to the right of an image inside a div, and no matter how I try to style the form, it keeps pushing the elements below it out of whack.

Basically, I have a container div

#container {

padding: 0px 0px 0px 0px;
margin-top: 7px;
position: absolute;
right: auto;
left: auto;
width: 1008px;
height: 564px;
background-color: #FFF;
border-style: solid;
border-color: #000000;
border-width: 1px;

That contains another div which contains the masthead image of my page.

#masthead {
background-color: #FFFFFF;
width: 1008px;
height: 37px;
float: left;

Underneath the masthead div is another div which contains a menu

#navcontainer {
background-color: #FFFFFF;
position: relative;
height: 20px;

Within the masthead div, and to the right of the masthead image, I'd like to have a search form.

Any ideas on how to style the form so that it fits and does not throw the menu below it off?


4:48 pm on Jul 11, 2007 (gmt 0)

10+ Year Member

Are there any styles on form or input? Try adding form{display: inline;}. I've noticed that forms have their own default padding and margins that make subsequent elements not look as expected.
10:20 pm on Jul 11, 2007 (gmt 0)

5+ Year Member

thank you for this suggestion! It seems to have done the trick!

Featured Threads

Hot Threads This Week

Hot Threads This Month