CSS - 3 Css Issues, Including A Float Problem In Ie6

Greetings,

Basic Layout is:
Page-Containter
-> Header-Container
-> Side-Container
-> Content-Container
-> Footer-Container

Header is normal

Side is a Float Left with a width of 250

Content has a left margin of 260 (to allow for the Side-Container)

Footer is normal.

Pretty basic.

In the content area there are more divisions to handle different sections of data.

The problem is that in some of the content sections, I need to have dynamically allocated "blocks" of data that form psuedo "columns". I do this by doing a float:left on each of the content blocks. (generally a 250px width)

That way if I show 1 or 5, they all snug up next to each other and wrap properly in the browser. Still pretty basic.

Until ... drum roll please ... the next section.

Since the content is "float:left", it's removed from the layout and the following sections will just "snug up" next to the last content block.

I want the section to "clear" the previous content division, but don't really have a clean way to declare the "height" of that division, due to the dynamic nature of the data.

Silly Rabbit ... just do a clear:left !!

In IE it works fine.

In Firefox, the clear:left command is clearing the previous container! (side-container ... aka: left nav bar)

First question: Which browser is right? is IE right and the clear:left should be contained to it's own division? or is firefox right and the clear:left checks all float:left regardless of division?

Second question: If IE is right, what is the fix ... if Firefox is right, how should I actually structure this?

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!

subject isn't too good

anyhow.. i have 4 cells

__ __
|1 | |2 |
--- ---
__ __
|3| |4 |
--- ---

2 and 4 are said to float right, such that 1 and 3 define the height of the page..

but.. when the contents of 2 go LONGER than the contents of 1, number 4 doesn't float right properly.. instead this happens

__ __
|1 | |2 |
--- | |
--- | |
|4| ---
---
__
|3|
---


do you see that? 4 tries to float right, but since it's called underneath 1, and 2 is extended, floating right relative to the page doesn't make it ACTUALLY float right

any thoughts that will render this properly? (namely that cells 1 and 3 will inherit the height of 2 and 4 somehow?)

Hi all

i have a problem with a website i am building. It is very annoying. I have a masterpage with a float left menu, a contentplaceholder and a float right element. It used to work correctly but now it floats right OK but when I zoom in the left menu and content zoom correctly but the right float overlaps the content as though it is stuck. I have tried all sorts of things but nothing I can find works. Here is the css :
body
{
height:100%;
}
#div.row span.left {
float: left;
text-align: left;
font-weight: bold;
color: #fff;
width: 49%;
}

#div.row span.right {
float: right;
text-align: right;
font-weight: bold;
color: #fff;
width: 49%;
}




#container
{

width: 100%;
margin: 10px auto;
background-color: #fff;
color: #333;
border: 1px solid gray;
line-height: 100%;
}

#top
{
padding: .5em;
background-color: #FFFFFF;
border-bottom: 0px solid gray;
height: 46px;
font-family: Arial, Helvetica, sans-serif;
font-size: 2.5em;
color: #006000;
text-align: center;
}

#top h1
{
padding: 0;
margin: 0;
font-family: Arial, Helvetica, sans-serif;
background-color: #FFFF66;
}
#leftnav
{
float: left;
width: 167px;
height: 483px;
margin: 0;
padding: 0;
height: 409px;
list-style: none;
margin: 0;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
font-size: 1em;

}
#link
{
}

ul#navigation
{
width: 9.2em;
float: left;
margin: 0 0px 0 0;
padding: 1em;
height: 497px;
font-family: Arial, Helvetica, sans-serif;
font-size: 1em;
color: #0207f6;
}
ul#navigation li
{
list-style:none;
background-color:#ECEEFA;
border-top: solid 1px #ECEEFA;
text-align: left;
margin: 0;
}
ul#navigation li a
{
display:block;
text-decoration: none;
padding: .25em;
border-bottom: solid 1px #39f;
border-right: solid 1px #39f;
height: 21px;
width: 141px;
}


#rightnav
{

float: right;
width: 160px;
margin: 0;
padding: 1em;
height: 399px;
font-family: Arial, Helvetica, sans-serif;
text-align: center;
right:0;

}

#content
{

margin-left: 203px;
border-left: 0px solid gray;
margin-right: 0px;
border-right: 0px solid gray;
padding: 1em;
width: 100%;
height: 20px;
font-family: Arial, Helvetica, sans-serif;
font-size: 1em;
text-align: center;
margin-top: 0px;
width: 619px;
}
#h2
{
color:#ff0000;
font-weight: bold;
text-align:center }

any ideas anyone?

Andy

Hello,

Not so long time ago I had a problem in firefox when i placed float content in another div. Basically the parent div did not want to wrap my float div's.

Thanks to Kravvitz I solved this by following the url over here

http://css-discuss.incutio.com/?page=ClearingSpace

However today I tried doing the same thing, and I realized that now, my screen is showing fine on FireFox, but not on IE6.0!

