Text in my "content" running into the "footer"

jeanm

Member
I have a div container with horizontal header and navigation sections plus two columns below that and a footer at the bottom. The div.container, the div.content and the div.right are all set with height:auto;

I can put as much text in the div.right as I like and it keeps stretching downwards but if I put too much text in the div.content then it spills over into the footer. Would anyone know how to fix my problem please? The code is as follows:

<style type="text/css">
div.container
{
width:900px;
height:auto;
background-color:#FEC489;
margin-top:0px;
margin-right:50px;
margin-bottom:5px;
margin-left:50px;
border:1px solid olive;
}



div.header
{
height:120px;
padding:0.5em;
}




div.navigation
{
height:50px;
padding:0.5em;
background-color: olive
}




div.footer
{
padding:0.5em;
background-color: olive
}



h1.header
{
padding:0;
margin:0;
}



div.content
{
height:auto;
width:650px;
float:left;
margin:0;
padding:1em;
}



div.right
{
height:auto;
margin-left:680px;
border-left:1px solid olive;
padding:1em;
}


h2.header
{
padding:0;
margin:0;
}


</style>
 

jeanm

Member
It's a heck of a lot of code but here we go (take no notice of the silly words):


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<head>


<title>......................</title>

<meta name="keywords" content="....................">
<meta name="description" content="...............">


<link rel="stylesheet" type="text/css" href="mystyle.css" />



<style type="text/css">
div.container
{
width:900px;
height:auto;
background-color:#FEC489;
margin-top:0px;
margin-right:50px;
margin-bottom:5px;
margin-left:50px;
border:1px solid olive;
}



div.header
{
height:120px;
padding:0.5em;
}




div.navigation
{
height:50px;
padding:0.5em;
background-color: olive
}




div.footer
{
padding:0.5em;
background-color: olive
}



h1.header
{
padding:0;
margin:0;
}



div.content
{
height:auto;
width:650px;
float:left;
margin:0;
padding:1em;
}



div.right
{
height:auto;
margin-left:680px;
border-left:1px solid olive;
padding:1em;
}


h2.header
{
padding:0;
margin:0;
}


</style>


</head>


<body>



<div class="container">


<div class="header"><h1 class="header">An interesting image will be placed in this header</h1></div>



<div class="navigation"><p>We will find everything from this point in the navigation area</p></div>



<div class="content">


<h1>Each page title will be written in Heading 1</h1>


<p>The agent we visited (Janice) said no-one at her agency could afford to go on the Trans Siberian Railway. Our hearts
sank. Surely we could find a way to go that wouldn't cost an arm and a leg. Ian is a casual bus driver and I'm self
employed working from home. We are not wealthy people and neither of us gets holiday pay so we have to watch our dollars
and get the best value possible for our money.

<img src="images/001.Ian-planning-trans-sib.jpg" alt="Ian planning our trip" width="259" height="193" border="1">

One bonus we had was the 20 years worth of Qantas Frequent Flyer Points up
our sleeves. We arrived back home that morning with a few brochures and hearts that were somewhat heavier than when we
left home. This is one trip that is going to cost a lot of dollars even after using our Frequent Flyers for much of the
travel. We thought we had better look for some cheaper options. Could we possibly complete this long journey without a tour
escort? Are we brave enough to travel through China and Russia by ourselves? We don't know a word of either language.
A visit to the library was needed.It didn't take us long to realize that organising something like this was going to be a
daunting task. We know virtually nothing about Russia, Mongolia or China so we both have a steep learning curve ahead
of us. We have begun scouring the internet for information. Details on journeying across Siberia are hard to find and
information conflicts. How do other travellers manage with this lack of information? We're glad we are not leaving for
Russia next week as we are totally unprepared. Full steam ahead........We know virtually nothing about Russia, Mongolia or China so we both have a steep learning curve ahead
of us. We have begun scouring the internet for information. Details on journeying across Siberia are hard to find and
information conflicts. How do other travellers manage with this lack of information? We're glad we are not leaving for
Russia next week as we are totally unprepared. Full steam ahead........We know virtually nothing about Russia, Mongolia or China so we both have a steep learning curve ahead
of us. We have begun scouring the internet for information. Details on journeying across Siberia are hard to find and
information conflicts. How do other travellers manage with this lack of information? We're glad we are not leaving for
Russia next week as we are totally unprepared. Full steam ahead........We know virtually nothing about Russia, Mongolia or China so we both have a steep learning curve ahead
of us. We have begun scouring the internet for information. Details on journeying across Siberia are hard to find and
information conflicts. How do other travellers manage with this lack of information? We're glad we are not leaving for
Russia next week as we are totally unprepared. Full steam ahead........We know virtually nothing about Russia, Mongolia or China so we both have a steep learning curve ahead
of us. We have begun scouring the internet for information. Details on journeying across Siberia are hard to find and
information conflicts. How do other travellers manage with this lack of information? We're glad we are not leaving for
Russia next week as we are totally unprepared. Full steam ahead........We know virtually nothing about Russia, Mongolia or China so we both have a steep learning curve ahead
of us. We have begun scouring the internet for information. Details on journeying across Siberia are hard to find and
information conflicts. How do other travellers manage with this lack of information? We're glad we are not leaving for
Russia next week as we are totally unprepared. Full steam ahead........

