CSS - Clearing Float Left For Current Column Only

Hi There -

Am converting another design from tables, working with a CMS (Drupal) and an existing CSS / table combination that I didn't write and have no choice about.

Think of the header as having three sections. The top section has logo on the left, search box on the right. Rounded corners. I'm cool with that section.

Then there's a space. Created a div for the space. Love the space. Problems with the space in IE. Will go into it later.

Then there's the next section. Rounded corners. Contains the entire page.

On the left is a pulldown menu, about 1 cm from the top. On the right is a tabbed menu. This menu has flexible height. It needs to be right up against the bottom with the menu below it. Call this section the tabbed menu section.

Third section. Immediately below that is a bar menu like the one Apple's got. Looks like a metal bar with divisions. Call this primary links.

----------

First, the space between. In IE, when you roll over the bar menu, the space disappears. Won't come back.

Initially, in the second section, floated the pulldown menu left and the tabbed menu right. That worked fine, except that the tabbed menu had a width of 100% and pushed up the pulldown menu so the section was too wide. When I put it to 65%, all hell broke loose with the bar menu in the third section below it and bits of it snuck up into the second section.

If I left it alone, and left the tabbed menu at 100%, when I checked over its container with firebug, it said that it was being affected by the primary links. I figured that out also because the background for that container was a really weird color that I finally found in the background of the navigation id and changed to white. Primary was overlapping it so I couldn't see it with firebug.

So after fiddling with several clearing methods, I gave up and decided to try a table. Table worked fine, and the second section looks good except that there's a one pixel space between the tabbed menu and the bar menu.

---------

It is my greatest wish right now to be able to float the pulldown to the left, the tabbed menu to the right and have the primary links stay below. I wish I could get the space to work and I wish for a clear understanding of it all so I can then figure out where to put the corners.

Anyone who can enlighten me on this would have my undying gratitude. I've been working on this all day and the deadline's tomorrow.

Code:

<div id="top part"
logo and searchbox
</div>

<div>
that pesky space that disappears in IE when roll over primary links
</div>

<div id=navcontainer>
dropdown and tabbed menu
</div>

<div id="navigation" class="menu> <!-- couldn't find the menu class in the css -->
<div id="primary" class="clear-block">
contains barmenu - very fussy
</div>
</div>

Here's the relevant CSS:

Code:

div#navigation {
  background: #fff url(../images/blue/menu-bg.png) 100% 100% repeat-x;
}


#primary {
  line-height: 30px;
}

#primary ul {
  padding:0;
  margin:0;
  list-style:none;
}

#primary li {
  display:inline;
}

#primary a {
  font-weight:bold;
  display:block;
  float:left;
  padding:0px 14px 0px 14px;
  margin: 0px 1px 0px 0px;
  font-size: 95%;
}

#primary a {
  background-position:0% 0px;
}

#primary a:hover {
  text-decoration: none;
  background-position:0% -42px;
}

#primary a.active {
  background-position: 0% -84px;
}

#primary a {
  background: url(../images/blue/menu-div.png) 100% 0 repeat-y;
  color:#666666;
  font-size: 120%;
  font-family:Arial,Helvetica,sans-serif;
}

#primary a:hover {
  color: 666666;
  background: #B8B8B8;
}

#primary a.active {
  color: 666666;
  background: #B8B8B8;
}

Hey all,
Here is my page: tri-m.com/ENGINEERINGSITE/test.html

The page looks what I want it to look like in IE... but if you open it up in FF you will see what I mean.

If I add my clear float <div class="clear"></div> after .Iimage and .Ifeatures, a large space is placed between .imageFeatures and .IfeatureTEXT.

If I do not add the clear (as in my example... than the floats are not cleared in FF obviously).

I'm not quite sure what to do with this case. I'm not really able to find a similar problem.

If someone could help me out that would be AMAZING!

Thanks everyone.
- Jacenta

Ok, I have been pulling my hair out trying to figure out a workaround. I then have been searching the web for answers, but can't get any of the solutions to work in this case.

Here is a stripped down version of the code:

CSS:
Code:

ul {
	list-style: none;
}

li.leftform {
	clear: left;
	float: left;
	text-align: right;
	width: 121px;
	padding-right: 10px;
	font-size: 12px;
	font-family: Tahoma;
	color: #000000;
	line-height: 40px;
}

