Cannot make my layout's content expand.

12 replies [Last post]

Tue, 2009-08-04 20:35

HHawk

Offline

newbie

Last seen: 13 years 32 weeks ago

Timezone: GMT+2

Joined: 2009-08-04

Posts: 6

Points: 0

No matter what I do, I cannot make my content expand in the appropaite div's and thus moving de the rest of the content downward.

I created the website with Photoshop, sliced it and editing it in Dreamweaver.
Would be nice if someone could take a look at the code and see what I am doing wrong.

Cause I cannot get this fixed the way I want by myself...

I uploaded the page here: http://www.mvdl.info/tmp/overzicht.html

I want the 3 columns (ligt-yellow with text parts) to expand to the content when more content is added... And when it expands, the rest (below) should move downwards.

I did these kind of things in the past with HTML tables, which was pretty easy to do, however CSS is killing me.

Tags:

CSS Layouts

Tue, 2009-08-04 20:53

CupidsToejam

Offline

Guru

Florida

Last seen: 7 years 29 weeks ago

Florida

Timezone: GMT-4

Joined: 2008-08-15

Posts: 2637

Points: 1556

1. first, always validate

1. first, always validate you code before going to css.

2. Dont use position: absolute; for page layout. Use a combination of floats and margins.

3. research divitis within this forum. You are using WAY TOO MANY divs.

4. Dont set a height for containers if you want them to expand with content.

Wed, 2009-08-05 07:44

HHawk

Offline

newbie

Last seen: 13 years 32 weeks ago

Timezone: GMT+2

Joined: 2009-08-04

Posts: 6

Points: 0

Congratulations! No Error

Congratulations! No Error Found.
This document validates as CSS level 2.1 !

So, how do I make the content div expand along with moving the rest of the website's layout further down?

Wed, 2009-08-05 08:32

Hugo

Offline

Moderator

London

Last seen: 8 years 12 weeks ago

London

Joined: 2004-06-06

Posts: 15668

Points: 2806

Actually it's Markup

Actually it's Markup validation that is important, CSS far less so.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Wed, 2009-08-05 13:56

harrierdh

Offline

Enthusiast

Colorado

Last seen: 13 years 15 weeks ago

Colorado

Timezone: GMT-7

Joined: 2009-07-30

Posts: 83

Points: 20

cant make layout expand

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>spamprotector_2_kolommen</title>
<style>
 
#logo-1 {
	position:absolute;
	left:0px;
	top:0px;
	width:1004px;
	height:57px;
}
 
#logo-2 {
	position:absolute;
	left:0px;
	top:57px;
	width:1004px;
	height:50px;
}
 
#logo-2003 {
	position:absolute;
	left:0px;
	top:107px;
	width:806px;
	height:61px;
}
 
#logo-afbeelding-x {
	position:absolute;
	left:806px;
	top:107px;
	width:147px;
	height:125px;
}
 
#logo-2005 {
	position:absolute;
	left:953px;
	top:107px;
	width:51px;
	height:61px;
}
 
#logo-3 {
	position:absolute;
	left:0px;
	top:168px;
	width:806px;
	height:24px;
}
 
#logo-3007 {
	position:absolute;
	left:953px;
	top:168px;
	width:51px;
	height:24px;
}
 
#logo-4 {
	position:absolute;
	left:0px;
	top:192px;
	width:75px;
	height:86px;
}
 
#logo-oneliner {
	position:absolute;
  	background-image: url('http://www.mvdl.info/tmp/images/logo_oneliner.jpg');
	padding-top: 2px;
	font-size: 16px;
	color: #feecb2;
	left:75px;
	top:192px;
	width:428px;
	height:52px;
}
 
#logo-6 {
	position:absolute;
	left:503px;
	top:192px;
	width:303px;
	height:86px;
}
 
#logo-6011 {
	position:absolute;
	left:953px;
	top:192px;
	width:51px;
	height:86px;
}
 
#logo-6012 {
	position:absolute;
	left:806px;
	top:232px;
	width:147px;
	height:46px;
}
 
#logo-5 {
	position:absolute;
	left:75px;
	top:244px;
	width:428px;
	height:34px;
}
#topnav-1 {
	position:absolute;
	left:0px;
	top:278px;
	width:63px;
	height:40px;
}
 
#topnav-2 {
	position:absolute;
  	background-image: url('http://www.mvdl.info/tmp/images/topnav_2o.jpg');
	left:63px;
	top:278px;
	width:89px;
	height:40px;
}
 
#topnav-2 a {display: block;}
#topnav-2 img {width: 100%; height: 40px;}
#topnav-2 a:hover img {visibility: hidden;}
 
#topnav-3 {
	position:absolute;
  	background-image: url('http://www.mvdl.info/tmp/images/topnav_3o.jpg');
	left:152px;
	top:278px;
	width:110px;
	height:40px;
}
 
#topnav-3 a {display: block;}
#topnav-3 img {width: 100%; height: 40px;}
#topnav-3 a:hover img {visibility: hidden;}
 
#topnav-4 {
	position:absolute;
  	background-image: url('http://www.mvdl.info/tmp/images/topnav_4o.jpg');	
	left:262px;
	top:278px;
	width:109px;
	height:40px;
}
 
#topnav-4 a {display: block;}
#topnav-4 img {width: 100%; height: 40px;}
#topnav-4 a:hover img {visibility: hidden;}
 
#topnav-5 {
	position:absolute;
	background-image: url('http://www.mvdl.info/tmp/images/topnav_5o.jpg');
	left:371px;
	top:278px;
	width:92px;
	height:40px;
}
 
#topnav-5 a {display: block;}
#topnav-5 img {width: 100%; height: 40px;}
#topnav-5 a:hover img {visibility: hidden;}
 
#topnav-6 {
	position:absolute;
	background-image: url('http://www.mvdl.info/tmp/images/topnav_6o.jpg');
	left:463px;
	top:278px;
	width:94px;
	height:40px;
}
 
#topnav-6 a {display: block;}
#topnav-6 img {width: 100%; height: 40px;}
#topnav-6 a:hover img {visibility: hidden;}
 
#topnav-7 {
	position:absolute;
	background-image: url('http://www.mvdl.info/tmp/images/topnav_7o.jpg');
	left:557px;
	top:278px;
	width:101px;
	height:40px;
}
 
#topnav-7 a {display: block;}
#topnav-7 img {width: 100%; height: 40px;}
#topnav-7 a:hover img {visibility: hidden;}
 
#topnav-8 {
	position:absolute;
	background-image: url('http://www.mvdl.info/tmp/images/topnav_8o.jpg');
	left:658px;
	top:278px;
	width:97px;
	height:40px;
}
 
#topnav-8 a {display: block;}
#topnav-8 img {width: 100%; height: 40px;}
#topnav-8 a:hover img {visibility: hidden;}
 
#topnav-9 {
	position:absolute;
	background-image: url('http://www.mvdl.info/tmp/images/topnav_9o.jpg');
	left:755px;
	top:278px;
	width:97px;
	height:40px;
}
 
#topnav-9 a {display: block;}
#topnav-9 img {width: 100%; height: 40px;}
#topnav-9 a:hover img {visibility: hidden;}
 
#topnav-10 {
	position:absolute;
	background-image: url('http://www.mvdl.info/tmp/images/topnav_10o.jpg');
	left:852px;
	top:278px;
	width:94px;
	height:40px;
}
 
#topnav-10 a {display: block;}
#topnav-10 img {width: 100%; height: 40px;}
#topnav-10 a:hover img {visibility: hidden;}
 