here I placed some html to show my problem:

Code:

<html>
  <head>
    <style>

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

      div.myBox{

        border: 1px solid red;
        display: inline-table;
      }

      div.myBox:after {
        content: ".";
        display: block;
        height: 0;
        font-size: 0;
        clear: both;
        visibility: hidden;
      }


      div.dofloat{

        float:left;
        border: 1px solid green;
      }

    </style>
  </head>
  <body>

    <div class="myBox">
      <div class="dofloat">
        float1
        <br />
        <br />
      </div>
      <div class="dofloat">
        float2
        <br />
        <br />
      </div>
    </div>
  </body>
</html>

If you open this html page in firefox you will notice that a red border is wrapping two green boxes. However opening it in IE6.0 shows a red line in top, and the two green boxes under it.

I know that this is because the float objects are not wrapped automatically, however the hack i have placed in the above html solved it for fire fox.

What would be the best way to make it work in IE6.0 as well?

I did find a hack, that is to place height: 1px; in the div.mybox body:
Code:

div.myBox{

        border: 1px solid red;
        display: inline-table;
        *heght: 1px;
      }

However I am not sure if this is the best way to tackle this problem... thanks for any comments

Regards,
Sim085

Page: http://dev.donmyersministries.com/test.html

Ok, time is money, I decided to change my design a little bit because the way I was headed wasn't working. Now this isn't, I'm fixin to just go back to tables, this is retarded.

Anyway, my problem. In FireFox/Opera my right hand column is fine (2 column layout), in IE however, it is pushed down below the left hand column. The left hand side is floated left.

An image if it helps at all:


Please help, before I abandon CSS layouts, again.

later

Hello, I'm new to CSS and I'm in the process of building my first table-less page. It is quite exciting, but I'm having one major problem. For some reason, I cannot get my main content div to float next to my side bar navigation. In the normal write up, it works in IE but not Firefox or Opera. I took just the essential parts of the code to create a test page for this forum, and now it doesn't even work in IE!!!

Here is the code:
Code:

<html>
<head>
  <style TYPE="text/css">
	#topNav {
		margin: 10px 0px;
		border: 1px solid #000;
		width: 100%;
	}

	#sideNav {
		margin-right: 10px;
		border: 1px solid #000;
		width: 150px;
	}

	#main {
		margin: 0;
		border: 1px solid #000; 
		float: left;
	}
  </style>
</head>

<body>
	<div id="topNav">
		Top Nav
	</div>
	<div id="sideNav">
		Side Nav
	</div>

	<div id="main">
		MAIN CONTENT AREA				
	</div>
</body>
</html>

Any help would be greatly appreciated!!!

I would be VERY appreciative if someone could tell me why the big quote mark in the bottom left text box of this page does not look correct in IE7...it looks great in Firefox...the big quote mark should be raised above the text as it is in FF....

I'm floating 2 <p> elements there, and put borders around the <p> elements to see what was happening...I even put the <p> elements inside a container <div>, but that didn;t help....I reluctantly used a negative margin in FF, but the same doesn;t work in IE....Am I missing something simple here?

Thanks for any help...

Hi,

Have this web page with a lot of divs in it.

I have specified that all divs should be float:left in my css-file so that they will be rendered next to each other. I have noticed that when my browser is smaller than the actual web page some of the divs are rendered below and not to the right. How can I force the browser to still render them to the right. I would like to scroll to the right rather than down.

Can anyone help me with this problem?

/H

Hi,

I am stuck on this css code and need some different eyes to look at it

I have a image on the left hand side and then text next to it

here is the css code
Code:

.topone
{
height:85px;
}

.left
{
float:left;
}

.right
{
float:left;

}

.rightone
{
font-style: italic; 
padding:10px;
text-align:left; 
font-family: arial; 
font-size:10pt;
}

.rightbottom
{
font-style: bold;
font-family: arial; 
font-size:10pt;
text-align:right; 
}

<div class="topone">
<div class="left">
<a href="/" title="Home"><img src="/newimages/new.jpg"/></a></div>


<div class="right">
<p class="rightone">This Website is used to move contruction materials from one place to another so handle with care and dont play around handle with care handle with care</p>

<p class="rightbottom">Home | Menu | Shopping | Store </p>


</div>
</div>

whats happening is the text next to the image in IE is next to it but in firefox the text is below the image
any idea

todd

Hello, I have developed some very simple code. This code is working well on FireFox (and also netscape) and Operan but not well on IE6.

The code is very simple. I have a div tag that containes two other div's. One div contains text to be aligned to the left (using float: left) and another div contains a list (ul) to be aligned to the right (using float: right). The following is the code I have so far: Code:

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