li input {
	width: 243px;
	height: 18px;
	line-height: 18px;
	margin: 0;
	margin-right: 3px;
}

li.middleform {
	float: left;
	width: 243px;
	padding:8px 0;
	padding-right: 10px;
	line-height: 18px;
	min-height: 24px;
}

li.rightform {
	float: right;
	width: 168px;
	padding-top: 10px;
	padding-right: 25px;
	line-height: 11px;
}

HTML:
Code:

<!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>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>IE Test</title>      
	<link href="css/default.css" rel="stylesheet" type="text/css" />
</head>
<body>
	<fieldset>
		<legend>Personal Information</legend>
		<ul>
			<li class="leftform">
				<label for="FirstName">* First Name</label>
			</li>
			<li class="middleform">
				<input name="FirstName" type="text" maxlength="20" id="FirstName" />
			</li>
			<li class="leftform">
				<label for="LastName">* Last Name</label>
			</li>
			<li class="middleform">
				<input name="LastName" type="text" maxlength="30" id="LastName" />
			</li>
			<li class="leftform">
				<label for="Phone">Phone Number</label>
			</li>
			<li class="middleform">
				<input name="Phone" type="text" maxlength="30" id="Phone" />
			</li>
			<li class="rightform">
				Saving a phone number helps us contact you if there's a problem.
			</li>
			<li class="leftform">&nbsp;</li>
			<li class="middleform">
				<a href="">Add a phone number</a>
			</li>
			<li class="rightform">
				<a href="">Cancel</a>&nbsp; | &nbsp;<a href="">Save</a>
			</li>
		</ul>
	</fieldset>
</body>
</html>

It displays fine in IE8, Firefox 2+, Safari, Google Chrome, Opera... the problem, as usual is IE6 and IE7. For some reason the clear: left works on the first element, but an element after goes as if there was never a clear before it.

The HTML is like this for a reason, I know you can't see it now because I stripped everything out of it.

Any help on a quick fix (don't mind if it's dirty )

Thanks!

OK, so I have this nice clean form that I wanted to style up like the table-forms of old. I did it by floating the labels and form elements left, then clearing the labels left so they use their own lines. This works beautifully in Firefox and Safari, but IE (Win, at least) seems to think everything not cleared left should go on the same line! Is this a known IE bug/discrepancy? If so, is there a way to combat it without introducing meaningless elements to the markup (such as encasing each label/element pair in a div)?
Here's some example HTML:
html4strict Code:
Original - html4strict Code <?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <head> <title>Test</title> <style type="text/css"> @import url("style.css"); </style> </head> <body> <form name="form" action="test.php" method="post"> <label for="name">Name:</label> <input type="text" name="name" /> <label for="thoughts">Your Thoughts:</label> <textarea name="thoughts"></textarea> <label for="fun">Having fun?</label> <input type="checkbox" name="fun" value="yes" /> </form> </body> </html>

  

  


 <?xml version="1.0" encoding="iso-8859-1"?>


 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">


 <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">


 <head>


 <title>Test</title>


 <style type="text/css">


     @import url("style.css");


 </style>


 </head>


 <body>


  


 <form name="form" action="test.php" method="post">


     <label for="name">Name:</label>


         <input type="text" name="name" />


     <label for="thoughts">Your Thoughts:</label>


         <textarea name="thoughts"></textarea>


     <label for="fun">Having fun?</label>


         <input type="checkbox" name="fun" value="yes" />


 </form>


  


 </body>


 </html> 

And the CSS:
css Code:
Original - css Code label { display: block; float: left; clear: left; width: 8em; margin-right: .5em; text-align: right; } input, textarea { display: block; float: left; }

  

  


 label {


     display: block;


     float: left;


     clear: left;


     width: 8em;


     margin-right: .5em;


     text-align: right;


 }


 input,


 textarea {


     display: block;


     float: left;


 } 

Hello,

I have two columns, one is on the left and another in the middle (center). Left column is where I want it to be, central column is also aligned properly, however, it is below left column. I want it to be on the same level as left.

See here

see how it got below ?

It is XHTML validated and CSS is fine too (some background color warnings).