#topnav-11 {
	position:absolute;
	left:946px;
	top:278px;
	width:58px;
	height:40px;
}
#leftcolumn p {
	margin-top: 0px; padding-left: 20px;
}
#rightcolumn p {
	margin-top: 0px; padding-left: 20px;
}
</style>
</head>
<body style="margin: 0; padding: 0; font-familiy: verdana;">
 
	 <div id="logo-1" >
		<img src="http://www.mvdl.info/tmp/images/logo_1.jpg" width="1004" height="57" alt="">
	</div>
 
	<div id="logo-2">
		<img src="http://www.mvdl.info/tmp/images/logo_2.jpg" width="1004" height="50" alt="">
	</div>
	<div id="logo-2003">
		<img src="http://www.mvdl.info/tmp/images/logo_2-03.jpg" width="806" height="61" alt="">
	</div>
	<div id="logo-afbeelding-x">
		<img src="http://www.mvdl.info/tmp/images/logo_afbeelding_1.jpg" width="147" height="125" alt="">
	</div>
 
	<div id="logo-2005">
		<img src="http://www.mvdl.info/tmp/images/logo_2-05.jpg" width="51" height="61" alt="">
	</div>
	<div id="logo-3">
		<img src="http://www.mvdl.info/tmp/images/logo_3.jpg" width="806" height="24" alt="">
	</div>
	<div id="logo-3007">
		<img src="http://www.mvdl.info/tmp/images/logo_3-07.jpg" width="51" height="24" alt="">
	</div>
 
	<div id="logo-4">
		<img src="http://www.mvdl.info/tmp/images/logo_4.jpg" width="75" height="86" alt="">
	</div>
	<div id="logo-oneliner">
	  Binnen 5 minuten bent u permanent verlost van<br>
    ongewenste emails dankzij Spamprotector.</div>
	<div id="logo-6">
		<img src="http://www.mvdl.info/tmp/images/logo_6.jpg" width="303" height="86" alt="">
 
	</div>
	<div id="logo-6011">
		<img src="http://www.mvdl.info/tmp/images/logo_6-11.jpg" width="51" height="86" alt="">
	</div>
	<div id="logo-6012">
		<img src="http://www.mvdl.info/tmp/images/logo_6-12.jpg" width="147" height="46" alt="">
	</div>
	<div id="logo-5">
		<img src="http://www.mvdl.info/tmp/images/logo_5.jpg" width="428" height="34" alt="">
 
	</div>
	<div id="topnav-1">
		<img src="http://www.mvdl.info/tmp/images/topnav_1.jpg" width="63" height="40" alt="">
	</div>
