Trying to make site vertically expandable

  • (2 Pages)
  • +
  • 1
  • 2

17 Replies - 4582 Views - Last Post: 02 July 2009 - 03:41 PM

#1 Omelas0469  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 34
  • Joined: 27-June 09

Trying to make site vertically expandable

Post icon  Posted 28 June 2009 - 01:21 PM

Hi all,

I'm new to the site and relatively new to HTML and CSS. I just started working on a web site for this non-profit group I've been volunteering for and I just finished doing the best I could on the homepage. Now that I have that set up, I want to make a Dreamweaver Template out of it so that the header, footer, and news column on the left side appear on every page. However, the issue I'm having right now is I can't seem to make it so that if I add extra news items in the news column, for example, the news column will expand and so that its parent divs will expand as well to accomodate it. I need it to work this way since every page will be usng the template and they can't all have the same heights due to variation in content. I've tried doing 'height:auto' for the wrapper and main divs but the white background and outside border disappear and some of the elements move out of place...

Here is the link so you can see what I have so far: The Mercy Project - Under construction
The CSS stylesheet can be found here: Style sheet

I'm looking for any suggestions as to how I can change my code to make it behave as described above.

Any other suggestions as to other ways I can improve what I've done so far are more than welcome since I'm totally new to this and want to do the best job I can.

As I said this is my first post in this forum so I hope I'm not leaving out any necessary details...

- Omelas

Is This A Good Question/Topic? 0
  • +

Replies To: Trying to make site vertically expandable

#2 crazyjugglerdrummer  Icon User is offline

  • GAME OVER. NERD WINS.
  • member icon

Reputation: 124
  • View blog
  • Posts: 690
  • Joined: 07-January 09

Re: Trying to make site vertically expandable

Posted 28 June 2009 - 04:48 PM

I don't know anything about dreamweaver templates, but I know that an webpage will be as tall as it needs to be for its content (you don't need to set the height). If it gets bigger than the browser window it just scrolls, so no special height specifications needed. :D
Was This Post Helpful? 0
  • +
  • -

#3 Omelas0469  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 34
  • Joined: 27-June 09

Re: Trying to make site vertically expandable

Posted 28 June 2009 - 07:30 PM

That's not what I'm getting though. I have a main content div inside a wrapper div and the wrapper div doesn't seem to expand when the content inside the main div extend further that their container...
Was This Post Helpful? 0
  • +
  • -

#4 RudiVisser  Icon User is offline

  • .. does not guess solutions
  • member icon

Reputation: 1010
  • View blog
  • Posts: 3,565
  • Joined: 05-June 09

Re: Trying to make site vertically expandable

Posted 29 June 2009 - 01:46 AM

Seems to be working fine here, can you visually (screenshot of the actual issue) demonstrate the problem??

This could turn out to be a problem with using the float: attribute (i'm not sure if you're using it or not), but in that case, just add before the wrapper's </div>, <div style="clear:both"></div>.
Was This Post Helpful? 0
  • +
  • -

#5 neit  Icon User is offline

  • D.I.C Head

Reputation: 15
  • View blog
  • Posts: 187
  • Joined: 13-February 09

Re: Trying to make site vertically expandable

Posted 30 June 2009 - 01:16 PM

Are you testing in in firefox or IE.

This does appear because you are using fixed size div for the news box and main content area.
As far as I am aware IE will push a fixed height div down relative to
the content in it.
Firefox tends to push the content down but not the div so the content will
over run the the div when it supposed to contain it and mess up the design.

Removing the fixed height for the main div and newsbox should resolve your issue as mentioned already.
But it could mean that other parts look empty especially if the newsboxs
is bigger than the content area.

As your site has not got any content that is over running we cannot see an example of what is happening
Was This Post Helpful? 0
  • +
  • -

#6 ImportedNoob  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 7
  • Joined: 29-June 09

Re: Trying to make site vertically expandable

Posted 30 June 2009 - 02:16 PM

Find all of the containers that you want to be able to expand
Replace the height with a min-height attribute that has the same value as height


Layouts are almost always easier to do using html tables rather than css. You'll get what you expect 99 times out of 100.

This post has been edited by ImportedNoob: 30 June 2009 - 02:22 PM

Was This Post Helpful? 0
  • +
  • -

#7 neit  Icon User is offline

  • D.I.C Head

Reputation: 15
  • View blog
  • Posts: 187
  • Joined: 13-February 09

Re: Trying to make site vertically expandable

Posted 01 July 2009 - 03:14 AM

 Layouts are almost always easier to do using html tables rather than css. You'll get what you expect 99 times out of 100.


This is not recommended unless your using tablature data.
Was This Post Helpful? 0
  • +
  • -

#8 RudiVisser  Icon User is offline

  • .. does not guess solutions
  • member icon

Reputation: 1010
  • View blog
  • Posts: 3,565
  • Joined: 05-June 09

Re: Trying to make site vertically expandable

Posted 01 July 2009 - 03:20 AM

View PostImportedNoob, on 30 Jun, 2009 - 01:16 PM, said:

Layouts are almost always easier to do using html tables rather than css. You'll get what you expect 99 times out of 100.

As said above that is not a good approach to web development, using something less supported because it's "easier". Which, btw, if you learned XHTML and CSS correctly, it's not.

Shall we just wait and see what the OP says about the already given solutions?
Was This Post Helpful? 0
  • +
  • -

#9 Omelas0469  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 34
  • Joined: 27-June 09

Re: Trying to make site vertically expandable

Posted 01 July 2009 - 01:41 PM

You can find an example of the problem here.

I'm testing with both Firefox and IE.

I placed the clear:both div right before 'wrapper's closing div tag and it made wrapper extend to include the content which helped, thanks Mage.