Plz help me to make central column go up. Thanks.

Hi all,

I've tried searching around for this issue, but I've not found any help so far and it's driving me nuts. I hope someone here can advise.

This is an abridged version of the site's code for example:
Code:

<style type="text/css">
<!--
#main1 {
	padding: 0px;
	margin: 0px;
}

#left {
	width:260px;
	margin:0;
	padding:0;
	float: left;
}
#left-top {
	background-image: url(../images/panel-top-left.gif);
	background-repeat: no-repeat;
	background-position: center top;
	height: 16px;
	margin: 0px;
	padding: 0px;
}
#left-middle {
	background-image: url(../images/panel-middle-left.gif);
	background-repeat: repeat-y;
	padding-right: 20px;
	padding-left: 20px;
	padding-bottom: 2px;
}
#left-bottom {
	background-image: url(../images/panel-bottom-left.gif);
	background-position: center;
	height: 18px;
}
#logo {
	background-image: url(../images/swalingslogo.gif);
	background-position: center top;
	width: 260px;
	height: 120px;
	background-repeat: no-repeat;
}
/* Navigation List */
#navlist
{
	padding-left: 0;
	margin-bottom:10px;
	width: 217px;
}
#navlist li
{
	list-style: none;
	margin-bottom:4px;
	padding: 0;
	font-size:1.2em;
	line-height:1.8em;
	width:217px;
	height:32px;
	background-image:url(../images/nav2.gif);
	background-repeat:no-repeat;
	margin-top: 0;
	margin-right: 0;
	margin-left: 0;
}
#navlist li a:link, #navlist li a:visited {
	display:block;
	text-decoration: none;
	color:#039;
	width:207px;
	height:32px;
	font-weight:bold;
	padding-top: 2px;
	padding-right: 5px;
	padding-bottom: 2px;
	padding-left: 5px;
}
#navlist li a:hover { 
	text-decoration: none;
	color:#FF6600;
}
/* Testimonials */
div#fscroller {
	width:200px;
	height:200px;
	background-image:url(../images/bg-testimonials.gif);
	background-repeat:no-repeat;
	margin-left:8px;
}
div#fscroller p {
	margin-left: 10px;
	margin-right: 10px;
	margin-top: 10px;
	margin-bottom: 5px;
}

/* Middle Column */
#middle {
	margin-top: 0;
	margin-right: 0px;
	margin-bottom: 0;
	padding-right: 0px;
	padding-left: 0px;
	padding-top: 0px;
	text-align: justify;
	margin-left: 260px;
}
#middle #top-left {
	background-image: url(../images/panel-top-rightleft.gif);
	height: 16px;
	font-size: 2px;
	background-repeat: no-repeat;
}
#middle #top-right {
	float: right;
	margin-top: -16px;
	background-image: url(../images/panel-top-rightright.gif); 
	height: 16px; 
	width: 20px;
	font-size: 2px;
}
#middle a {
	color: #003399;
}
#middle a:hover {
	text-decoration: none;
}
/** Country Titles **/
#middle h2#unitedkingdom {
	background-image: url(../images/title-unitedkingdom.gif);
	background-repeat: no-repeat;
	height: 26px;
	width: 201px;
	margin-bottom: 6px;
}
#middle h2#antigua {
	background-image: url(../images/title-antigua.gif);
	background-repeat: no-repeat;
	height: 26px;
	width: 128px;
	margin-top: 16px;
	margin-bottom: 6px;
}
/* Minisite Links */
div.minisite {
	float: left;
}
div.minisite span {
	display: none;
}
div.minisite a {
	background-position: top;
	background-repeat: no-repeat;
	height: 168px;
	width: 190px;
	display: block;
}
div.minisite a:hover {
	background-position: bottom;
}
a#minisite-swimminglessons {
	background-image: url(../images/swimming-lessons-uk.jpg);
}

.clear {
	clear:both;
}
.hidden {
	display: none;
}

.notopgap {
	margin-top: 0;
}

.nobottomgap {
	margin-bottom: 0;
}
.inside {
	background: #EFEFEF;
	padding-left: 10px;
	padding-right: 10px;
}
-->
</style>
<div id="main1">
<div id="left">
<!-- Logo -->
<div id="logo"></div>
		
