CSS - Ie6/win Misaligns Left And Right Floating Divs

Hi im experiencing big problems with creating this layout. I spent whole day with positiooning this divs but i cant do this final layout. Everytime i want to float divs to left DIV 1 and DIV 2 are ok but DIV 3 jump to new line under DIV 2 and dont fit the gap between DIV 3 and div 1 . Can someone please help me ? Thanks ...

link to image : xipic.eu/ufiles/njf25uy8_divs.png

Hello,

can anyone help me with this? I'm having trouble floating some divs and I can't find the problem.

1. navigation should be aligned with the bottom of the h1 logo
2. the content div should come next to the list of brands. The content div should overlap the black bg at the top.

www. claeysconsult . be / misskado / index2.html

Thanks in advance...

Hello
I am very new to CSS. One of my problems is that my web experience is only in tools that generate the code. I"m needing what I"m told is a simple thing to do, but not finding it easy for me

I tried to post with some links to my site, etc, but the rules won't let me post any links. I have posted in another CSS site, but fine it very inactive and not getting any help.

What I'm trying to do

All items below to make up the header of the site. A background graphic which fills across the screen, no matter the size of the window. I have this working, although if I shrink the window too far, it overwrites the graphic in item 2 below. A left justified logo graphic. Working fine. A Centered graphic. I have this showing, but it is not quite centered right, and it is a bit smaller than actual, and I cannot get it to space down a bit. (tried padding, does nothing. Trying margin spaces everything down, including item 1 above. A right justified graphic. This shows, but is VERY SMALL, much smaller than original graphic, and it does not right justify.
NOTES
The current code, below, is based on a tutorial I went through, using % for width. The idea being that if it is built based on percent of width, then whatever width of window, it would adjust. I used 900px for original calculations. I find that it only fills the window as if it is 900 px wide. So I redid the percentages based on 1500px.

I've done lots of reading, Googling, and been trying all kinds of stuff and getting not too far with it. Tried px for width too, seems worse.

Here is a print screen of the header:

[IMG]URL[/IMG]

Sigh...sorry...even img code has a url, and even though it showed in preview, I see it will not display it in actual message.

The site I"m working on is shuttermaster.co (not com), where you can see what it looks like now.

CSS Code
Only including the code relevant to the header issue. I do have menu code in CSS, but it is not complete, and I'm not having problems with that.

Code:

	#myHeader {width:auto;height:133px;
		background:url(/photos/i-QXfPgvM/0/S/i-QXfPgvM-S.jpg) repeat-x}

 		#myLogo {
				 float:left;
				 width:10%;
				 height:150px	;
				 margin-left:2.22%;
				 display:inline;
				 background:url(/photos/i-sttGP6Z/1/O/i-sttGP6Z.png) no-repeat}
			   

		#myConame {
				
				width: 15.33%;
				height:90px;
				margin-left:auto;
				margin-right:auto;
				background:url(/photos/i-T3ZjJ8R/2/Th/i-T3ZjJ8R-Th.png) no-repeat}
		
		
		#myBanner {
				float:right;
				width: 29.73%;
				height:150px;
				background:url(/photos/i-BkhSxLJ/1/Th/i-BkhSxLJ-Th.png) no-repeat}

The HTML Code

Code:

<div id="myHeader">
<div id="myLogo"></div>
<div id="myConame"></div>
<div id="myBanner"></div>
<div style="clear: both;"></div>
<div class="menu">
  <ul>
        <li><a href="http://shuttermaster.co">Home</a></li>
        <li><a href="#">Portfolio</a></li>
		<li><a class="drop" href="http://shuttermaster.co/galleries" >Galleries
			<!--[if gte IE 7]><!--></a><!--<![endif]-->
			<!--[if lte IE 6]><table><tr><td><![endif]-->
			<ul>	
				<li><a href="http://rogerewingphotography.smugmug.com/Landscapes/Landscapes/19892237_mHBK84">Landscape</a></li>
				<li><a href="Link">Drop 2</a></li>
				<li><a href="Link">Drop 3</a></li>
        </ul> <!--[if lte IE 7]></td></tr></table></a><![endif]-->
   </li>
        <li><a href="#">About Me</a></li>
        <li><a href="#">Guestbook</a></li>
  </ul>