Other than that several problems still arise. I change the height attributes to min-height for the main div and the newsBox div but it didn't change anything.

Here are the problems I'm trying to fix:
  • I want the newsBox to have at least the height it has now, but I want it to extend with the 'main' div if ever the 'main' div is expanded due to its content.
  • I want the footer to be at the bottom of the content, i.e. the 'main' div at all times, so if the 'main' div is extended vertically, the footer should still be at the bottom of it.
  • I don't want the "Home | Contact Us | FAQ | Privacy Policy" links in the footer to be moved when the content overflows the 'main' div.

I've changed the height attribute to min-height for both the newsBox and the 'main' div but as you can see, this hasn't changed anything.

Any more ideas?
Thanks for the help you've provided me with this far.
Was This Post Helpful? 0
  • +
  • -

#10 RudiVisser  Icon User is offline

  • .. does not guess solutions
  • member icon

Reputation: 1010
  • View blog
  • Posts: 3,565
  • Joined: 05-June 09

Re: Trying to make site vertically expandable

Posted 01 July 2009 - 01:51 PM

For problems number 2+3 (footer related) just move the footer div above the div with clear: all on it :)

Your first "problem" would need to be done with Javascript as there's no other way when using a floated div. However I think it looks fine just the way it is.

Oh and, you're welcome :)
Was This Post Helpful? 0
  • +
  • -

#11 Omelas0469  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 34
  • Joined: 27-June 09

Re: Trying to make site vertically expandable

Posted 01 July 2009 - 03:53 PM

Alright I got it working as I want it to by following Mage's tip (thanks again).

Now I'm going to look into how to write a javascript code that assign my newsBox a height so that it just touches the footer. I'd have thought that there'd be a way to give a div a min height and have it take on the height of it's parent div as well but I suppose I need a conditional statement and that's why javascript is necessary...

Thanks to everyone who contributed!
Was This Post Helpful? 0
  • +
  • -

#12 RudiVisser  Icon User is offline

  • .. does not guess solutions
  • member icon

Reputation: 1010
  • View blog
  • Posts: 3,565
  • Joined: 05-June 09

Re: Trying to make site vertically expandable

Posted 02 July 2009 - 12:09 AM

No problem!

You'd just do something like:
var newsBox = document.getElementById('newsBox');
var mainBox = document.getElementById('mainBox');
if(mainBox.style.height > newsBox.style.height)
   newsBox.style.height = mainBox.style.height;

Was This Post Helpful? 0
  • +
  • -

#13 neit  Icon User is offline

  • D.I.C Head

Reputation: 15
  • View blog
  • Posts: 187
  • Joined: 13-February 09

Re: Trying to make site vertically expandable

Posted 02 July 2009 - 06:22 AM

The following should do all three without using javascript.
You just need to be creative on how you cut the images.
You will need to tweak it alittle to include your menu section but that should be easy enough to do.

html code

<html>
<head>
<title>The Mercy Project</title>
<link href="test.css" rel="stylesheet" type="text/css" /></link>
</head>
<body>
<div id="container">
<div id="header"></div>
<div id="leftcolumn">
left column content here
</div>
<div id="content">
right column content here
</div>
<div id="footer"></div>
</div>
</body>
</html>



CSS code
body {
font-size: 0.7em; 
font-family: verdana, arial, sans-serif;
text-align: center;
}

 #container
{
width: 1002px;
margin: 20px auto;
background-image: url(images/bg.jpg); 
text-align: left;

}



#header
{
height: 165px;
width: 1002px;
background-image: url(images/header.jpg);
}



#leftcolumn
{
float: left;
width: 185px;
margin: 0;
padding-bottom: 20px;
padding-left: 10px;

}

#content
{
margin-left: 210px;
padding: 3em;


}

#footer
{
clear: both;
height: 57px;
background-image: url(images/footer.jpg);
width: 1002px;
}



You can see an example here

This post has been edited by neit: 02 July 2009 - 06:46 AM

Was This Post Helpful? 0
  • +
  • -

#14 RudiVisser  Icon User is offline

  • .. does not guess solutions
  • member icon

Reputation: 1010
  • View blog
  • Posts: 3,565
  • Joined: 05-June 09

Re: Trying to make site vertically expandable

Posted 02 July 2009 - 10:37 AM

Using a margin... That's a strange way of accomplishing the task, but good idea nontheless :)
Was This Post Helpful? 0
  • +
  • -

#15 Omelas0469  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 34
  • Joined: 27-June 09

Re: Trying to make site vertically expandable

Posted 02 July 2009 - 12:54 PM

Wow thanks for all the great responses.

It's working perfectly now thanks to all your suggestions. I opted to use javascript to have a clean and clear solution that only took a couple of lines of code:

<script type="text/javascript">
	var maxHeight = Math.max(document.getElementById("newsBox").offsetHeight, document.getElementById("main").offsetHeight);
	maxHeight -= 10;
	document.getElementById("newsBox").style.height=maxHeight+"px";
</script>



Now the only issue I'm having is that the background image I'm using repeats itself when the newsBox is made to expand and it looks weird... I've been trying to think of a way to do this. I obviously don't want to include a separate style sheet for every page to link to a different image... I would like to find a way to size the image dynamically based on the size of the newsBox but without simply repeating itself. Is there any way to make it stretch?

The only solution I can think of at the moment is to stop using a background image for the div and instead just place an image there which I can warp using the height attribute and then place the text above the picture. I would like to find a more elegant solution though.

Any suggestions?
neit, how did you make the picture expand for the newsBox in your sample?
Was This Post Helpful? 0
  • +
  • -

  • (2 Pages)
  • +
  • 1
  • 2