<div id="left-top"></div>
<div id="left-middle">

<!-- Navigation -->
<!--#include file="../inc/nav2.asp" -->

<!-- Testimonials -->
<!--#include file="../inc/testimonials.asp" -->
<!--#include file="../inc/special-offers.asp" -->
</div>
<div id="left-bottom"></div>
</div>
	
<!-- Middle Column -->
<a name="skipnav" class="hidden"></a>
<div id="middle">
	
<div class="top-left"></div><div class="top-right"></div>
<div class="insideleft"><div class="insideright"><div class="inside"><div class="gap-saver"></div>
	
<!-- UK Sites -->
<h2 id="unitedkingdom"><span class="hidden">United Kingdom</span></h2>
<div class="minisite"><a id="minisite-swimminglessons" href="(URL address blocked: See forum rules)"><span>Swimming Lessons</span></a></div>
<div class="minisite"><a id="minisite-swimminglessons" href="(URL address blocked: See forum rules)"><span>Swalings Training</span></a></div>
<div class="minisite"><a id="minisite-swimminglessons" href="(URL address blocked: See forum rules)"><span>Swalings Residential Courses</span></a></div>

<div class="clear"></div>

<!-- Antigua Sites -->
<h2 id="antigua"><span class="hidden">Antigua</span></h2>
<div class="minisite"><a id="minisite-swimminglessons" href="(URL address blocked: See forum rules)"><span>Swalings Soccer</span></a></div>
<div class="minisite"><a id="minisite-swimminglessons" href="(URL address blocked: See forum rules)"><span>Swalings Parties and Events</span></a></div>
<div class="minisite"><a id="minisite-swimminglessons" href="(URL address blocked: See forum rules)"><span>Swalings International School of Swimming</span></a></div>
<div class="minisite"><a id="minisite-swimminglessons" href="(URL address blocked: See forum rules)"><span>Swalings Babysitting and Nanny Agency</span></a></div>
<div class="minisite"><a id="minisite-swimminglessons" href="(URL address blocked: See forum rules)"><span>Swalings School of Rugby</span></a></div>
<div class="minisite"><a id="minisite-swimminglessons" href="(URL address blocked: See forum rules)"><span>Swalings School of Volleyball</span></a></div>
<div class="minisite"><a id="minisite-swimminglessons" href="(URL address blocked: See forum rules)"><span>Swalings Training</span></a></div>
			
<div class="clear"></div>
			
<div class="gap-saver"></div>
</div></div></div>
<div class="bottom-left"></div><div class="bottom-right"></div>
	
</div>	
<!-- End Middle Column -->
	
</div>

I've placed the Country Title in an H2 tag, then beneath that, each anchor is enclosed in a DIV, and is set as a left-floated block. Then I placed a spacer DIV (clear: both) to create a new line, then repeated with H2 and links.

This all works fine in Firefox, IE7 and Opera, but of course IE6 is being a pig as usual. The spacer DIV is pushed to sit alongside the bottom of the left column, and I can't figure out how to (or if I can) stop this.

I can't add in links properly, so I hope this is acceptable under the rules --
The site in question is: www.swalings .com/swalings/index4.asp
and here's a screenshot of IE6 behaviour: www.swalings .com/images/swalings-ie6-troubleshoot.jpg

Hopefully that's enough information to go on, please let me know if there's something I missed out.

Thanks a lot!

Rob

Hi,

Creating a Wordpress theme.

I need help to clear:left JPG thumbnails in my 2nd-column div, but WITHOUT clearing the 1st-column div that is floated:left. In other words, I want these two columns to work independently, just like <TD> in html.

Here is my setup -- it is a 2-column layout, with the left column being a navigational sidebar (navigation content automatically generated by wordpress), and the Right Column is the "real content" div. Wordpress generates the content in the right column, also. And since Wordpress generates the content based upon what the reader selects, I cannot assign any HEIGHT attributes to the Divs, because I do not know whether the selections have a lot of content, or very little.



----------------- HEADER DIV------------------------------------------

-- Sidebar Div-- __________ --- RIGHT DIV (not floated)

----------------- FOOTER DIV ----------------------------------------
(property of footer is set to clear:both)



