CSS - Float:left After Clear:left Botched In Ie

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;
}

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.

This is my first try at css and i have been at it about a week on and off. I have tried to use examples from here and the o'reilly CSS cookbook. I want to create a two column row of pictures with a caption. I selected DIV as the tool (my css is below). The container DIV looks great. I want the div.float, however, to start a second row when a third picture is added and to continue thereafter with successive two column rows. Unfortunately, each of my rows contain only one picture.

here is my css style sheet. A demonstration of the problem can be seen at:

http://www.yourline-online.com/demo05/?How_to_create_pages
Code:

div.float {
    float: left;
    BORDER-RIGHT: #808080 2px solid;
    PADDING-RIGHT: 2px;
    BORDER-TOP: #808080 2px solid;
    PADDING-LEFT: 2px;
    FONT-WEIGHT: lighter;
    FONT-SIZE: medium;
    PADDING-BOTTOM: 20px;
    MARGIN: 16px 2%;
    BORDER-LEFT: #808080 2px solid;
    COLOR: #000000;
    PADDING-TOP: 2px;
    BORDER-BOTTOM: #808080 2px solid;
    HEIGHT: 200px;
    WIDTH: 150px;
    BACKGROUND-COLOR: #ffffff;
    TEXT-DECORATION: none
  }
  
div.float p {
   text-align: center;
   }
div.container {
  border: 2px dashed #333;
  background-color: #ffe;
  }
div.spacer {
  clear: both;
  }

MY HTML is like this:
Code:

H1>How to create pages</H1>
<P>The headings are used for splitting up the content file. An H1, H2 or H3 heading will dynamically split the document into new pages in the table of contents. An H4-heading is used as a heading within a page. See the following pages...<BR></P>
<P></P>
<DIV class=container>
<DIV class=spacer></DIV>
<DIV class=float><IMG height=100 alt="image 1" src="image1.gif" width=100> 
<P>caption 1</P></DIV>
<DIV class=spacer></DIV>
<DIV class=float><IMG height=100 alt="image 2" src="image2.gif" width=100>
<P>caption 2</P></DIV>
<DIV class=spacer>
<DIV class=float><IMG height=100 alt="image 3" src="http://www.yourline-online.com/demo05/image3.gif" width=100>
<P>caption 3</P></DIV>
<DIV class=spacer></DIV></DIV></DIV>

Hi all,

I've got an item like this:

<div (holder)>
<div (image) style="float: left;">image</div>
text here
<div style="clear: left;"> </div>
</div>

But the trouble is that In the layout, I've got the menu floated left, too, and that 'clear: left;' seems to be clearing the left menu as well... Why?

Cheers

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?

I came across this today and realized I didn't have a nice clean answer for how to handle it. A client was editing a page where text was wrapping around an image. Something like this:

Code:

<div style="border: 1px solid blue; float: left; width: 100px; height: 200px">image</div>
<p>This is some text.</p>
<ul>
<li>list item1</li>
<li>list item2</li>
<li>list item3</li>
</ul>

She asked why the bullets weren't appearing. Sure enough, the bullets appear underneath the float, not next to it. Now I could enclose the bullets and the paragraph in a div and give that div some left padding, but this is a free form text page where she should just be able to type and have the text flow around the floated element. I shouldn't have to manually tweak styles on elements just so she can have bullets show up in the right place.

Is there an easy CSS method to make the bullets appear in the right place whether they're next to a floating element or not?

Hey all, I'm having an issue with the float property. I have 2 nested div tags both floated left, to create two columns, but the div tag holding them doesn't seem to stretch around them. it's looks basically like this...

<div id="container">
<div id="leftCol">
stuff
</div>
<div id="rightCol">
more stuff, WOOT!
</div>
</div>

I only run into the problem with FireFox, so i know that i'm not doing something right! Can anyone help.. thanks!

Hi,

Please help!
I have multiple ul lists and I'm trying to float each list left and center on the screen all of them using css. I'm not trying to have an inline list. I'm trying to keep the three list, float left but center on the page.

