Adjusting Div Height accordingly

and image align in a Div

Page 1 of 1

6 Replies - 1374 Views - Last Post: 31 October 2007 - 03:08 PM

#1 kyrotomia  Icon User is offline

  • D.I.C Head

Reputation: 3
  • View blog
  • Posts: 72
  • Joined: 05-May 07

Adjusting Div Height accordingly

Posted 24 October 2007 - 07:06 PM

Hi. I need some help again (sorry it is not the first time I ask help for the same project , I've tried several things and I'm now stuck on same problems , but in a different way).

My problem is mainly that IE and Firefox doesn't align the image as I want. I've added the project (Attached File  SiteLayout.zip (142.47K)
Number of downloads: 105) so you can easily understand what is going on. I need the right content separator to align with the right-bottom one (quite obvious)...

The way I made that part : there is a top div and the bottom div, where my image is. I tried to set the top div with a fixed height and the bottom one too, but with vertical align set to bottom. I've succeeded to align under IE, but doesn't in FF or vice versa.

My second problem is when I stretch the browser window very small, all the layout start to spread all over and screw up. I really don't know how to fix this.

This is like my 10th attempt at coding this. I am working hard on using CSS and divs instead of tables, because I really easily succeeded on doing what I want using tables :S.

Thank you a lot for any help , I'm trying to help this club in my town by offering them a website ( and also trying to remove my bad habits of using tables to layout the site :P).

Is This A Good Question/Topic? 0
  • +

Replies To: Adjusting Div Height accordingly

#2 axel  Icon User is offline

  • Bug Juice Doesn't Come in a Jar
  • member icon

Reputation: 2
  • View blog
  • Posts: 1,944
  • Joined: 31-December 06

Re: Adjusting Div Height accordingly

Posted 24 October 2007 - 07:12 PM

This should probably be in the CSS section.


Anyways, as always, make sure your margins and paddings are set to 0px on all of your divs. FF sometimes needs you to define those before it will look right.

See if that works and if not I will try helping some more.
Was This Post Helpful? 0
  • +
  • -

#3 supersssweety  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 22
  • View blog
  • Posts: 373
  • Joined: 16-March 07

Re: Adjusting Div Height accordingly

Posted 24 October 2007 - 07:31 PM

Axel is right always remember...add margin and padding to paragraphs and H1 tags, never to the #divs or anything that contains because IE6 and FF/IE7 render padding differently
Was This Post Helpful? 0
  • +
  • -

#4 kyrotomia  Icon User is offline

  • D.I.C Head

Reputation: 3
  • View blog
  • Posts: 72
  • Joined: 05-May 07

Re: Adjusting Div Height accordingly

Posted 25 October 2007 - 05:54 AM

Thanks for the replies;
I tried what you guys told me but still didn't work the way I want :S.

I also noticed the site doesn't render well in IE6 (right part being not alligned with the rest of the site).

Also, do you guys have any idea on why the render screw up when you stretch the browser window to very small?

Thank you guys for your help... If you guys can't help me... just tell it ; I'll stick to my table layout :).
Was This Post Helpful? 0
  • +
  • -

#5 ahmad_511  Icon User is offline

  • MSX
  • member icon

Reputation: 131
  • View blog
  • Posts: 722
  • Joined: 28-April 07

Re: Adjusting Div Height accordingly

Posted 28 October 2007 - 04:26 PM

Hi there.

Quote

Also, do you guys have any idea on why the render screw up when you stretch the browser window to very small?

Ok
This is like (word wrapping), when you reach the end of line, the content will automatically moved to a new line.
I don't know if there is a direct way to remove "wrapping".
But…
If you put all DIVs you already have in one DIV and assign it width property equals to the header width, your page then will have a fixed width and it'll scrolled horizontally when you try to stretch it to very small size , and contents will not affected.
Add this code after your Header div tag
<div style="width:697px;">


And don't forget to close the tag after the last DIV's end tag ,that's make it as Container fot all Divs

Regards
Was This Post Helpful? 0
  • +
  • -

#6 wingz198  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 55
  • Joined: 14-October 05

Re: Adjusting Div Height accordingly

Posted 31 October 2007 - 01:17 PM

View Postahmad_511, on 28 Oct, 2007 - 05:26 PM, said:

Ok
This is like (word wrapping), when you reach the end of line, the content will automatically moved to a new line.
I don't know if there is a direct way to remove "wrapping".
But…

Regards


I'm not completely sure on this, but doesn't the overflow option have to do with 'wrapping'?
Was This Post Helpful? 0
  • +
  • -

#7 ahmad_511  Icon User is offline

  • MSX
  • member icon

Reputation: 131
  • View blog
  • Posts: 722
  • Joined: 28-April 07

Re: Adjusting Div Height accordingly

Posted 31 October 2007 - 03:08 PM

View Postwingz198, on 31 Oct, 2007 - 01:17 PM, said:

I'm not completely sure on this, but doesn't the overflow option have to do with 'wrapping'?


No as I know, the overflow controlling scroll options like (show/hide scrollbar)
And it affects the contents of an object not the object itself.
Assuming that we applied overflow:scroll to the document's body.
What is changing here is the whole window not the body, so I think it will not work properly

But thanks because you let me found another way to solve this problem.
What if we adjust the body width property to match the header width (697px)?
I guess this will be much easier

body {
	background-image: url(images/fond.gif);
	background-repeat: repeat-x;	
	background-color:#4499b1;
	width:697px;
	} 


Was This Post Helpful? 0
  • +
  • -

Page 1 of 1