SIDEBAR DIV is float:left; width 160px
RIGHT DIV is not floated, and contains all the content. 600px;



Problem I need to solve:

In column #2 -- the right div, I want to float-left small thumbnail jpgs, and write text flowing along the right side of the thumbnail. If the text does not naturally drop below the jpg, I want to clear:left to drop down to a new line and start the process over (new thumbnail, new text beside it).

*** The problem is that when I clear:left on the jpg, it NOT ONLY clears the JPG, but also clears:left on the whole Sidebar DIV, thereby dropping the next line WAY DOWN on the page.

So it looks like this:

___ HEADER ____

Sidebar __________________ Thumbnail #1: Text text text






(clear:left clears everything....)
__________________________ Thumbnail #2: Text

---- FOOTER ---




Attempted solution:
If I set the sidebar div to position:absolute, it works ok EXCEPT (and big except) that if there is not much content in the RIGHT DIV, then the FOOTER DIV is not low enough on the page, thereby overlapping the Sidebar Div.

Obviously, this whole design could be EASILY accomplished with TABLES, but those are blasphemy these days, so I would like a more "modern" solution. I have googled this all day, and have not seen a solution. Help is appreciated.

Hi, I have this page:

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=windows-1252">
<title>New Page 1</title>
<style type="text/css">
* {
	padding: 0;
	margin: 0;
}

p {padding: 0; margin: 0; }

html {padding:0; margin:0;}


.leftDiv {
	height: 100px;
	width: 30px;
	background-color: teal;
	float: left;
}

.mainDiv {
	padding: 5px 0 10px 0px;
	width: 200px;
	height: 20px;
	background-color: blue;

}

.mainPara {
	padding-left: 5px;
}

</style>
</head>

<body>
<div id="contentDiv" style="width: 700px; height: 700px;">
	<div class="leftDiv">
	
	</div>
	<div class="mainDiv">
		<p class="mainPara">
		First Para
		</p>
	</div>
	<div class="mainDiv">
		<p class="mainPara">
		Second Para
		</p>
	</div>
</div>
</body>

</html>

And have two questions. First, why the gap between the left div and mainDiv in IE? I thought 3px bug was only for block elements with no dimensions?

Second, why does padding left not take effect in FF untill I have overcome the width of the float? Even padding-left in the para does not take effect, which should be based off of its parent.

Any help is appriciated,

CJB

Hi, hopefully you enjoyed the title, I had a good laugh thinking of it in that split second it took me to write it.

So, I found a 3 column css layout on a CSS generator website, because I got sick of trying to hack up layouts I've made in the past that didn't work.

Anyhow, it was working fine with one line of content in each column when I tested it out, however, once content in the middle column was added, and stretched vertically beyond a certain point, it will drag the left columns content down with it. The right column is not affected in any way.

I have spent a few hours trying to look for reasons as to why it would happen, but I had no luck. I would appreciate any help... so thank you in advance if you take a stab at it.

Here's the html:

Code:

<body>

<div id="pagewidth">
	<div id="header"></div>

		<div id="wrapper" class="clearfix" > 
			<div id="twocols" class="clearfix"> 
				<div id="maincol">Main Text, woot. (aka hi hi hi)</div>
				<div id="rightcol">Sidebar, yippee.</div>
			</div> 
		<div id="leftcol">

			<div id="navigation">test</div>
		</div>
	</div>
		
	<div id="footer"></div>
</div>

</body>

and the CSS:

Code:

html, body
{
 background: #333399;
 margin:0; 
 padding:0; 
 text-align:center;
 font-family: Verdana, Arial, Tahoma;
 font-size: 12px;
 font-weight: normal;
 color: black;
 	 
} 
 
#pagewidth
{ 
 width: 750px; 
 text-align:left;  
 margin-left:auto; 
 margin-right:auto;
 background: #333399 url('images/bodycontent.gif') repeat-y center top;
} 
 
#header
{
 position:relative; 
 height:138px; 
 background: url('images/header.gif') center;
 width: 100%;
} 
 
#leftcol
{
 width: 118px; 
 float: left;
 left: 25px;
 position: relative; 
 background-color: transparent;
 margin:0; padding:0;
 }
 
#twocols
{
 width: 700px; 
 float: right; 
 position: relative; 
  }
 
