Question

Hey guys Im currently trying to get a textbox a select menu and a button all into one sized div cleanly but im running into an issue where each element has odd borders/margins which prevent it from rendering properly (the button appears below the text box and select menu)

Heres the html Im currently using

<div class="content">
    <div class="search-panel">
        <div class="search-panel-logo">
            <img src="img.png" class="search-panel-logo-img" />
        </div>

        <div class="search-panel-searchbar">
            <form class="search-panel-frm" action="" id="fsearchbar">
                <input class="search-panel-frm" type="text" id="tseachtext" name="tsearchtext" value="Search" />
                <select class="search-panel-frm" id="ssearchselect" name="ssearchselect">
                    <option value="Cars">Cars</option> 
                </select>
                <input class="search-panel-frm" type="button" id="bsearchgo" name="bsearchgo" value="Search!" />
            </form>

        </div>
    </div>
</div>

and heres the CSS:

.content {
    background:inherit;
    width:950px;
    height:600px;
    margin: 0 auto;
}

.search-panel {
    width:inherit;
    height:500px;
    background:#093;
    margin:0 auto;

}
.search-panel-searchbar {
    width:inherit;
    height:30px;

}

.search-panel-searchbar-frm {
    width:inherit;
    height:inherit;

}

.search-panel-searchbar-frm-text {
    width:60%;
    height:70%;

}

.search-panel-searchbar-frm-select {
    width:20%;
    height:80%;

}

.search-panel-searchbar-frm-go {
    width:20%;
    height:80%;

}

any idea what I can add to get all the elements to appear in one line as opposed to two, Ive already tried

border:0;
margin:0;

and it didnt fix the problem.

Answer 1

To achieve your goal, some CSS tricks had to be applied, see below the CSS:

CSS

/* wrapper */
.search-panel-searchbar {
    width: 100%;
    height: 30px;
    overflow: hidden;
}

/* form elements must be wrapped and not a direct child of the form tag */
.search-panel-searchbar > form > div {
    background-color: #fff;
    width: 100%;
    height:30px;
}

/* input[type="text"] */
.search-panel-searchbar-frm-text {
    margin: 0;
    padding: 0;
    font-size: 12px;
    line-height: 16px;
    height: 16px;  /* necessary to fix height issue on windows browsers */
    padding: 6px 0;
    display: block;
    border: 1px solid #ccc;
    background-color:#fff;
    width: 60%;
    text-indent: 4px;
    float: left;
}

/* select */
.search-panel-searchbar-frm-select {
    margin: 0;
    padding: 0;
    font-size: 12px;
    height: 30px;
    padding: 6px 4px;
    display: block;
    border: 1px solid #ccc;
    background-color:#fff;
    width: 20%;
    float: left;
    margin-left:-1px; /* pull to prevent border overflow issue with % */
}

/* input[type="button"] */
.search-panel-searchbar-frm-go {
    margin: 0;
    padding: 0;
    font-size: 12px;
    height: 30px;
    padding: 6px 0;
    display: block;
    border: 1px solid #ccc;
    background-color:#fff;
    width: 20%;
    float: left;
    text-align:center;
    margin-left:-1px; /* pull to prevent border overflow issue with % */
    cursor: pointer;
}

Note:

CSS does not include style given on the Fiddle example to a visual demonstration, like the button hover and body background.

---

Please take note that unfortunately, each browser (and OS!) deals with the select in different ways, and it’s likely that on one or two browsers, the style may differ.

The working Fiddle example!

Screen shot matches tests performed on:

Linux Ubuntu 12.04

• Firefox 12.0
• Chromium 18.0.1025.151 (Developer Build 130497 Linux)

Windows XP Profissional versão 2002 Service Pack 3

• Internet Explorer 8.0.6001.18702
• Opera 11.62
• Firefox 3.6.16
• Safari 5.1.2 ^{(only select box height fail)}
• Google Chrome 18.0.1025.168 m
• K-Meleon 1.5.4 ^{(fail due to font-family)}

Windows 7 Home Edition Service Pack 1

• Internet Explorer 9.0.8112.164211C
• Opera 11.62
• Firefox 12.0
• Safari 5.1.4
• Google Chrome 18.0.1025.168 m

The font-family that you will use must contain a font family declaration at the end to prevent line-height and text-size issues. e.g., font-family: Helvetica, Arial, sans-serif