</p></div>




<div class="right">
<h2>Interesting links will be in this section</h2>
<p>Ceiling tin is also known as tin tiles, pressed metal and pressed tin. These words are used inter-changeably on
this site. They are all correct depending on which part of the world you live in.

Tin ceiling tiles are the best product to use if you want a decorative interior finish for walls or ceilings. Whether this
is a DIY job or whether you are calling in the professionals you must have a serious
think about using tin ceiling tiles rather than sheetrock or plasterboard. We know virtually nothing about Russia, Mongolia or China so we both have a steep learning curve ahead
of us. We have begun scouring the internet for information. Details on journeying across Siberia are hard to find and
information conflicts. How do other travellers manage with this lack of information? We're glad we are not leaving for
Russia next week as we are totally unprepared. Full steam ahead........

</p></div>





<div class="footer">
<h4>Here will be written something sensible. I'll make it in Heading 3 and I will centre it if I can figure out
how</h4>
</div>






</div>

</body>
</html>
 

Theta

New Member
Here's a solution:

I've changed the CSS of these

div.content
{
width:650px;
margin:0;
padding:1em;
}
div.right
{
border-left:1px solid olive;
padding:1em;
float: right;
width: 170px;
}

And moved full <div class="right"> before the <div class="content"> Like this:

<div class="right">
<h2>Interesting links will be in this section</h2>
<p>Ceiling tin is also known as tin tiles, pressed metal and pressed tin. These words are used inter-changeably on
this site. They are all correct depending on which part of the world you live in.
.......</p></div>

<div class="content">
<h1>Each page title will be written in Heading 1</h1>
<p>The agent we visited (Janice) said no-one at her agency could afford to go on the Trans Siberian Railway. Our hearts
sank. Surely we could find a way to go that wouldn't cost an arm and a leg. Ian is a casual bus driver and I'm self
.......
</p></div>

For me it looks right like this but only until the text in content is longer than the text in div right.

I would actually use a table o solve this, I guess...
But if the text is not changing a lot and will be something like this, this might do.
 

jeanm

Member
Thanks Theta. I tried it and it just makes the problem switch over to the div.left area instead of the div.content area. As this is going to ultimately be my template I will have to find a solution that will allow me to put a heap of content into both divs. Anyone else know the answer please? I'm not permitting myself to buy Dreamweaver until I have enough knowledge to create a template myself using Notepad.
 

jeanm

Member
Well I've made the problem disappear by placing this after the <div class="right">

<div style="clear: both;">&nbsp;</div>

I don't know if it is correct coding but it is working.
 

smoovo

New Member
Well I've made the problem disappear by placing this after the <div class="right">

<div style="clear: both;">&nbsp;</div>

I don't know if it is correct coding but it is working.

The thing is it seems to be "the old fashion" method to fix this problem. The new way is to add "overflow:auto;" to the container div. Both methods will fix it and both is right.
 

jeanm

Member
I tried adding "overflow:auto;" in the div.container but it unfortunately it didn't work so it is back to my piece of "chance" code. So much to learn, so much to learn....
 

smoovo

New Member
I tried adding "overflow:auto;" in the div.container but it unfortunately it didn't work so it is back to my piece of "chance" code. So much to learn, so much to learn....

If you are using the overflow auto method you should add width to the container too.

Eventually I'm happy it worked for you.
 
Top