Float - something wierd, probably ME!

User 1964159 Photo


Registered User
156 posts

Hi all, I have two small blocks of text (<p class="leftbox"> and <p class="rightbox">:

<p class="leftbox">
<b><u>Do not write:</u></b><br /><br />
transport facilities<br />
educational amenities<br />
communication<br />
research facilities<br />
computing facilities<br />
worker on a temporary basis<br />
in the engineering field<br />
the human factor
</p>

<p class="rightbox">
<b><u>if you can write:</u></b><br /><br />
trains, cars, lorries<br />
schools, colleges<br />
e-mail, letter, phone call<br />
chemistry laboratory<br />
computers<br />
temporary staff<br />
in engineering<br />
people
</p>

I want them to display side-by-side within the <div id="content"></div> on my page.
My external CSS:
.leftbox {
width: 250px;
background-color: #D3DBED;
margin-left: 60px;
padding-left: 30px;
font-size: 1.3em;
}
.rightbox {
width: 250px;
background-color: #D3DBED;
padding-left: 30px;
font-size: 1.3em;
margin-right: 60px;
float: right;
}
"Float: right; does float the box, but drops it down and outsite it's <div>
I never have got to grips with the float attribute. Any idea please? I have looked arounf the forums, not much luck.
User 1964159 Photo


Registered User
156 posts

To Illustrate what I mean, I have uploaded the page to my website, but as it is not complete, it is not linked. Please go to: http://www.queens-english-society.com/guide_4.2.html
As always, my thanks to all.
Tony
User 122279 Photo


Senior Advisor
14,649 posts
Online Now

Hi Tony, you have to float the left box too, and place a divclear after the right box in order to have the border from the container come underneath the two boxes. Like this:
html:
<p class="leftbox">
<b><u>Do not write:</u></b><br /><br />
transport facilities<br />
educational amenities<br />
communication<br />
research facilities<br />
computing facilities<br />
worker on a temporary basis<br />
in the engineering field<br />
the human factor
</p>

<p class="rightbox">
<b><u>if you can write:</u></b><br /><br />
trains, cars, lorries<br />
schools, colleges<br />
e-mail, letter, phone call<br />
chemistry laboratory<br />
computers<br />
temporary staff<br />
in engineering<br />
people
</p>

<div class="divclear"></div>
</div><b><i><!-- end content div --></i></b>


css:

.leftbox {
width: 250px;
background-color: #D3DBED;
margin-left: 60px;
margin-right: 0;
padding-left: 30px;
float:left;
font-size: 1.3em;
border: 1px solid red;
}
.rightbox {
width: 250px;
background-color: #D3DBED;
padding-left: 30px;
font-size: 1.3em;
margin-right: 60px;
margin-left: 0;
float: right;
border: 1px solid red;
}


Besides, you ought to fix the doctype in order to have the page validating:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>

Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com


User 1964159 Photo


Registered User
156 posts

Ah Inger! you are such a star. It is a bit daft, I never have managed to get it right when it comes to "float".
Thanks also for the tip about DOCTYPE. That is me being lazy, I suspect, and the result of 'copy and paste' at sometime. I will check the whole website now.
Thanks you so much.
Tony :)
User 122279 Photo


Senior Advisor
14,649 posts
Online Now

You're very welcome!

Another hint, if you want, is a javascript for your footer that will change the year to the current for you:

<script language="JavaScript" type=
"text/javascript">
<!--
today=new Date();
y0=today.getFullYear();

// end hiding --->
</script> &copy; 2009 - <script language="JavaScript" type=
"text/javascript">
<!--- Hide from old browsers
document.write(y0);
// end hiding --->
</script>


You can try it by pasting this code into a blank document in the html Editor and preview it.
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com


User 1964159 Photo


Registered User
156 posts

......Just to let you kinow that I have inserted your suggestions (all), SUCCESS!
Excellent support.
Tony
User 122279 Photo


Senior Advisor
14,649 posts
Online Now

:)
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com



Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.