</div> 
</div>
<div style="clear: both;"></div>

I hope I have been clear enough. Hoping someone can point me the right direction.

Regards, and thanks....

I've used divs before and got them to work just fine. I've read previous posts and can't find the answer I'm looking for because it seems so basic.

But here is my problem. I simply can't get the divisions to float left or right. They just sit on top of one another.

Here is my style sheet code:

Code:

#container
{
	margin: 0px;
	padding: 0px;
	width: 800px;
}

#header 
{
	margin: 0px;
	padding: 0px;
	background-color: Blue;
}

#menu 
{
	background-color: Gray;
	float: left;
	margin: 0px;
	padding: 0px;
	width: 140px;
}

#content 
{
	float: right;
	margin: 0px;
	padding: 0px;
	width: 650px;
}

#footer 
{
	margin: 0px;
	padding: 0px;
	width: 800px;
}

and my HTML:

Code:

<div id="container">
    <div id="header" align="center">
      <!-- #INCLUDE VIRTUAL="includes/example_header.aspx" -->
    </div>
    <div id="midsection" align="center">
      <div id="menu">
        <!-- #INCLUDE VIRTUAL="includes/example_menu.aspx" -->
      </div>
      <div id="content">
        <!-- #INCLUDE VIRTUAL="includes/example_common_content.aspx" -->
          <p>
            Garbage.
          </p>
      </div>
    </div>
    <div id="footer" align="center">
      <!-- #INCLUDE VIRTUAL="includes/example_footer.aspx" -->
    </div>
  </div>

Thanks in advance for your help.

Hello all, sorry if this is a "newb" question, but I am having trouble with the code on my site. The element "#arrival" is not displaying the proper height unless I literally type code in to fill it up the full 400px. I haven't implemented any paragraph styles, I just want to get the basic elements done for this landing page.

How would I go about fixing this? Also, do I have to "float" the "#arrival" element? I would like to have the dog house overlap the first div element of the dog jumping (#dog) like in the jpg. Any help would be greatly appreciated.

Here is what it should like: http://i33.tinypic.com/2uh7evm.jpg

But this is actually what is happening:
http://www.amandambruce.com/DROH/index.html


Thanks in advance,
Amanda


p.s. here is the code directly from the source:
Code:

<!DOCTYPE html PUBLIC "-//w3c//DTD XHTML 1.0 Transitional//EN"

"(URL address blocked: See forum rules)">
<html xmlns="html://(URL address blocked: See forum rules)/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;

charset=utf-8" />
<title>The Dachsund Rescue of Houston</title>

<style type="text/css">

body{
background: url(images/background.jpg) no-repeat top center;}

#contain{
width: 800px;
height: auto;
margin-left: auto;
margin-right: auto;
}
#menu{ width: 466px;
height: 98px;
float: right;
margin-top: 15px;
}
#dog{ width: 491px;
heigth: 257px;
margin-top: 19px;
margin-left: 22px;
float: left; }
/* margin-top is the menu plus the remaining pixels (19) so,

from the very TOP of the page. I guess you keep "adding"
*/



#community{ float: right;
background: url(images/community_spot.jpg) no-

repeat;
width: 231px;
height: 259px;
margin-top: 19px;
margin-right: 22px;
}

#arrival{
clear: right;
background: url(images/arrivals.png) no-repeat;
width: 800 px;
height: 400 px;


}

p{
font-family: helvetica;
font-size: 12pt;
color: #000000;
padding-left: 10px;
margin-right: 10px;
}

