# Solved: css float problem.



## firestormer (Sep 16, 2005)

I have banner2, banner and search_box and they should be postioned in that order as a header, but they're not!

This is what its coming out as:









The search box should be inline with the rest of the header.

Here is the css:


```
body,td,th {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #000000;
}
body {
	background-color: #FEEDB9;

	margin: 0;
}
a:link, a:visited, a:active {
	color: #660033;
	text-decoration: none;
}
a:hover {
	color: #993366;
	text-decoration: none;
}
hr {
	margin: 5px 0px 5px 0px;
	color: #660033;
	border: 0;
	border-top: 1px solid #660033;
	height: 1px;
	width: 580px;
}
h1 {
	font-size: 16px;
	color: #993366;
	text-align: left;
	margin: 8px 2px 8px 2px;
}
form {
	margin: 0;
}
.main {
	width: 100%;
	margin: auto;
	padding: 0;
	background-color: #FFFFFF;
}
.banner, .search_box {
	height: 87px;
	background-image: url(background.jpg);
	background-repeat: repeat-x;
	font-size: 20px;
	font-weight: bold;
	color: #FFFFFF;
	text-align: center;
	padding-top: 20px;
}
.banner2 {
float: left;
width: 332px;
height: 87px;
background-image: url(pic.jpg);
}

.top {
	width: 100%;
}

.banner {
	
	width: 80%;
	text-align: left;
}
.search_box {
	float: right;
	clear: right;
	width: 20%;
}
.search_string {
	width: 100px;
	height: 16px;
	font-size: 10px;
	vertical-align: middle;
}
.search_submit {
	width: 50px;
	height: 22px;
	font-size: 10px;
	vertical-align: middle;
}
.highlight {
	background-color: #D0D0D0;
}
.banner a {
	color: #FFFFFF;
}
.menu {
	float: left;
	width: 140px;
	margin: 10px;
	margin-top: 3px;
}
.menu ul, .menu li {
	margin: 0;
	padding: 0;
	list-style: none;
	margin-bottom: 5px;
}
.menu ul ul {
	padding-left: 8px;
}
.menu a:link, .menu a:visited, .menu a:active, .menu a:hover {
	display: block;
	padding: 2px;
}
.menu_default a:link, .menu_default a:visited, .menu_default a:active {
	border-bottom: 1px dashed #999999;
}
.menu_default a:hover {
	border-bottom: 1px dashed #333333;
}

.menu_current  {
	border-bottom: 1px dashed #999999;
	font-weight:bold;
}

.login_table {
	border: 1px solid #D0D0D0;
	margin-top: 20px;
	margin-bottom: 5px;
	text-align: center;
	padding-bottom: 3px;
}
.login_table h1 {
	color: #660033;
	font-size: 12px;
	text-transform: uppercase;
	font-weight: bold;
	text-align: center;
	margin: 5px 0px 5px 0px;
}
.login_table input {
	text-transform: uppercase;
	font-size: 10px;
	margin: 5px 0px 1px 0px;
	width: 100px;
}
.content {
	margin-left: 150px;
	padding: 4px 10px 14px 10px;
	text-align: justify;
	clear: right;
}
.footer {
	background-color: #FFFFFF;
	clear: both;
	height: 20px;
	background-image: url(footer.jpg);
	background-repeat: repeat-x;
	font-size: 10px;
	color: #666666;
	text-align: center;
	line-height: 18px;
}
.powered_by {
	text-align: center;
	font-size: 10px;
	padding-top: 2px;
}
```
And the html


