div losing class

**jon.heitz** · 08-14-2008, 06:27 PM

Hi everyone,

Can someone help me with this?

I have a container div that contains several other divs. The container div has class "search". However it seems that after a "clear:both", the last div falls outside the border of the container div described by the "search" class. The (simplified) html is below.

Thanks for your help.

- jon

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN
"http://www.w3.org/TR/html4/strict.dtd">
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Search</title>

<style type="text/css">

.search {
background-color:#DEE7EC;
border-bottom-color:#8CACBB;
border-bottom-style:solid;
border-bottom-width:1px;
border-top-color:#8CACBB;
border-top-style:solid;
border-top-width:1px;
border-left-color:#8CACBB;
border-left-style:solid;
border-left-width:1px;
border-bottom-width:1px;
border-right-color:#8CACBB;
border-right-style:solid;
border-right-width:1px;
color:Black;
line-height:1.6em;
margin-bottom:0pt;
margin-left:0pt;
margin-right:0pt;
margin-top:0pt;
padding-bottom:0px;
padding-left:1px;
padding-right:1px;
padding-top:5px;
}

</style>

</head>

<body>

top
<div id="search">

<div id="simpleSearch" class='search'>
<div style="float:right" onclick="alert('perform simple search');">
<img src="xmag-22.png"/>
</div>
<div style="float:right">
<input id="search" type="text" value="search"></input>
</div>
<div style="clear:both"></div>
<div style="font-size:8pt; float:right">
<div>Advanced search</div>
</div>
</div>
</div>

<div style="clear:both"></div>
bottom

</body>
</html>

**Medyman** · 08-15-2008, 12:40 PM

Firstly, simplify your CSS:

Code:

.search {
	border:1px solid #8CACBB;
	background-color:#DEE7EC;
	color:#000;
	line-height:1.6em;
	margin:0;
	padding:5px 1px 0 1px;
}

Second, add clear:both to the container of the "Advanced Search" and add the clear:both div after it, not before.

Code:

<div style="font-size:8pt; float:right; clear:both;">
	<div>Advanced search</div>
</div>
<div style="clear:both"></div>

You did say this was a "simplified" version of your markup, so I won't make too much of a judgment. However, it seems to me that you're a bit "over-divifying" here. You could accomplish the same thing which much less markup. Like so:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN
"http://www.w3.org/TR/html4/strict.dtd">
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Search</title>

<style type="text/css">
.search {
	border:1px solid #8CACBB;
	background-color:#DEE7EC;
	color:#000;
	line-height:1.6em;
	margin:0;
	padding:5px 1px 0 1px;
	text-align:right;
}
.search a {
	display:block;
	font-size:8pt;
}
</style>
</head>
<body>

top

<!-- begin simple search -->
<div id="simpleSearch" class='search'>
	<input id="search" type="text" value="search">
	<img src="xmag-22.png" onclick="alert('perform simple search');"/>
	<a href="#">Advanced search</a>
</div>

bottom

</body>
</html>

**boogyman** · 08-15-2008, 12:49 PM

is not a valid tag

HTML Code:

<input id="search" type="text" name="search" value="">

and you shouldn't rely on javascript without a html code backup, because javascript can be disabled, causing your form to break entirely. Rather do some progressive enhancement where if javascript is enabled and present, you will allow it to run its course, however you are not requiring javascript to have the form work

HTML Code:

<input id="search" type="text" name="search" value="">
<input type="submit" name="submit" value="Search" onclick="return confirm('perform simple search')">

**Medyman** · 08-15-2008, 01:31 PM

To add to what boogyman just said:

It seems like you want to use an image instead of the default OS button. In this case, you could use the <input type="image"> tag which accomplishes what you want without sacrificing accessibility.

Thread: div losing class

Thread Tools

Search Thread

div losing class

Bookmarks

Bookmarks

Posting Permissions