<html>
	<head>
		<style>
			.leftText {
				float: left;
			}

			.rightText {
				float: right;
			}

			.top ul {
				width: 100%;
				text-align:center;
				margin: 0;
				padding-left: 0;
				border: 0;
				list-style-type:none;
			}

			.top ul li {
				display: inline;
				text-align: center;
				float:left;
				border-right:none;
				background-image: none;
				padding-left: 5px;
			}

		</style>
	</head>
	<body>
		<div class="top">
			<div class="leftText">
				This is the text on the left.
			</div>
			<div class="rightText">
				<ul>
					<li>one</li>
					<li>two</li>
					<li>three</li>
				</ul>
			</div>
		</div>
	</body>
</html>

Now I did some testing before posting here. First of all I tried to hack it. What I did is add *float: right; inside the .top ul li {...} element. This naturally was not cought by FireFox and Opera, and thus the website still looked fine on these browsers. However when I tried it on IE6 I had a surprose. The list was alligned to the right, but instead of writing "one two three", it wrote "three two one".

I do not know how best to solve it, and be greatfull for any advise.

thanks and regards,
sim085

I started a new post on this one because it is something I have just noticed in FireFox, but not in IE6.

I have created a new html page with a top, middle and bottom div sections. The middle section contains two other div's, left and right. All these div's I wraped inside another div called container.

What I did (with CSS) is set the container with a width of 400px, and a solid red border. I then set the top and bottom with a height of 40px each. I did not set the height of the middle section since that would grow according to its content. The right div I set it as float:right and the left div I set it as float:left.

This worked fine but then I decided to set the bottom div as float:left ... and it broke in FireFox In FireFox, the container wraped only around the top div, and the other middle and bttom div remained outside that white container. Here is the code I used: Code:

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

			body {
				margin: 0;
				text-align: center;
				padding: 10px;
				background: #00ff00;
			}

			.container{
				width: 400px;
				margin: 0 auto 10px auto;
				padding: 0;
				text-align: left;
				background: #ffffff;
				border: 1px solid #d1c7ac;
			}

			.top {
				height: 40px;
			}

			.middle{

				/*
					can not put height here,
					since the middle section
					data changes from page
					to page.
				*/
			}

			.left {
				float: left;
				width: 200px;
			}

			.right {
				float: right;
				width: 200px;
			}

			.bottom {
				height: 40px;
				float: right;
			}

		</style>
	</head>
	<body>

		<div class="container">

			<div class="top">
				Top Section
			</div>

			<div class="middle">

				<div class="left">
					Left Section.
				</div>

				<div class="right">
					Right Section.
				</div>

			</div>

			<div class="bottom">
				Bottom Section.
			</div>
			<!--&nbsp; placed here -->
		</div>

	</body>
</html>

As I said this problem only apears in FireFox, and in IE6 it does not show. I know I am doing something wrong, mostly because I still do not know all about what a float do. I know it is because of the float thing. because what I did is add an &nbsp; (space) before the end of the container div wraped around the middle, bottom and float as well.

I am sorry for posting yet another question on floats. Thanks for any advise and sugestions.

regards,
sim085

I am trying to re-write a forum post box that is fully CSS and XHTML compliant.

I have got this working successfully in Safari, Firefox and Opera on the Mac, but it fails on IE6 on the PC.

I cannot work out what the problem is.

Can anyone help?

(URL fixed)
http://centerstageproject.com/test/index2.html

As you can see that box that contains the post flows to the same height whatever the content. Screen shot from Safari attached.

In IE6 though the left content (ie member details) does not begin until the post content is finished on the right side of the box.

I usually never have problems with CSS layouts but whatever reason I'm struggling with this one...

I have a container div and inside it I have 4 divs (2 on the left stacked on each other and two on the right stacked on each other).

Code:

#container {
height: 604px;
width: 920px;
}

#container_left {
height: 604px;
width: 597px;
float: left;
}

#container_right {
height: 604px;
width: 323px;
float: right;
}

#left_top {
background-image:url(images/001.jpg);
background-repeat:no-repeat;
height: 501px;
width: 597px;
}

#left_bot {
width: 597px;
height: 103px;
}

#right_top {
width: 323px;
height: 308px;
background-image:url(images/002.jpg);
background-repeat:no-repeat;
}

#right_bot {
background-image:url(images/003.jpg);
background-repeat:no-repeat;
width: 323px;
height: 296px;
}

all the divs are empty at the moment (just a bg image) except for #left_bot....HTML below...

Code:

  <div id="container">
    	<div id="conrainter_left">
        	<div id="left_top"></div>
            <div id="left_bot"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Get Started','','images/start_rollover.jpg',1)"><img src="images/start.jpg" alt="Click here to Get Started" name="Get Started" width="597" height="103" border="0" id="Get Started" /></a>
            </div>
        </div>
        <div id="conrainter_right">
            <div id="right_top"></div>
			<div id="right_bot"></div>
        </div>   
    </div>  <!--end container-->

The results I'm getting...The container left div looks good. The container right div is not to the right of the page, but instead to the left of the page below the left div. Instead of floating it right its pushing down to the next line.

Any help would be appreciated. Thanks.