</style>
</head>
<body>
<div id="contain">
<div id="menu">
<a href="about.html"><img src="images/about_btn.png" alt="About

button" title="About" border="0"/></a>
<a href="adopt.html"><img src="images/adopt_btn.png" alt="Adopt

button" title="Adopt" border="0"/></a>
<a href="help.html"><img src="images/help_btn.png" alt="Help

button" title="Help DROH" border="0"/></a>
<a href="resources.html"><img src="images/resources_btn.png"

alt="Resources button" title="Resources" border="0"/></a>
<a href="contact.html"><img src="images/contact_btn.png"

alt="Contact button" title="Contact" border="0"/></a>
</div>
<div id="dog">
<img src="images/jumping.jpg" border="0"/> </div>
<div id="community"> </div>
<div id="arrival"> lll
</div></div>
</body>
</html>
Reply With Quote

Hi,

If I have

Code:

#parent {
  background-color: red;
  padding: 2px;
  margin: 2px;
}

#child1 {
  float: left;
}

#child2 {
  float: left;
}
</style>

<div id="parent">
  <div id="child1">
   Some text
  </div>
  <div id="child2">
   Some text 2
  </div>
</div>

Then the two child divs will appear underneath the parent one, whereas I want the background from the parent one to be the backdrop for the two child divs. if I remove float: left then they appear in it, but underneath each other. I want them side by side.

Is this possible with css?

[code]

<div id="wrapper" style="background-color:black;padding:2px;overflow:visible;">

<div id="left-floating-box" style="background-color:red;float:left;">asdfsadf</div>
<div id="right-floating-box" style="background-color:blue;float:right;">asdfsadf</div>

</div>


[code]


here is a problem, warpper div doesnt strech to the height of the floating divs, ofcourse when you get rid of floating then everything work but i need this to work as it intended and that is two floating boxes with in one div and this div would wrap around two floating boxes and that way background would stretch as well. I rember solving this problem. Long time ago, but for some reason i am stock right now with this problem. Any one can refresh or sugest anything. Thank you.

Hi there!

I'm using this code:
CSS:
Code:

#content {
margin-top: 75px;
width: 597px;
height: auto;
}

#left {
width: 110px;
height: 497px;
margin: 0px;
padding: 0px;
float: left;
}

#right {
width: 485px;
height: 100px;
}

HTML:
Code:

<div id="content">
<div id="left">
&nbsp;
</div>
<div id="right">
&nbsp;
</div>
</div>

---------

But the right-div goes under or over the left-div. I've tried clear:both; between the div's, but it didn't help.

URL

I've been beating my head against the wall over this problem for two nights now.

I'm working on our new site and everything is formatting well across all major browsers. But when I go to print the page, the results are less than desirable, except for Opera on my Mac. For some reason that browser handles floating divs great. But Safari, Firefox 3 and IE 7 all barf on the divs.

Particularly, if the text in my main content area exceeds a page length, the remaining text displayed on subsequent pages is displayed down the page and not at the top like one would expect. Another problem is that sometimes the first page will just show me the header and menu of my content and will begin displaying the main content on the second page.

I've played around with clearing floats when printing but this just re-arranges the divs and of course overlaps with other floats.

Could one of you experts please take a look at this page in particular and the accompanying main.css file and tell me a quick way to prevent this with using just css attributes.

An example page is he www proterraonline com / dev / team.asp

While I have a print css linked in the source of the html, the code is the same as in the main.css at the moment.

Here's a link to the css file to make life a little easier.
www proterraonline com / dev / css / main.css

Thanks.

I am working on this site for a client and I can't figure out what the hell I'm doing wrong. It doesn't "work" in FireFox, which of course (I assume) means that IE is simply forgiving my errors, but let's not have a religious debate, let's solve problems.

http://www.nolower.com/example.php

http://www.nolower.com/css/public.css

I am curious about two things:

1) Why is my white background (the main div) not showing up on this page? I thought I had cleared every float, yet, still, there it isn't!