```
<?php


if(!defined('WB_URL')) {
	header('Location: ../index.php');
	exit(0);
}

?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title><?php page_title(); ?></title>
<meta http-equiv="Content-Type" content="text/html; charset=<?php if(defined('DEFAULT_CHARSET')) { echo DEFAULT_CHARSET; } else { echo 'utf-8'; }?>" />
<meta name="description" content="<?php page_description(); ?>" />
<meta name="keywords" content="<?php page_keywords(); ?>" />
<link href="<?php echo TEMPLATE_DIR; ?>/screen.css" rel="stylesheet" type="text/css" media="screen" />
<link href="<?php echo TEMPLATE_DIR; ?>/print.css" rel="stylesheet" type="text/css" media="print" />
<?php
// this allows to include the optional module files (frontend.css, frontend.js) into the head section
if(function_exists('register_frontend_modfiles')) {
  register_frontend_modfiles('css');
  register_frontend_modfiles('js');
} ?>
<?php 
// this allows to add custom information to the head section of your template (WB-->Settings-->Website Header)
echo WEBSITE_HEADER; 
?>
</head>
<body>


<div class="top">
	<div class="banner2">
	</div>
	<div class="banner">
		<a href="<?php echo WB_URL; ?>/" target="_top"><?php echo WEBSITE_TITLE; ?></a>
		<font color="#D0D0D0">| <?php echo PAGE_TITLE; ?></font>
	</div>
	
	<div class="search_box">
		<?php if(SHOW_SEARCH) { ?>
		<form name="search" action="<?php echo WB_URL.'/search/index.php'; ?>" method="get">
		<input type="text" name="string" class="search_string" />
		<input type="submit" name="submit" value="<?php echo $TEXT['SEARCH']; ?>" class="search_submit" />
		</form>
		<?php } ?>
	</div>
</div>
<div class="main">	
	<?php
	// Only show menu items if we are supposed to
	if(SHOW_MENU) {
	?>	
	<div class="menu">
		<?php 
		show_menu();
		
		if(FRONTEND_LOGIN == 'enabled' AND VISIBILITY != 'private' AND $wb->get_session('USER_ID') == '') {
		?>
		<form name="login" action="<?php echo LOGIN_URL; ?>" method="post" class="login_table">
			<h1><?php echo $TEXT['LOGIN']; ?></h1>
			<?php echo $TEXT['USERNAME']; ?>:
			<input type="text" name="username" style="text-transform: lowercase;" />
			<?php echo $TEXT['PASSWORD']; ?>:
			<input type="password" name="password" />
			<input type="submit" name="submit" value="<?php echo $TEXT['LOGIN']; ?>" style="margin-top: 3px; text-transform: uppercase;" />
			<a href="<?php echo FORGOT_URL; ?>"><?php echo $TEXT['FORGOT_DETAILS']; ?></a>
				<?php if(is_numeric(FRONTEND_SIGNUP)) { ?>
					<a href="<?php echo SIGNUP_URL; ?>"><?php echo $TEXT['SIGNUP']; ?></a>
				<?php } ?>
		</form>
		<?php
		} elseif(FRONTEND_LOGIN == 'enabled' AND is_numeric($wb->get_session('USER_ID'))) {
		?>
		<form name="logout" action="<?php echo LOGOUT_URL; ?>" method="post" class="login_table">
			<h1><?php echo $TEXT['LOGGED_IN']; ?></h1>
			<?php echo $TEXT['WELCOME_BACK']; ?>, <?php echo $wb->get_display_name(); ?>
			<br />
			<input type="submit" name="submit" value="<?php echo $MENU['LOGOUT']; ?>" />
			<br />
			<a href="<?php echo PREFERENCES_URL; ?>"><?php echo $MENU['PREFERENCES']; ?></a>
			<a href="<?php echo ADMIN_URL; ?>/index.php"><?php echo $TEXT['ADMINISTRATION']; ?></a>
		</form>
		<?php
		}
		?>
	</div>
	<?php } ?>
	
	<div class="content">
		<?php page_content(); ?>
	</div>
	
	<div class="footer">
		<?php page_footer(); ?>
	</div>
	
</div>



</body>
</html>
```
I can't figure out why the elements arn't lining up.


----------



## firestormer (Sep 16, 2005)

no matter ive cheated and used absolute positioning


----------



## tomdkat (May 6, 2006)

Sometimes, you have to specify floated content FIRST to get things to layout correctly. By the way, was your screenshot taken in Firefox? If so, that's a Firefox bug (the right floated DIV appearing below the non-floated DIV.

Try this:

```
<div class="search_box">
		<?php if(SHOW_SEARCH) { ?>
		<form name="search" action="<?php echo WB_URL.'/search/index.php'; ?>" method="get">
		<input type="text" name="string" class="search_string" />
		<input type="submit" name="submit" value="<?php echo $TEXT['SEARCH']; ?>" class="search_submit" />
		</form>
		<?php } ?>
	</div>

<div class="banner">
		<a href="<?php echo WB_URL; ?>/" target="_top"><?php echo WEBSITE_TITLE; ?></a>
		<font color="#D0D0D0">| <?php echo PAGE_TITLE; ?></font>
	</div>
```
Peace...


----------

