homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

form throwing elements out of whack

5+ Year Member

Msg#: 3391599 posted 3:23 pm on Jul 11, 2007 (gmt 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?




10+ Year Member

Msg#: 3391599 posted 4:48 pm on Jul 11, 2007 (gmt 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.


5+ Year Member

Msg#: 3391599 posted 10:20 pm on Jul 11, 2007 (gmt 0)

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

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved