Welcome to WebmasterWorld Guest from 54.145.65.62

Forum Moderators: not2easy

Message Too Old, No Replies

form throwing elements out of whack

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

New User

10+ Year Member

joined:June 27, 2006
posts:20
votes: 0


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?

thanks

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

Preferred Member

10+ Year Member

joined:Apr 22, 2003
posts:441
votes: 0


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 July 11, 2007 (gmt 0)

New User

10+ Year Member

joined:June 27, 2006
posts:20
votes: 0


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