#rightcol
{
 width:180px;
 right: 25px;	 
 float:right; 
 position:relative; 
 background-color: transparent;
 }
 
#maincol
{
 background-color: transparent;  
 float: left;
 left: 100px; 
 display: inline; 
 position: relative; 
 width: 390px; 
 }
 
#footer
{
 text-align: center;
 height:39px;
 background: url('images/footer.gif');
 clear:both;
 } 
 


.clearfix:after 
{
 content: "."; 
 display: block; 
 height: 0; 
 clear: both; 
 visibility: hidden;
 }
 
.clearfix{display: inline-table;}

/* Hides from IE-mac \*/
* html .clearfix{height: 1%;}
.clearfix{display: block;}
/* End hide from IE-mac */  


 
 /*printer styles*/ 
 @media print{ 
/*hide the left column when printing*/ 
#leftcol{display:none;} 

/*hide the right column when printing*/ 
#rightcol{display:none;} 
#twocols, #maincol{width:100%; float:none;}
}

Again, thank you in advance if you can come up with anything.

can i make my left column, the same height as my right column? or infact, if the left is taller than the right, the right extends to it and if the right is taller than the left the left extends to it?

is this possible, cheers

heres my css:
left column, is #leftNav and the right column is #contentMain

PHP Code:
#content {
        margin:0px auto;
        padding: 0;
        width: 760px;
    }
    
    #contentMain {
        padding: 0;
        margin: 0;
        float: right;
        width: 632px;
    }

    #leftNav {
        color: #000;
        float: left;
        margin: 0;
        padding: 0;
        width: 128px;
    } 

Hi to all

I am pasting here the code where i have problem

[ code ]
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
.mainUL
{
float: left;
list-style: none;
line-height: 1;

font-weight: bold;
padding:0;

font-size:12px;
margin:0;
text-align:center;
vertical-align:middle;

border:2px solid #000000;
border-bottom:none;
/*border-left:none;*/
border-top:none;
/*margin-left:63px;*/
border:1px solid red;
width:294px;
height:150px;
margin-top:40px;
margin-left:300px;
}
.mailULLI
{
background:#FFFF99;
float: left;
width: 12em;
color:#000000;
padding:5px 0 5px 0;
border:2px solid #000000;
border-left:none;
border-bottom:none;
text-align:center;
margin:0;
border:1px solid blue;
height:15px;


}
.innerUL
{
width:100px;
height:30px;
border:1px solid red;
display:none;
margin-top:-52px;

}

</style>
<script language="javascript">
function showpopup(id)
{
var id=document.getElementById(id);
id.style.display='block';
}
function hidepopup(id)
{
var id=document.getElementById(id);
id.style.display='none';

}

</script>
</head>

<body>

<ul class="mainUL">
<li class="mailULLI">
<a href="#" onmouseover="showpopup('popup')" onmouseout="hidepopup('popup')">Click Here 1</a>
<ul id="popup" class="innerUL">

</ul>
</li>
<li class="mailULLI">
<a href="#" onmouseover="showpopup('popup')" onmouseout="hidepopup('popup')">Click Here 2</a>
<ul id="popup" class="innerUL">

</ul>
</li>
<li class="mailULLI">
<a href="#" onmouseover="showpopup('popup')" onmouseout="hidepopup('popup')">Click Here 3</a>
<ul id="popup" class="innerUL">

</ul>
</li>
<li class="mailULLI">
<a href="#" onmouseover="showpopup('popup')" onmouseout="hidepopup('popup')">Click Here 4</a>
<ul id="popup" class="innerUL">

</ul>
</li>
<li class="mailULLI">
<a href="#" onmouseover="showpopup('popup')" onmouseout="hidepopup('popup')">Click Here 5</a>
<ul id="popup" class="innerUL">

</ul>
</li>
<li class="mailULLI">
<a href="#" onmouseover="showpopup('popup')" onmouseout="hidepopup('popup')">Click Here 6</a>
<ul id="popup" class="innerUL">

</ul>
</li>
</ul>

</body>
</html>

[/code]
Currently when i mouseover the "click here 1" a popup open above it its fine

I want when i mouse over the "click here 2 " pop up should open above it