<div id="topnav-2">
    	<a href="index.html"><img border="0" src="http://www.mvdl.info/tmp/images/topnav_2.jpg" width="89" height="40" alt=""></a>
	</div>
	<div id="topnav-3">
		<a href="overzicht.html"><img border="0" src="http://www.mvdl.info/tmp/images/topnav_3.jpg" width="110" height="40" alt=""></a>
 
	</div>
	<div id="topnav-4">
		<a href="downloads.html"><img border="0" src="http://www.mvdl.info/tmp/images/topnav_4.jpg" width="109" height="40" alt=""></a>
	</div>
	<div id="topnav-5">
		<a href="nieuws.html"><img border="0" src="http://www.mvdl.info/tmp/images/topnav_5.jpg" width="92" height="40" alt=""></a>
	</div>
	<div id="topnav-6">
		<a href="prijzen.html"><img border="0" src="http://www.mvdl.info/tmp/images/topnav_6.jpg" width="94" height="40" alt=""></a>
 
	</div>
	<div id="topnav-7">
		<a href="bestellen.html"><img border="0" src="http://www.mvdl.info/tmp/images/topnav_7.jpg" width="101" height="40" alt=""></a>
	</div>
	<div id="topnav-8">
		<a href="http://www.backupmaster.nl"><img border="0" src="http://www.mvdl.info/tmp/images/topnav_8.jpg" width="97" height="40" alt=""></a>
	</div>
	<div id="topnav-9">
		<a href="http://www.helpburo.eu"><img border="0" src="http://www.mvdl.info/tmp/images/topnav_9.jpg" width="97" height="40" alt=""></a>
 
	</div>
	<div id="topnav-10">
		<a href="contact.html"><img border="0" src="http://www.mvdl.info/tmp/images/topnav_10.jpg" width="94" height="40" alt=""></a>
	</div>
    <div id="topnav-11">
		<img src="http://www.mvdl.info/tmp/images/topnav_11.jpg" width="58" height="40" alt="">
	</div>
 
 
	<div id="spamprotector-kol-boven" style="position: absolute; left: 0px; top: 318px;">
		<img src="http://www.mvdl.info/tmp/images/spamprotector_kol_boven.jpg" width="1004" height="26" alt="">
	</div>
 
 
	<div id="leftcolumn" style="position: relative; top: 344px; float: left; width: 50%; margin-right: 50%; background: yellow;">
		<p style="margin-top: 0px;">
			1) Left here. left column long long column very long fill fill fill long text text column text silly very make long very fill silly make make long make text fill very long text column silly silly very column long very column filler fill long make filler long silly very long silly silly silly long filler make column filler make silly long long fill very.
		</p>
		<p>
			very make make fill silly long long filler column long make silly silly column filler fill fill very filler text fill filler column make fill make text very make make very fill fill long make very filler column very long very filler silly very make filler silly make make column column 
		</p>
		<p>
			fill long make long text very make long fill column make text very silly column filler silly text fill text filler filler filler make make make make text filler fill column filler make silly make text text fill make very filler column very 
		</p>
		<p>
			column text long column make silly long text filler silly very very very long filler fill very fill silly very make make filler text filler text make silly text text long fill fill make text fill long text very silly long long filler filler fill silly long make column make silly long column long make very 
		</p>
	</div>
 
 
	<div id="rightcolumn" style="position: relative; top: 344px;float: left; width: 50%; margin-left: -50%; background: blue;">
		<p>
			2) right here. column long long column very long fill fill fill long text text column text silly very make long very fill silly make make long make text fill very long text column silly silly very column long very column filler fill long make filler long silly very long silly silly silly long filler make column filler make silly long long fill very.
		</p>
		<p>
			very make make fill silly long long filler column long make silly silly column filler fill fill very filler text fill filler column make fill make text very make make very fill fill long make very filler column very long very filler silly very make filler silly make make column column 
		</p>
		<p>
			fill long make long text very make long fill column make text very silly column filler silly text fill text filler filler filler make make make make text filler fill column filler make silly make text text fill make very filler column very 
		</p>
	</div>
	<div id="footer" style="clear: left; position: relative; top: 400px; width: 100%; height: 50px; background: grey;">
		footer
	</div>
</body>
</html>

Wed, 2009-08-05 16:10

harrierdh

Offline

Enthusiast

Colorado

Last seen: 13 years 15 weeks ago

Colorado

Timezone: GMT-7

Joined: 2009-07-30

Posts: 83

Points: 20

expandable

I realized the code I sent isn't backwards compatible for IE. Though it works in FF. Here is an example from this group which shows expandable columns that simulate a table.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Layout 3</title>
<style type="text/css">
	html, body {
		margin:0;
		padding:0
	}
	body { 
		font: 76% arial, verdana, sans-serif;
	}
</style>
</head>
<body>
<div id="container">
	<div id="header"><h1 style="margin: 0; height: 80px; font-size: 14pt; background-color: rgb(200,200,200); color: green;">Header</h1></div>
	<div id="leftcolumn" style="float: left; width: 50%; margin-right: 50%;">
		<p style="margin-top: 0px;">
			1) Left here. column long long column very long fill fill fill long text text column text silly very make long very fill silly make make long make text fill very long text column silly silly very column long very column filler fill long make filler long silly very long silly silly silly long filler make column filler make silly long long fill very.
		</p>
		<p>
			very make make fill silly long long filler column long make silly silly column filler fill fill very filler text fill filler column make fill make text very make make very fill fill long make very filler column very long very filler silly very make filler silly make make column column 
		</p>
		<p>
			fill long make long text very make long fill column make text very silly column filler silly text fill text filler filler filler make make make make text filler fill column filler make silly make text text fill make very filler column very 
		</p>
		<p>
			column text long column make silly long text filler silly very very very long filler fill very fill silly very make make filler text filler text make silly text text long fill fill make text fill long text very silly long long filler filler fill silly long make column make silly long column long make very 
		</p>
	</div>
	<div id="centercolumn" style="float: left; width: 25%; margin-left: -50%; background: green;">
		<p>
			2) center here. long long fill filler very fill column column silly filler very filler fill fill filler text fill very silly fill text filler silly silly filler fill very make fill column text column very very column fill fill very silly column silly silly fill fill long filler 
		</p>
	</div>
	<div id="rightcolumn" style="float: left; width: 25%; margin-left: -25%; background: orange;">
		<p>
			3) right here. very text make long silly make text very very text make long filler very make column make silly column fill silly column long make silly filler column filler silly long long column fill silly column very 
		</p>
	</div>
	<div id="footer" style="background: rgb(120,120,120); clear: left; width: 100%; height: 80px;">
		<p>Here it goes the footer</p> 
	</div>
