<div>: can't get content under header

**KoosHopeloos** · 05-03-2007, 04:35 AM

L.S.,

I'm trying to make a layout which is completely fixed in width and height if needed by using three divs rows (header, content, footer) which have each 3 div again to be able to play around better with the webdesign.

The problem is that I need the content div row to nudge up automatically to the header div row, independantly of the header height. The same goes for the footer/content div row.

Any suggestions how to do this?

Thanks,

Code:

<!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">
<head>
  <title>Copyright JNvB</title>
  <style type="text/css">

/* header */

.headerrow {
position: absolute;

}
.logo {
position: absolute;
margin-left: 0px;
height: 200px;
width: 200px;
background-color: #0000FF;
}

.header {
position: absolute;
margin-left: 200px;
height: 200px;
width: 565px;
background-color: #00FF00;
}

.empty1 {
position: absolute;
margin-left: 765px;
height: 200px;
width: 5px;
background-color: #FF0000;
}

/* end header */

/* content */

.contentrow {
position: absolute; 
}

.menu {
float: left;
width: 200px;
background-color: #00FF00;
}

.content {
float: left;
width: 565px;
background-color: #FF0000;
}

.empty2 {
float: left;
width: 5px;
background-color: #0000FF;
}

/* end content */

/* footer */

.footerrow {
position: absolute;
}

.totop {
position: absolute;
margin-left: 0px;
height: 100px;
width: 200px;
background-color: #FF0000;
}

.footer {
position: absolute;
margin-left: 200px;
height: 100px;
width: 565px;
background-color: #0000FF;
}

.empty3 {
position: absolute;
margin-left: 765px;
height: 100px;
width: 5px;
background-color: #00FF00;
}

/* end footer */

</style>
</head>

<body>
<div class="headerrow">
<div class="logo">logo</div>
<div class="header">header</div>
<div class="empty1">empty1</div>
</div>

<div class="contentrow">
<div class="menu">menu</div>
<div class="content">content</div>
<div class="empty2">empty2</div>
</div>

<div class="footerrow">
<div class="totop">totop</div>
<div class="footer">footer</div>
<div class="empty3">empty3</div>
</div>

</body>
</html>

**gamerman0203** · 05-03-2007, 06:18 AM

do you have to have it positioned absolutely? what I like to do is just have everything relative, or not at all essentially. You just want a header div with a content div under that and then a footer div under that, correct? Not absolutely positioning your divs would create this effectively and easily. You would just have to set widths to make sure they are all the same.

**KoosHopeloos** · 05-03-2007, 07:04 AM

@ gamerman0203: well, I'm completely redesigning my site and I'm new to CSS.

Quote:

You just want a header div with a content div under that and then a footer div under that, correct?

You are right, with that it is independent of the height of each row. For example, the height of the content column is not fixed and the footer row must be under the content row. And I need to keep each row divided in three....

Quote:

Not absolutely positioning your divs would create this effectively and easily.

Could you give me an example how to do this? I have tried so many things, but I couldn't get it to work!

Thanks for the help!

**gamerman0203** · 05-03-2007, 09:51 AM

if you were to just take out "position:absolute" for the header, content, and footer, it would automatically position them relative. Basically, it will "stack" the divs on top of each other in the order that your have them placed in the code.

**KoosHopeloos** · 05-03-2007, 01:57 PM

@ gamerman0203: I followed your advice and removed the "position: absolute" from each div row declaration. But iso sitting one under the other, they stack on top of each other. I've tried a couple of other things, and this seems to work best, but now I do not have a header/content/footer row anymore...

Code:

<!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">
<head>
  <title>Copyright JNvB</title>
  <style type="text/css">

.column_menu {
position: absolute;
margin-left: 0px;
}

.column_content {
position: absolute;
margin-left: 200px;
}

.column_empty {
position: absolute;
margin-left: 765px;
}

/* header */

.logo {
height: 200px;
width: 200px;
background-color: #0000FF;
}

.header {
height: 200px;
width: 565px;
background-color: #00FF00;
}

.empty1 {
height: 200px;
width: 5px;
background-color: #FF0000;
}

/* end header */

/* content */

.menu {
width: 200px;
background-color: #00FF00;
}

.content {
width: 565px;
background-color: #FF0000;
}

.empty2 {
width: 5px;
background-color: #0000FF;
}

/* end content */

/* footer */

.totop {
height: 200px;
width: 200px;
background-color: #FF0000;
}

.footer {
height: 200px;
width: 565px;
background-color: #0000FF;
}

.empty3 {
height: 200px;
width: 5px;
background-color: #00FF00;
}

/* end footer */

</style>
</head>

<body>
<div class="column_menu">
<div class="logo">logo</div>
<div class="menu">menu</div>
<div class="totop">totop</div>
</div>

<div class="column_content">
<div class="header">header</div>
<div class="content">HTML is oorspronkelijk ontwikkeld om informatie via hypertext-documenten te ontsluiten voor verschillende platforms (zoals Windows, Macintosh en Unix). Bij de weergave van HTML-documenten ging het niet om een mooie, door de auteur geheel vastgelegde lay-out. Uitgangspunt was dat de informatie in een heldere structuur aan een bezoeker geboden moest worden. Bijvoorbeeld door de informatie in te delen met behulp van koppen van verschillend gewicht en paragrafen.

Met het toenemende gebruik van het internet ontstond bij webauteurs steeds meer de behoefte aan extra mogelijkheden bij de opmaak van documenten. Op deze behoefte is door de ontwikkelaars van browsers (Netscape en Microsoft) ingespeeld door het introduceren van nieuwe elementen en attributen. Sommige van deze elementen en attributen werden breed geaccepteerd, maar bij andere elementen bleef de ondersteuning beperkt tot één enkele browser. Webauteurs zelf gebruikten hun creativiteit om binnen de bestaande mogelijkheden van HTML meer invloed op de opmaak van hun documenten te krijgen. Voorbeelden zijn het gebruik van tabellen om de inhoud op een bepaalde plaats te krijgen en het omzetten van tekst in een afbeelding. De verstrengeling van structuur en presentatie die hierdoor ontstaat, heeft tot gevolg dat het niet meer zeker is dat een document altijd in elke browser en op elk platform goed te bekijken is.

Als oplossing voor dit probleem zijn stylesheets geïntroduceerd. De achterliggende gedachte is de scheiding tussen structuur en presentatie: HTML moet weer zorgen voor de structuur van het document, de presentatie wordt bepaald met behulp van in stylesheets vastgelegde stijlen.

De taal waarmee stylesheets worden gemaakt, heet Cascading Style Sheets (CSS) en is ontwikkeld door het World Wide Web Consortium (W3C). De laatste specificatie van Cascading Style Sheets (CSS 2) bevat een groot aantal mogelijkheden bij de opmaak van HTML-documenten en in toekomstige versies zal dit aantal alleen maar toenemen.

De volgende afbeeldingen geven een (beperkt) overzicht van wat CSS te bieden heeft. De rechter afbeelding is een schermafdruk van de weergave in een browser die stylesheets ondersteunt. De linker afbeelding laat zien hoe hetzelfde document wordt weergegeven zonder gebruik te maken van stijlen.</div>
<div class="footer">footer</div>
</div>

<div class="column_empty">
<div class="empty1">empty1</div>
<div class="empty2">empty2</div>
<div class="empty3">empty3</div>
</div>

</body>
</html>

**gamerman0203** · 05-04-2007, 10:26 AM

hmm.. I miss understood I guess. I thought you wanted them to stack on top of each other? Can you maybe post a screenshot of what you have and explain what you want?

**KoosHopeloos** · 05-05-2007, 07:41 AM

@ gamerman0203: I solved my problem! I have tried really a lot of things, but I finally found out how to do it! I post it later...

Thanks for your help anyway!

05-03-2007, 06:18 AM	#2 (permalink)
gamerman0203 Retired Join Date: Oct 2005 Location: Grand Rapids, MI Posts: 2,144 OS: XP MCE, Ubuntu Gutsy My System	Re: <div>: can't get content under header do you have to have it positioned absolutely? what I like to do is just have everything relative, or not at all essentially. You just want a header div with a content div under that and then a footer div under that, correct? Not absolutely positioning your divs would create this effectively and easily. You would just have to set widths to make sure they are all the same. __________________ Follow These Steps First! CPU-Z \| SensorView \| WinXP Clean Boot \| Latest DirectX \| ATI Catalyst \| Nvidia ForceWare Posting System Specifications

05-03-2007, 09:51 AM	#4 (permalink)
gamerman0203 Retired Join Date: Oct 2005 Location: Grand Rapids, MI Posts: 2,144 OS: XP MCE, Ubuntu Gutsy My System	Re: <div>: can't get content under header if you were to just take out "position:absolute" for the header, content, and footer, it would automatically position them relative. Basically, it will "stack" the divs on top of each other in the order that your have them placed in the code. __________________ Follow These Steps First! CPU-Z \| SensorView \| WinXP Clean Boot \| Latest DirectX \| ATI Catalyst \| Nvidia ForceWare Posting System Specifications

05-04-2007, 10:26 AM	#6 (permalink)
gamerman0203 Retired Join Date: Oct 2005 Location: Grand Rapids, MI Posts: 2,144 OS: XP MCE, Ubuntu Gutsy My System	Re: <div>: can't get content under header hmm.. I miss understood I guess. I thought you wanted them to stack on top of each other? Can you maybe post a screenshot of what you have and explain what you want? __________________ Follow These Steps First! CPU-Z \| SensorView \| WinXP Clean Boot \| Latest DirectX \| ATI Catalyst \| Nvidia ForceWare Posting System Specifications

05-05-2007, 07:41 AM	#7 (permalink)
KoosHopeloos TSF Enthusiast Join Date: Nov 2004 Posts: 555 OS: Windows XP Pro & Windows Vista Ultimate browsing the web with FF, Opera, Safari and IE.	Re: <div>: can't get content under header @ gamerman0203: I solved my problem! I have tried really a lot of things, but I finally found out how to do it! I post it later... Thanks for your help anyway! __________________ KoosHopeloos, straight to you from .nl via the world wide web!