same when i mouse over the "click here 3 " the popup should open over the click here 1 cell .you can say it popup start at the end of "click here 3 " cell and go above

when i mouseover the "click here 4 " then popup open over the "click here 2" and its left start at the start of "click here 2" cell

thanks in advance

Hi to all

I am pasting here the code where i have problem


<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
.mainUL
{
float: left;
list-style: none;
line-height: 1;

font-weight: bold;
padding:0;

font-size:12px;
margin:0;
text-align:center;
vertical-align:middle;

border:2px solid #000000;
border-bottom:none;
/*border-left:none;*/
border-top:none;
/*margin-left:63px;*/
border:1px solid red;
width:294px;
height:150px;
margin-top:40px;
margin-left:300px;
}
.mailULLI
{
background:#FFFF99;
float: left;
width: 12em;
color:#000000;
padding:5px 0 5px 0;
border:2px solid #000000;
border-left:none;
border-bottom:none;
text-align:center;
margin:0;
border:1px solid blue;
height:15px;


}
.innerUL
{
width:100px;
height:30px;
border:1px solid red;
display:none;
margin-top:-52px;

}

</style>
<script language="javascript">
function showpopup(id)
{
var id=document.getElementById(id);
id.style.display='block';
}
function hidepopup(id)
{
var id=document.getElementById(id);
id.style.display='none';

}

</script>
</head>

<body>

<ul class="mainUL">
<li class="mailULLI">
<a href="#" onmouseover="showpopup('popup')" onmouseout="hidepopup('popup')">Click Here 1</a>
<ul id="popup" class="innerUL">

</ul>
</li>
<li class="mailULLI">
<a href="#" onmouseover="showpopup('popup')" onmouseout="hidepopup('popup')">Click Here 2</a>
<ul id="popup" class="innerUL">

</ul>
</li>
<li class="mailULLI">
<a href="#" onmouseover="showpopup('popup')" onmouseout="hidepopup('popup')">Click Here 3</a>
<ul id="popup" class="innerUL">

</ul>
</li>
<li class="mailULLI">
<a href="#" onmouseover="showpopup('popup')" onmouseout="hidepopup('popup')">Click Here 4</a>
<ul id="popup" class="innerUL">

</ul>
</li>
<li class="mailULLI">
<a href="#" onmouseover="showpopup('popup')" onmouseout="hidepopup('popup')">Click Here 5</a>
<ul id="popup" class="innerUL">

</ul>
</li>
<li class="mailULLI">
<a href="#" onmouseover="showpopup('popup')" onmouseout="hidepopup('popup')">Click Here 6</a>
<ul id="popup" class="innerUL">

</ul>
</li>
</ul>

</body>
</html>


Currently when i mouseover the "click here 1" a popup open above it its fine

I want when i mouse over the "click here 2 " pop up should open above it

same when i mouse over the "click here 3 " the popup should open over the click here 1 cell .you can say it popup start at the end of "click here 3 " cell and go above

when i mouseover the "click here 4 " then popup open over the "click here 2" and its left start at the start of "click here 2" cell

thanks in advance

hey all, i have divs within a div but the inner div with the text does not expand the main wrapping div with so the main wrapping div is very thin and the text just goes over it?? here is the code

Code:

<div id="greyinset">
	<div id="insetcontent">
		<form name="form1" method="post" action="">
			<div id="insetcontentL">
				<div align="left">
				    <label>Smoking:</label>
				    <br>
				    <label>Bed Type:</label>
				    <br>
				    <label>Accessible:</label>
				    <br>
			      </div>
			</div>
			<div id="insetcontentR">
				<div align="left">
				  <input name="smoking" type="radio" value="yes">	
				  yes
				  <input name="smoking" type="radio" value="no" checked>	
				  no<br>
				  <input name="radiobutton" type="radio" value="radiobutton">	
				  King 
				  <input name="radiobutton" type="radio" value="radiobutton">	
				  Two Beds 
				  <input name="radiobutton" type="radio" value="radiobutton">	
				  No Preference<br>			 
				  <input name="accessible" type="checkbox" id="accessible" value="yes">
			    </div>
			</div>
		</form>
	</div>
</div>

and the css code
Code:

