Today's Posts Follow Us On Twitter! TFL Members on Twitter  
Forum search: Advanced Search  
Navigation
Marketplace
  Members Login:
Lost password?
  Forum Statistics:
Forum Members: 24,254
Total Threads: 80,792
Total Posts: 566,472
There are 1667 users currently browsing (tf).
 
  Our Partners:
 
  TalkFreelance     Design and Development     HTML/XHTML/DHTML/CSS :

Div tag trouble

Thread title: Div tag trouble
Closed Thread  
Page 1 of 2 1 2 >
    Thread tools Search this thread Display Modes  
10-05-2005, 05:32 PM
#1
jabberwocky is offline jabberwocky
jabberwocky's Avatar
Status: Member
Join date: Oct 2005
Location: Calgary, Alberta, Canada
Expertise:
Software:
 
Posts: 278
iTrader: 0 / 0%
 

jabberwocky is on a distinguished road

  Old  Div tag trouble

Hi, im having some problems with the div tags on this


Example

when you resize your browser to 800x600 (ie or ff) and get the scroller and scroll down, my main wrapper div gets cut off, and the embeded div tags seem to sit on top of the wrapper. any idea how i can avoid this?

10-05-2005, 05:53 PM
#2
Bas is offline Bas
Status: I love this place
Join date: Jan 2005
Location: The Netherlands
Expertise: Frontend, vBulletin
Software: Coda, Photoshop
 
Posts: 607
iTrader: -1 / 0%
 

Bas is on a distinguished road

Send a message via MSN to Bas

  Old

Asuming that the divs on the left are floating, use this:
Code:
<div style="clear: left;"></div>
put that just infront of the closing tag of your wrapper.

10-05-2005, 06:29 PM
#3
sysblnk is offline sysblnk
Status: I love this place
Join date: Mar 2005
Location:
Expertise:
Software:
 
Posts: 640
iTrader: 0 / 0%
 

sysblnk is on a distinguished road

  Old

I believe you use 100% height. This means it will be 100% of the window height not 100% of the document height.

10-05-2005, 06:35 PM
#4
jabberwocky is offline jabberwocky
jabberwocky's Avatar
Status: Member
Join date: Oct 2005
Location: Calgary, Alberta, Canada
Expertise:
Software:
 
Posts: 278
iTrader: 0 / 0%
 

jabberwocky is on a distinguished road

  Old

Bas, thanks but didnt work. I added your style to my main wrapper, but nothing happened.

Sysblnk, yea I set html,body to height="100%". this allows my wrapper (also set to height="100") to extend the full document height, which also containts a repeating background image.

So still, no luck

10-05-2005, 07:55 PM
#5
hyproVision is offline hyproVision
Status: Creative Designer
Join date: Jan 2005
Location: London, UK
Expertise:
Software:
 
Posts: 1,498
iTrader: 12 / 100%
 

hyproVision is on a distinguished road

  Old

Wait hold on, Height "100%" ? You can't do that. You can only set width to 100%

10-05-2005, 08:12 PM
#6
sysblnk is offline sysblnk
Status: I love this place
Join date: Mar 2005
Location:
Expertise:
Software:
 
Posts: 640
iTrader: 0 / 0%
 

sysblnk is on a distinguished road

  Old

Not sure if I made it clear..but thats your problem its not the solution. 100% height will only adjust to the window size.

10-05-2005, 09:00 PM
#7
jabberwocky is offline jabberwocky
jabberwocky's Avatar
Status: Member
Join date: Oct 2005
Location: Calgary, Alberta, Canada
Expertise:
Software:
 
Posts: 278
iTrader: 0 / 0%
 

jabberwocky is on a distinguished road

  Old

yea, i set the following for my main 'wrapping' div


#center{
position:absolute;
left:50%;
width:404px;
margin-left:-200px;
height:100%;
background-image:url(./images/memxit-pillar.gif);
background-repeat:repeat-y;
background-position:center;
height:100%;
}
what this does, is puts the #center div tag in the center regardless of the size of the browser window. It also has a repeating background image that needs to extend from top to bottom. If i take away the height:100%, the div collapses on itself, as it has nothing in it.

Maybe im going about doing that the wrong way?

10-06-2005, 03:25 PM
#8
Stan is offline Stan
Status: Member
Join date: Aug 2005
Location:
Expertise:
Software:
 
Posts: 269
iTrader: 0 / 0%
 

Stan is on a distinguished road

Send a message via AIM to Stan

  Old


#center{
position:absolute;
left:50%;
width:404px;
margin-left:-200px;
height:100%;
background-image:url(./images/memxit-pillar.gif);
background-repeat:repeat-y;
background-position:center;
height:100%;
}
}
first off you have height as 100% twice, and a tip on making your code shorter

Code:
#center {
position: absolute;
left:50%;
width:404px;
margin-left:-200px;
height:100%;
background: url(./images/memxit-pillar.gif) repeat-y center;
}
unfortunately I am not very experienced in css to help, but I do know from experience a lot of my errors were simply from syntax errors so make sure to validate your code before thinking its all wrong.

10-06-2005, 09:22 PM
#9
derek lapp is offline derek lapp
Status: design rockstar
Join date: Jan 2005
Location: guelph, ontario
Expertise:
Software:
 
Posts: 2,246
iTrader: 0 / 0%
 

derek lapp is on a distinguished road

  Old

Originally Posted by hyproVision
Wait hold on, Height "100%" ? You can't do that. You can only set width to 100%
yes you can, quite easily in fact.

10-06-2005, 10:21 PM
#10
jabberwocky is offline jabberwocky
jabberwocky's Avatar
Status: Member
Join date: Oct 2005
Location: Calgary, Alberta, Canada
Expertise:
Software:
 
Posts: 278
iTrader: 0 / 0%
 

jabberwocky is on a distinguished road

  Old

i seem to have figured out what was causing this to happen. using the 'position:absolute;' seems to be causing this in FF, but not IE.

Using 'position:relative;' has cleared it all up. Although, I'm unsure as to why.

Closed Thread  
Page 1 of 2 1 2 >


Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 

  Posting Rules  
Smilies are On
[IMG] code is On
HTML code is Off
Forum Jump:
 
  Contains New Posts Forum Contains New Posts   Contains No New Posts Forum Contains No New Posts   A Closed Forum Forum is Closed