Jump to content


 


Register a free account to unlock additional features at BleepingComputer.com
Welcome to BleepingComputer, a free community where people like yourself come together to discuss and learn how to use their computers. Using the site is easy and fun. As a guest, you can browse and view the various discussions in the forums, but can not create a new topic or reply to an existing one unless you are logged in. Other benefits of registering an account are subscribing to topics and forums, creating a blog, and having no ads shown anywhere on the site.


Click here to Register a free account now! or read our Welcome Guide to learn how to use this site.

Photo

DIV boxes and Sizing problems


  • Please log in to reply
9 replies to this topic

#1 crumbs744

crumbs744

  • Members
  • 19 posts
  • OFFLINE
  •  
  • Local time:02:07 AM

Posted 26 March 2009 - 05:22 PM

Hi,
im putting together a site for a company (im new too it) and i have one thing im stuck on.
here is a link to the site and source code, because its hard to grasp sometimes when describing in writing.

http://www.humanresources.com.au/jit/test%...st/divtest.html

css:


body
{
background-color:#595759;
}



div.bg
{
margin: auto;
height:650px;
max-height:1000px;
width:680px;
border: thin #000;
background-image: url('images/background.gif');
background-repeat:no-repeat;
background-color:white;
overflow:visible;
}

div.leftmenu
{
width:131px;
height:650px;
max-height:1000px;
float:left;
border-right: thin solid #9DB2C6;
padding-left:5px;
}

div.content
{
width:537px;
overflow:auto;
max-height:1000px;
float:right;
border: thin solid #000;
}

div.top
{
margin:auto;
height:92px;
width:680px;
border: thin #000;
background-color:white;
}

div.smallprint
{
margin:auto;
height:20px;
width:680px;
border: thin #000;
background-color:black;
}





im mainly concerned with 3 divs, the background, the content, and the leftmenu.

when the text overflows in the content box, i need the background to continue on in the parent background box and also the left menu to stretch down as well.


Personally i think it would be better if the content was set too overflow:auto; and you could scroll.
but i dont get to make desicions. :thumbsup:

Appreciate any light you can shed on it!

-crumbs

BC AdBot (Login to Remove)

 


#2 burn1337

burn1337

  • Banned
  • 311 posts
  • OFFLINE
  •  
  • Gender:Male
  • Local time:07:07 AM

Posted 27 March 2009 - 12:54 AM

I would try putting "height: 99%;" on your background div and left menu... Not saying that it will work, but I would say it is a good try... Well I would also try inheritance as well... That could help ya...

#3 groovicus

groovicus

  • Security Colleague
  • 9,963 posts
  • OFFLINE
  •  
  • Gender:Male
  • Location:Centerville, SD
  • Local time:09:07 AM

Posted 27 March 2009 - 08:28 AM

Well I would also try inheritance as well.


Inherit from what, why, and how? :thumbsup:

#4 burn1337

burn1337

  • Banned
  • 311 posts
  • OFFLINE
  •  
  • Gender:Male
  • Local time:07:07 AM

Posted 27 March 2009 - 11:39 AM

"content: inherit;"
This way size and what not is inherited down through the divs....

#5 groovicus

groovicus

  • Security Colleague
  • 9,963 posts
  • OFFLINE
  •  
  • Gender:Male
  • Location:Centerville, SD
  • Local time:09:07 AM

Posted 27 March 2009 - 12:20 PM

Inherit from what specifically, and why would you want to inherit a size that may not be applicable in an inner div?

EDIT: You sort of have a problem in that the div containing the background image is not in the same div as the text, so they know nothing of each other. Javascript could be used to dynamically get the size of the div containing the text, and then be used to adjust the background image, or you can re-assess your strategy. In order to get an image to repeat, which is what you really want it to do is repeat-x. Then it will repeat to fill the div. Get rid of everything else, and concentrate on just getting the image to fill the div. I think you will find that if you properly indent your code, other people will better be able to read it. For all I know, you are missing a set of divs.

#6 burn1337

burn1337

  • Banned
  • 311 posts
  • OFFLINE
  •  
  • Gender:Male
  • Local time:07:07 AM

Posted 27 March 2009 - 09:05 PM

Ok I should have explained a little bit better... Think of this, you have 5 divs a background, header, left panel, content, and footer.... Now each div is like a box, and when you just use a div and set it's placement, the 4 outer div's (Header, Left panel, Content, and Footer) will simply be put on top of the Background div, meaning each div is it's own parent box, but if you use "content: inherit;" it's basically meaning that the Background Div is it's environment, instead of the browser it's self... Or in other words everything within the new div, will now act and be a part of the Background div, or in another way to put it, instead of layering the divs, you are turning the divs into one single layer... Then with "posistion: relative;" you can set the coordinates in relation to the parent div... "posistion: fixed;" or "position: absolute;" will let you put the coordinates in relation to the whole page...

By the way I once had to try to solve a simular problem, the whole repeating an image works, but inheritance works too...

Edited by burn1337, 27 March 2009 - 09:06 PM.


#7 crumbs744

crumbs744
  • Topic Starter

  • Members
  • 19 posts
  • OFFLINE
  •  
  • Local time:02:07 AM

Posted 29 March 2009 - 10:07 PM

thanks burn, i was wondering why the relative positioning didn't seem to be working. will try it out!

#8 burn1337

burn1337

  • Banned
  • 311 posts
  • OFFLINE
  •  
  • Gender:Male
  • Local time:07:07 AM

Posted 30 March 2009 - 12:03 AM

No problem... Let me know if you need any more help....

#9 crumbs744

crumbs744
  • Topic Starter

  • Members
  • 19 posts
  • OFFLINE
  •  
  • Local time:02:07 AM

Posted 31 March 2009 - 04:31 PM

Still not working, im not sure i fully understand how to implement the content:inherit;
but have now only one thing hold it all back.
I took out the content box and left the leftmenu floating and just put the text straight onto the background div, which works great until it overflows.
The background height extends, which is great, but the leftmenu will stay at the same height with
height:650px;
if i put:
height:100%;
it will only extend as far as the text, ie one line if i only have one word in there, or two lines if i put <br /> in there.

New URL
http://www.humanresources.com.au/jit/Test/...st/divtest.html

Edited by crumbs744, 31 March 2009 - 04:38 PM.


#10 burn1337

burn1337

  • Banned
  • 311 posts
  • OFFLINE
  •  
  • Gender:Male
  • Local time:07:07 AM

Posted 31 March 2009 - 05:03 PM

I probably should have explained the inheritance a little better... In order for everything to flow correctly, everything should have the inheritance... and relative position... This way you can position everything within the background div...




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users