#greyinset { width: 100%; background-color: #eee; border: 1px solid black; clear:left; }
#insetcontent {width: 100%; padding: 3px 10px 3px 10px; white-space:normal;}
#insetcontentL {width: 50%; float: left;}
#insetcontentR {width: 50%; float: right;}

any ideas?? or do i have to go back to trusty tables

thanks

RF

Internet Explorer 7 has an odd way of dealing with adjacent left and right floats in a container without set width. Instead of leaving the parent div to its natural content width as a float, IE7 forces the right-floating div to float right until it meets an element with a fixed width, or otherwise the document margin. IE8 and other browsers float the items correctly.

The example below was meant to do a menu with rounded buttons, the two rounded images floated to the left and right edges of the button containing the text. The button should only be the width of the text link plus the rounding divs.

This is easily fixed by adding a fixed width to the floating container div. However this may not always be the desirable action when div content widths may vary -- especially if space is at premium.

Is there any decent way to fix this without resorting to ugly hacks? An easy way to make rounded corners for buttons that are floating. Perhaps use ul/li as the menu item container elements -- would that make any difference? ul/li come with their semantic limitations however, as far as their contents are concerned. (No divs for one.)

Code:

<!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">
<head>
<title>Test Page</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />

<style type="text/css">
body{
  background-color:#ffffff;
  font: 12px Verdana;
}

.container {
	border: 1px solid #000;
	padding: 5px;
	background-color: #eee;
	width: 500px;
}

.button_holder {
	float: left;
	margin: 1px;
	/* width: 100px; */ /* IE7 wants width! Comment out and it floats right. */
}

.top_button_left {
	/* background-image: url(../images/top_button_left.png); */
	background-repeat: no-repeat;
	background-color: #bbb;
	width: 5px;
	height: 31px;
	float: left;
	cursor: pointer;
}

.top_button_right {
	/* background-image: url(../images/top_button_right.png); */
	background-repeat: no-repeat;
	background-color: #bbb;
	width: 5px;
	height: 31px;
	float: right; /* This bugs the hell out of IE7: right float inside left float floats to the right of the first container with specified width */ 
	cursor: pointer;
}

.top_button_mid {
	/* background-image: url(../images/top_button_mid.png); */
	background-repeat: repeat-x;
	background-color: #ccc;
	height: 31px;
	cursor: pointer;
	float: left;
}

.top_button_link {
	padding-top: 7px; 
	padding-left: 13px; 
	padding-right: 13px; 
	text-align: center;
}
</style>
</head>
<body>

<div class="container">

	<b>Three buttons, the sides of which float to the right extreme in IE7</b>
	<br />
	<br />

	<div class="button_holder">
		<div class="top_button_mid">
			<div class="top_button_right"></div>
			<div class="top_button_left"></div>
			<div class="top_button_link">
				<a href="index.html" title="Home">Home</a>
			</div>
		</div>
	</div>

	<div class="button_holder">
		<div class="top_button_mid">
			<div class="top_button_right"></div>
			<div class="top_button_left"></div>
			<div class="top_button_link">
				<a href="other.html" title="Home">Other</a>
			</div>
		</div>
	</div>

	<div class="button_holder">
		<div class="top_button_mid">
			<div class="top_button_right"></div>
			<div class="top_button_left"></div>
			<div class="top_button_link">
				<a href="weather.html" title="Home">Weather</a>
			</div>
		</div>
	</div>

	<br style="clear: both;" />

</div>

</body>
</html>

Say I have the code:

Code:

<div style="float: left">left</div>
<div style="float: right">right</div>

In Opera, Firefox and IE, "left" will be on the left side of the scren, "right" will be on the far right. Now let's say I nest those two in a parent. I want the parent to expand with the child's content, so I float it too:

Code:

<div style="float: left;">
	<div style="float: left">left</div>
	<div style="float: right">right</div>
</div>

In Firefox in IE, "left" is still on the far left and "right" on the far right. In Opera, it collapses the div so they're right next to each other, or "leftright".

Now I could set a width of 100% on the parent, but the situation I'm actually using something like this in is more complicated -- padding, margins, etc. So setting a width of 100% makes the parent overflow it's parent nodes.

I've tried not floating the parent and setting it to overflow: auto, but that doesn't seem to work either. Is there an easy fix I'm missing?