layout troubles

[tripwire66]

what i want to do shouldent be to difficult.

here is an out line of what i want to do i have most of the header built but i'm wondering how to place the photo div. should i float it?
http://tripwire66.com/v2/i/layout.gif

here is the code
http://tripwire66.com/v2/index.php

i'm pretty sure i have to right amount of div to provide the control i want and for later use maybe . any adive would be helpfull

[Paul O'B]

Hi,

If the photo is to go alongside the menu bar and nav and is never going to be any higher than the left side then you can just absolutely place it to the right and forget about it.

If however the photo is higher then the left side then it needs to be in the flow so you will have to float it so that it goes alongside and then clear it for following content. Remember that floats must come first in the html before the content they wrap around.

I notice you have made an error in your calculations and your menu should be 150px high and not 100px. Mozilla will crop the size to 100px whereas ie will let it expand.

#menu  { 
		position:relative;
  width:120px;
  height:150px;
  background:red
  }

Hope that helps. I'm assuming you didn't want code but just advice

Paul

[tripwire66]

Hi,

If the photo is to go alongside the menu bar and nav and is never going to be any higher than the left side then you can just absolutely place it to the right and forget about it.

If however the photo is higher then the left side then it needs to be in the flow so you will have to float it so that it goes alongside and then clear it for following content. Remember that floats must come first in the html before the content they wrap around.

I notice you have made an error in your calculations and your menu should be 150px high and not 100px. Mozilla will crop the size to 100px whereas ie will let it expand.

#menu  { 
		position:relative;
  width:120px;
  height:150px;
  background:red
  }

Hope that helps. I'm assuming you didn't want code but just advice

Paul

well that would explain why i couldent get the float right. I think this will work .
thank you so much agian!!!

[tripwire66]

Ok i thought i had it right. It works fine in firefox but falls to crap in IE what did i do wrong?

http://tripwire66.com/v2/

[Paul O'B]

Hi,

There are two things you need to consider.

The first is the border that you have given to each div which means the elements width will be increased by 2 pixels.

This means that in ie your nav gets pushed wider because its inner is 120px + 2px for the borders while its outer is also specifed at 120px. Moz on the other hand won't expand an element which is why the layout doesn' break in moz.

The second ie problem is that ie adds 3 pixels of space to content alongside a float and where space is tight there is nowhere to go so an element must drop.

The only solution is to cut off 3 pixels from the float using a negative margin which won't affect the size because ie adds it back on again to make the correct size.

heres the css

div { border:1px solid black;
	}

#all {
 width:600px;
 margin:0px auto;
 text-align:left;
 padding:15px;
 border:1px dashed #333;
 background-color:#eee;
 }
#header {
		 width:590px;
   height:400px;
   background-color:#FFF;
   }
#menu  { 
		position:relative;
  width:120px;
  height:234px;
  background: url(http://tripwire66.com/v2/i/menu_BG.gif) repeat-y;
  
  }
  
#nav   { 
		position:relative;
  width:118px;
  height:50px;
  margin:50px 0;
  }
  
#photo  {
		 float:right;
   width:465px;
   height:367px;
   background: url(http://tripwire66.com/v2/i/photo.jpg) no-repeat;
   }
* html #photo {margin-left:-3px} /* for ie only */  

That should sort it out

Paul

[tripwire66]

well that makes perfect sense and it works great. thank you allot.
Does the book you guys have on tableless layouts get into semi-complex fluid layouts ? and some of these little fix's ?
agian you are the master.

[Paul O'B]

For most of the fixes your probably best just to browse this forum as every question that can come up probably has

Books are good for understanding how things should work but its usually practice that tells you how they really work in the different browsers.

Paul