1 reply [Last post]
nudave04
Offline
newbie
Last seen: 10 years 10 weeks ago
Joined: 2004-02-03
Posts: 10
Points: 0

On my personal portal (http://start.wanderingjew.net), I have a radio-button controlled search bar at the top. As you can see, the last element is too long and scrolls onto the next line.

Each element is a form and a label wrapped in a div (class='searchoption'). The entire search bar is in div a class "search"

I would like to force each div to only be on one line, i.e. keep the label and form element together without wrapping. I need a dynamic solution (a <br> is not acceptable) because the page is dynamic, adn the content of the search bar is liable to change frequently.

I tried adding float:left to the searchoption class, but that for some reason pushed up the rest of my site (DIV.undersearch) to overlap with my search options.

Any suggestions?

Here is the relevant css:

DIV.search {
	position: relative;
	margin:0 auto;
	width: 780px;
	padding: 3px;
	text-align: center;
	background-color: blue;
	color: white;
}


DIV.searchoption {
        margin: 0 auto;
        display: inline;
        background-color: blue;
        color: white;
}

DIV.undersearch {
	position: relative;
	margin: 0 auto;
	width: 780px;
	top:10px;
}

Here is a portion of the html output from my php script. The other search options are identical.

<div class="search">
	<form method='post' action='/index.php'>
	Search: <input type='text' name='query'>
	<input type='submit' value='Search!' name='searchsub'><br>

	<div class='searchoption'>
		<input type='radio' name='ID' value='1' id='1' checked><label for='1'>Google</label>
	</div>

	<div class='searchoption'>
		<input type='radio' name='ID' value='2' id='2' ><label for='2'>Northwestern PH</label>
	</div>

         etc....

	</form>	
</div>
<div class="undersearch">
REST OF PAGE...

Arkkimaagi
Offline
Regular
Last seen: 9 years 48 weeks ago
Timezone: GMT+2
Joined: 2004-05-11
Posts: 29
Points: 0

Keep DIV on one line

add this to your searchoption rule:

white-space: nowrap;

~ Arkkimaagi ~
Experto credite