2) Why does the background shadow (the main div), a background image that extends into the padding in IE as you'll see, not show up on FireFox?

If anyone can help identify what I've done wrong and explain to me what made it break in CSS, I'd be very grateful. I've been trying to figure out the peculiarities of CSS and its very poor cross-implementation (not that tables were ever cross-implemented well either, oi) for about a year now and I always either make a new mistake or find something I haven't figured out yet.

Thanks!

Basically, #bodycont has a background.
When I type text into this div, it expands and the background is show.

However when I put the divs menu and news into it the background doesn't show.

I've had this problem before but I can't remember how to fix it

html4strict Code:
Original - html4strict Code <div id="bodycont"> <div id="menu"> <img src="imgs/menutop.png" /> </div> <div id="news"> wefwef </div> </div>

  

  


  


 <div id="bodycont"> 


      <div id="menu">


             <img src="imgs/menutop.png" />


         </div>


         


         <div id="news">


         wefwef


         </div>


     </div>


  

css Code:
Original - css Code #bodycont { background-image:url(../imgs/background.jpg); width:100%; height:auto; } #menu { width:245px; float:left; } #news{ width:545px; height:auto; float:right; }

  

  


 #bodycont {


 background-image:url(../imgs/background.jpg);


 width:100%;


 height:auto;


 }


 #menu {


 width:245px;


 float:left;


 }


 #news{


 width:545px;


 height:auto;


 float:right;


 }


  

What I have: I have a <div id="content"> that contains the main content of the site. In this <div> I have two other <div>s that are arranged in columns, using float. The left column forms the Navigation for the site and is surrounded by a black border.

Here is the problem: If the content on the right is small, the border on the left stretches from top to bottom (since the left div controls the height). However, when there is a lot of content on the right, the border on the left only surrounds the content of the left div and leaves space underneath the bottom border-line.

My question: Is there a way to "stretch" the left div so the border touches the top of its parent div on top and the bottom of its parent div on the bottom? Or in other words: Can I force the left div to have the same height as the right div?

Here is an example of what I have right now (before tackling the problem):

CSS:
Code:

#content {
	width: 800px;
	margin: 0;
	padding: 0;
}

#contentNav {
	width: 140px;
	float: left;
	border: thin solid black;
	margin: 0;
	padding: 0;
}

#contentMain {
	width: 600px;
	float: right;
	margin: 0;
	padding: 0;
}

HTML:
Code:

 
<div id="content">
	<div id="contentNav">
		<a href="">Link1</a><br />
		<a href="">Link2</a><br />
		<a href="">Link3</a><br />
	</div>
	<div id="contentMain">
		<p>Here comes a lot of text that spans over many lines.
	</div>
</div>

I have two div tags that I want to float next to each other. The page looks like this

<table>These Tables stretch 100% of the width</table>
<table>''</table>

<div class="ParentDiv">
<div class="menuholder"></div>
<div class="ChildDiv"></div></div>

in FF everything works the way I want to. In IE if I shrink down the browser then the second div tag drops below the first. I want to change this so that it does not drop below but remains in the same place.

Is there anything I can set to do that?

If I remove the float and change the position on the menuholder the childdiv tag does not drop but the menuHolder content does not stretch the size of the parentDiv and gets chopped off at the height of the childDiv

Code:

.ParentDiv {
	position: relative;	
	width: 100%;		          
	width:expression(document.body.clientWidth < 997 ? '997px' : '100%');
	min-width:997px;
	max-width:100%;
	overflow:hidden;
	min-height: 400px;
}
.ChildDiv {
	position: relative;	
	width: 100%;
	min-height: 400px;
}
.menuholder {
  background-color: #EFF3F5;
  color: #eef;
  position: relative;
  float: left;
  left: 0px;
  top: 0px;
  overflow: hidden;
  width: 160px;
  z-index: 100;
}