</body>
</html>

What you are trying to do with absolute positioning is creating problems.

Tue, 2009-08-11 10:01

HHawk

Offline

newbie

Last seen: 13 years 32 weeks ago

Timezone: GMT+2

Joined: 2009-08-04

Posts: 6

Points: 0

Sorry for the late reply,

Sorry for the late reply, was sick in bed the past few days.
Anyways, thanks for the help. I will take a look at it and learn how to use it correctly!

The problem is I am using Photoshop to slice my website layout. This results in a HTML/CSS file with everything related to position being absolute (position: absolute).

I really don't know CSS that well to create my own layout or start from scratch. Using Photoshop to create slices works easy for me to understand.

I don't know if there are better programs out there which could help me with this and avoid the "absolute"-problem?

//edit

Well I do get the picture after taking a long look at your HTML/CSS code, however it's to much work to change all of the code of my page. And I will run into another problem with regards to the background-image. I will take another look, but I guess I will have to stick with the fixed (height) website layout.

Tue, 2009-08-11 16:56

HHawk

Offline

newbie

Last seen: 13 years 32 weeks ago

Timezone: GMT+2

Joined: 2009-08-04

Posts: 6

Points: 0

Well I didn't just want to

Well I didn't just want to give up and start using tables for the center part. However I am still having a lot of problems.

I have split up the layout created in Photoshop 3 ways.

1. Header
2. Main
3. Footer

Then sliced each part one individually.

Now I am trying to remove the position: absolute from the header part. And making it use float instead. But no matter how hard I try, I fail every time.

Can someone take a look at it and telling me what I am doing wrong with the floats?

http://www.mvdl.info/site.rar

This includes all the images, header.html, main.html and footer.html.
The file is pretty small < 500 kB.

I am pretty clueless and starting to think about using a html table instead, or at least for the main.html part at least...

Thu, 2009-08-13 09:37

HHawk

Offline

newbie

Last seen: 13 years 32 weeks ago

Timezone: GMT+2

Joined: 2009-08-04

Posts: 6

Points: 0

Nobody willing to lend me a hand with this?

~~Nobody willing to lend me a hand with this?~~

Screw this; I have had it with this CSS. Back to tables. At least I understand those and can get it to work! I have spend over a week on this and I am getting nowhere.

Thu, 2009-08-13 14:14

harrierdh

Offline

Enthusiast

Colorado

Last seen: 13 years 15 weeks ago

Colorado

Timezone: GMT-7

Joined: 2009-07-30

Posts: 83

Points: 20

Cant make layout expand

I don't know how the code got this way but the position: absolute statements are the root problem. Unfortunately there is no easy fix. The layout is bad from top to bottom. Take a look here for some ideas. http://www.cssplay.co.uk/layouts/three-column-layouts.html

Somebody should create a program that converts table layout pages to tableless with css. Maybe somebody has, I don't know. Thing is css does not act like tables. The examples in the link above are the best I've seen for comparison of css vs tables.

Mon, 2009-08-17 17:02

#10

DivaVocals

Offline

Regular

Last seen: 13 years 16 weeks ago

Timezone: GMT-8

Joined: 2008-01-20

Posts: 12

Points: 2

HHawk wrote:Nobody willing

HHawk wrote:

~~Nobody willing to lend me a hand with this?~~

Screw this; I have had it with this CSS. Back to tables. At least I understand those and can get it to work! I have spend over a week on this and I am getting nowhere.

