vertically expanding website to content

How do I get my website to automatically expand vertically as I put in

Page 1 of 1

7 Replies - 5043 Views - Last Post: 21 July 2011 - 02:37 AM

#1 Maryann  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 5
  • Joined: 12-September 07

vertically expanding website to content

Posted 12 September 2007 - 09:07 AM

Hey!

Lately I have been developing a few websites, and I have noticed that it would be great, and save me a lot of time if there was a way to make the length of a website expand with the content in it. I use only CSS and XHTML when I programme, and my design makes this quite hard to achieve. I have read about the "float" property, but I dont think thats what I need to use...
Now i use a different <div> to set the length of the design and text area in every page, and that makes my CSS quite long!

Does anyone understand what I mean? Sorry for my bad english...

Greatful for any tips!

Is This A Good Question/Topic? 0
  • +

Replies To: vertically expanding website to content

#2 Martyr2  Icon User is offline

  • Programming Theoretician
  • member icon

Reputation: 4187
  • View blog
  • Posts: 11,847
  • Joined: 18-April 07

Re: vertically expanding website to content

Posted 12 September 2007 - 09:31 AM

Well as far as I know websites do expand vertically, that is why you have a scrollbar on the right hand side. Now if you mean content in something like boxes styling (where the content may overflow its container) put the content in a div give it a CSS height then wrap that in a div which has your border and coloring. That will force the outer div to expand vertically to match the content in the inner div... why can be dynamic and thus expanding vertically to fit the content.

Perhaps I am not understanding what you are asking, if you want to clarify further, be my guest. :)
Was This Post Helpful? 0
  • +
  • -

#3 Maryann  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 5
  • Joined: 12-September 07

Re: vertically expanding website to content

Posted 12 September 2007 - 09:41 AM

Wow, that was fast!
Thanks for your answer. I ment the second thing you wrote about ;) I have to try it out and see if it works for me, if not it's easier to show you.
Was This Post Helpful? 0
  • +
  • -

#4 Maryann  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 5
  • Joined: 12-September 07

Re: vertically expanding website to content

Posted 12 September 2007 - 10:24 AM

It works!! Can't believe it was that easy! Thanks a lot! :D
Was This Post Helpful? 0
  • +
  • -

#5 dash  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 2
  • Joined: 25-March 09

Re: vertically expanding website to content

Posted 20 July 2011 - 08:03 PM

I seem to be having a major problem with my site, I have just started to put it together but for some reason if I specify height as auto for the content wrapper everything falls apart, I have had to specify the height just to keep the page together but this is not practical as the content will vary on a fairly regular basis.

I have tried min-height, setting height as auto but the page structure falls apart then.

My site is at www.da-ict.co.uk

Could someone advise please

Thanks in advance.

css also listed below

.wrapper {
	width:1000px;
	height:auto;
	border:4px solid #999;
	-moz-border-radius:8px;
	-webkit-border-radius:8px; 
	margin:10px auto 0 auto; /* margin on outside of border, keeps wrapper 10px from top of browser window */ 
	background:#0F0;
}

.wrapper .header {
	width:1000px;
	height:125px;
	background:url(../images/banner.gif);
	color:#FFF;
}

.wrapper .mainbody {
	width:1000px;
	height:714px;
	background:#000;
}

.wrapper .mainbody .content {
	float:left;
	width:784px;
	height:auto;
	border:2px solid #999;
	font-family:Verdana, Geneva, sans-serif;
	font-size:13px;
	color:#000;
	font-weight:bold;
	text-align:justify;
	background:#FFF;
	padding:7px 10px 7px 10px;
}

.wrapper .mainbody .rightlinks {
	float:right;
	width:180px;
	background:#ccc;
	font-family:Verdana, Geneva, sans-serif;
	font-size:13px;
	border:2px solid #999;
	padding:3px;
}

.wrapper .footer {
	width:1000px;
	height:25px;
	background:#ccc;
	text-align:center;
}


Was This Post Helpful? 0
  • +
  • -

#6 Lemur  Icon User is offline

  • Pragmatism over Dogma
  • member icon



Reputation: 1335
  • View blog
  • Posts: 3,398
  • Joined: 28-November 09

Re: vertically expanding website to content

Posted 21 July 2011 - 12:04 AM

You can use height:auto or height:100% to make sure it stays full span.

A trick I learned to make it appear that way even with a small amount of content is faux columns. Take a 1px of an area and have it repeat-y to make it simulate more area, though this only really applies if you want different colored columns to stretch 100% on the side.
Was This Post Helpful? 0
  • +
  • -

#7 BiffBaffBoff  Icon User is offline

  • D.I.C Head

Reputation: 20
  • View blog
  • Posts: 77
  • Joined: 10-February 11

Re: vertically expanding website to content

Posted 21 July 2011 - 02:14 AM

Nope, remove all the height: auto etc.. The problem is that you have floated elements and you're not clearing them so the parent container is collapsing. To fix, simply apply overflow: auto to your mainbody class. See post 10 in this thread for a more permanent solution: http://www.dreaminco...3&#entry1387233
Was This Post Helpful? 0
  • +
  • -

#8 dash  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 2
  • Joined: 25-March 09

Re: vertically expanding website to content

Posted 21 July 2011 - 02:37 AM

View PostBiffBaffBoff, on 21 July 2011 - 02:14 AM, said:

Nope, remove all the height: auto etc.. The problem is that you have floated elements and you're not clearing them so the parent container is collapsing. To fix, simply apply overflow: auto to your mainbody class. See post 10 in this thread for a more permanent solution: http://www.dreaminco...3&#entry1387233


Thanks, this seems to have done the job, something I should have thought of but thanks a lot for that.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1