floating works but I'm having problems centering on the page. I have used margin-left and right:auto but because I'm using float left if stays on the left. Does anyone have any solutions.

thank-you in advance

Simple layout but having issues with the left sidebar float aligning flush with the container next to it on top in IE. Works perfectly in FF of course.

Here is the link to the page: http://www.kofc2332.org/new_site/

All help/suggestions/guidance is appreciated.

The site is he http://andamu.org/main/yarn/ or "andamu.org /main /yarn"

The appearance of the date, byline, comments/trackbacks and tags on the left, aligned beneath one another in IE 8 is the desired appearance.

In Firefox, the date appears in the correct spot, but the rest appears to its right instead of below it.

(I am modifying the Pico theme in MT5.)

I'll try to get the relevant bits here, but please ask if I can provide more detail.

The html part:
html4strict Code:
Original - html4strict Code <h2 class="date-header">September 6, 2010</h2> <div class="asset-footer"> <p class="asset-footer-info"> <span class="byline"> <span class="vcard author">Sivani</span> at <abbr class="published" title="2010-09-06T18:47:04-08:00"> 6:47 PM</abbr> </span> <span class="separator"><br /></span> <a href="http://andamu.org/main/yarn/2010/09/the-socks-of-doom---part-ii-sucked-in-again.html#comments"> No Comments</a> <span class="separator"><br /></span> <a href="http://andamu.org/main/yarn/2010/09/the-socks-of-doom---part-ii-sucked-in-again.html#trackbacks"> No TrackBacks</a> </p> </div> <!-- class="asset-footer" -->

  

  


  <h2 class="date-header">September  6, 2010</h2>


     <div class="asset-footer">


        <p class="asset-footer-info">


            <span class="byline">


               <span class="vcard author">Sivani</span> 


                   at <abbr class="published" title="2010-09-06T18:47:04-08:00"> 6:47 PM</abbr>


               </span>    


               <span class="separator"><br /></span> 


               <a href="http://andamu.org/main/yarn/2010/09/the-socks-of-doom---part-ii-sucked-in-again.html#comments">


                   No Comments</a>


               <span class="separator"><br /></span> 


               <a href="http://andamu.org/main/yarn/2010/09/the-socks-of-doom---part-ii-sucked-in-again.html#trackbacks">


                   No TrackBacks</a>


        </p>


    </div> <!-- class="asset-footer" --> 

The css part:
Code:

.date-header {
    float: left;
    text-align: right;
    padding: 5px 20px 4px 0;
    margin-left: 20px;
    border-right: 1px solid #eee;
    width: 128px;
    color: #999;
}
.asset-footer {
    float: left;
    text-align: right;
    padding: 5px 20px 4px 0;
    margin-left: 20px;
    border-right: 1px solid #eee;
    width: 128px;
    color: #999;
    clear: all;
}

Note: I have tried using clear: all; in the .date-header to no effect.

How come sometimes when I try to float left a div next to another div, it appears underneath the original and not all next to it?

<div1></div1>
<div2></div2>

If I use float left on div1, div2 appears underneath div1, not next to it?

confused beyond help!

Hey, so I am a beginner in css and I can't seem to figure out this problem. I am trying to get a td to float: left, and it works just fine on firefox, but IE7 is not showing the float. Here is the code I have for it

/* Style for Entries in Category View (Cards View) */
/* -------------------------------------------------------- */
table.sobi2Listing {
}
table.sobi2Listing td {
vertical-align: top;
float: left;
height: 1%;
width: 97%;
}

/* new */
div.vcard_item {
margin: 1px 0px 2px 0;
padding: 6px;
width: 97%;
border:1px solid #dddddd;
background-color:#fbfaf2;
-moz-border-radius: 5px;

The actual page is findawebsitedesigner.info/directory-2.html
If you look at the entries, they are all floated perfectly in firefox, but not in IE7. If anybody has the fix to this I would love your help.