Please don't give up.. This is totally doable, and this is coming from the woman who thought for the longest time that CSS layouts would NEVER ever be able to do what table layouts do.. However, I have seen far too many STUNNING examples of how this is not the case. (that said there are still SOME things where tables IMO are more appropriate -- data grids for example)
.
.
harrierdh is right, the CSS layout samples at: http://www.cssplay.co.uk/layouts/three-column-layouts.html are an OUTSTANDING place to start. (They also can EASILY be adapted into two-column layouts) Stu's clean cross browser compatible layouts will provide you an excellent foundation that you can build your base layout upon. As long as you understand some of the basics of how

s work, and some CSS basics (or have some good CSS resources/cheat sheets) converting your layout to a tableless layout should be easy low hanging fruit to tackle..
.
.
I just recently used one of these to convert a two column table layout into a two column TABLELESS layout in the blink of an eye. I think you could very easily do the same with your site. I used these layouts to create a template embed file for an e-commerce solution. It's still in dev (awaiting client approval of the improved templating), but I think it worked well and solves some issues with site consistency that the table based layout is contributing to.
.
.
For the site I applied these tableless layouts to; I had to apply a few additional styles to add a menu above the top of the layout, and a few other tweaks to make this my own. However, all in all despite my tweaks, it took about 2-3 hours to get my base page re-engineered in the new tableless format.
.
.
and the result????
.
.
Here's the current site: http://anomalyrecords.net/catalog/
.
.
Here's the improved TABLELESS version: http://clients.overthehillweb.com/anomalyrecords/catalog/index.php?main_page=index&cPath=0

Tue, 2009-08-18 11:09

#11

HHawk

Offline

newbie

Last seen: 13 years 32 weeks ago

Timezone: GMT+2

Joined: 2009-08-04

Posts: 6

Points: 0

Well after a long timeout

Well after a long timeout during the weekend, I completely redid the websites.
I think it's better now, but I am still facing some problems.

Take a look here: website
I understand the code isn't 100%, but is it better than the old one? Must be, right?

Anyways, I am currently stuck and I have the following questions;

Question 1
How do I get the background working like in this example like here

Cause with that "old" layout everything was fixed, meaning it would not expand. With the new layout, the design "can" expand (probably not going to happen, but you never know) and when that happens the background image would probably look messed up, cause it has a fixed size.
SOLVED!

Question 2
How do I fix the center/middle brown part? Currently it has a white part in between.
SOLVED!

Question 3
I am also having problems adding the oneliner-text beneath "UW GEGEVENS ZIJN BIJ ONS WEL VEILIG". I think if I get help for this, I will also be able to add a PHP image rotator (where the "dictionary"-image currently is located).
SOLVED!

Anyone willing to help me with these problems and tell me what I have to do to fix it?

//edit

Removed everything, cause I solved everything!

Tue, 2009-08-18 15:56

#12

DivaVocals

Offline

Regular

Last seen: 13 years 16 weeks ago

Timezone: GMT-8

Joined: 2008-01-20

Posts: 12

Points: 2

Right on!!!! Very nice

Right on!!!! Very nice change!!!! Looks like you got the tableless CSS really dialed in here!!! :thumbsup:

HHawk wrote:

Well after a long timeout during the weekend, I completely redid the websites.
I think it's better now, but I am still facing some problems.

Take a look here: website
I understand the code isn't 100%, but is it better than the old one? Must be, right?

Anyways, I am currently stuck and I have the following questions;

Question 1
How do I get the background working like in this example like here

Question 2
How do I fix the center/middle brown part? Currently it has a white part in between.
SOLVED!

Anyone willing to help me with these problems and tell me what I have to do to fix it?

//edit

Removed everything, cause I solved everything!

Cannot make my layout's content expand.

1. first, always validate

Congratulations! No Error

Actually it's Markup

cant make layout expand

expandable

Sorry for the late reply,

Well I didn't just want to

Nobody willing to lend me a hand with this?

Cant make layout expand

HHawk wrote:Nobody willing

Well after a long timeout

Right on!!!! Very nice

User login

Navigation