lining up 4 elements

[ricklach]

I am trying to line up four elements in a "toolbar" type of configuration. I have tried many different combinations of css properties but I just can't seem to get things the way I want them. There are some limitations like class and id names have already been defined in other parts of the program - but I don't see this as a show-stopper. Here is the generated html code (with some parts removed for brevity):

<div id="wrapper" class="ltr">
<div id="loginout" >
			<a href="edituser.php" class="link">Logged in as </a><br /><a href="admin.php" class="link">Admin</a> | <a href="index.php?logout=1" class="link">Logout</a><br /> | 
<div class="theme_form"><form action="themechange.php" name="themeform1" method="post"><input type="hidden" name="frompage" value="2007.GED" /><select name="mytheme" class="header_select" onchange="document.themeform1.submit();"><option value="">Change Theme</option>
<option value="themes/lach/" class="selected-option">Lach</option>
<option value="themes/standard/">Standard</option>
</select></form></div>
 | <form action="search.php" method="post">											<input type="hidden" name="action" value="general" />
											<input type="hidden" name="topsearch" value="yes" />
											<input type="text" class="formbut" accesskey="S" name="query" size="15" value="Search" 
												onfocus="if (this.value == 'Search') this.value=''; focusHandler();" 
												onblur="if (this.value == '') this.value='Search';" />										<input type="image" src="themes/lach//images/go.gif" align="top" title="Search" />	</form>

| <div class="favorites_form">
<form name="favoriteform" action="index.php" method="post" onsubmit="return false;">
		<select name="fav_id" class="header_select" onchange="if (document.favoriteform.fav_id.options[document.favoriteform.fav_id.selectedIndex].value!='') window.location=document.favoriteform.fav_id.options[document.favoriteform.fav_id.selectedIndex].value; if (document.favoriteform.fav_id.options[document.favoriteform.fav_id.selectedIndex].value=='add') window.location='/phpgedview/index.php?ctype=gedcom&amp;ged=GENEALOGY_22_AUG_2007.GED&amp;ged=GENEALOGY_22_AUG_2007.GED&amp;ged=GENEALOGY_22_AUG_2007.GED&amp;action=addfav&amp;gid=&amp;pid=';">
			<option value="">Favorites</option>
</select>
	</form>
</div>
</div>

So I have a wrapper for the 4 elements which I am trying to line up on a single line. Can someone give me a hand with this layout?

Rick

[markbrown4]

Hi,

Edit: I couldn't tell what was what - here's a simple example.
I'm not sure what the different combinations you tried were - All you need to do to make things line up horizontally is float them and give them a width.
If you are wanting to use percentages - IE6 needs a negative margin or %'s that don't make 100% so that the columns stay on one line
100% width example

.four_please div {
	float: left;
	width: 25%;
}
* html .four_please div {
	margin-left: -1px; /* For IE See FAQ for explanation - I believe IE7 needs this also - so it would be best in a conditional comment - or you can let other browsers see it as well - It won't hurt too much */
}

Fixed width example

.four_please { width: 800px }
.four_please div {
	float: left;
	width: 200px;
}

HTML

<div class="four_please">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

Hope it helps

[ricklach]

That is so much simpler than anything I tried. Thanks for the lesson.

Rick

[markbrown4]

You're welcome