Float question - Post ID 98350

User 1964159 Photo


Registered User
156 posts

Here is the html for a page, (site not live):
<!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>
<title>The QES ENGLISH aCADEMY Foreign Errors</title>
<meta http-equiv="generator" content="CoffeeCup HTML Editor (www.coffeecup.com)" />
<meta name="created" content="Sat, 29 Aug 2009 12:32:03 GMT" />
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<link href="stylea.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
<div id="banner">
<img src="Images/fullacademybanner.gif" width="1100" height="150" alt="" title="" border="0" align="" />
</div> <!-- end banner div -->
<div id="main">
<div id="rightbar">

</div> <!-- end rightbar div -->
<div id="navigation">

</div> <!-- end navigation div -->
<div id="content">
<h1>FOREIGN ERRORS <i>(Introduction)</i></h1>
<p>The first type of Foreign English is that produced in good faith by people who want to make themselves understood to visitors to their country and who use English as the main language into which they translate their messages to us. These are, more often than not, highly amusing to EMPs either because they are incorrect or frequently because they mean something quite different from what their authors think they mean (usually with a rather saucy though unintended meaning). We here provide a list of some of the better "clangers" that EMP tourists have brought back from their travels. <b><i>The users of these incorrect terms cannot in any way be adversely criticised for using them. They have done their best and for this we thank them</i></b> (but suggest that next time they resort to a professional translator to put their message across in English).</p>
<p class ="emphasise">How is this for a foretaste?</p>
<p class ="emphasise">A sign in a Japanese public bath-house read:</p>
<img src="Images/hotel sign.gif" width="200" height="149" alt="" title="" border="0" align="" />
</div> <!-- end content div -->
<div id="footer">
<p>Footer stuff</p>
</div> <!-- end footer div -->
</div> <!-- end main div -->
</div> <!-- end wrapper div -->
</body>
</html>
I want to keep the image of the sign inside my content div, but need to float it. To set the CSS in an external style sheet, I gave it a class="sign", but it drops out of the bottom of the content div. Any ideas? By the way I haven't forgotten the alt text for the image.
User 122279 Photo


Senior Advisor
14,649 posts
Online Now

I think we need to see the css file for this...
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

Certainly Inger,
HTML:
<!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>
<title>The QES ENGLISH aCADEMY Foreign Errors</title>
<meta http-equiv="generator" content="CoffeeCup HTML Editor (www.coffeecup.com)" />
<meta name="created" content="Sat, 29 Aug 2009 12:32:03 GMT" />
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<link href="stylea.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
<div id="banner">
<img src="Images/fullacademybanner.gif" width="1100" height="150" alt="" title="" border="0" align="" />
</div> <!-- end banner div -->
<div id="main">
<div id="rightbar">

</div> <!-- end rightbar div -->
<div id="navigation">

</div> <!-- end navigation div -->
<div id="content">
<h1>FOREIGN ERRORS <i>(Introduction)</i></h1>
<p>The first type of Foreign English is that produced in good faith by people who want to make themselves understood to visitors to their country and who use English as the main language into which they translate their messages to us. These are, more often than not, highly amusing to EMPs either because they are incorrect or frequently because they mean something quite different from what their authors think they mean (usually with a rather saucy though unintended meaning). We here provide a list of some of the better "clangers" that EMP tourists have brought back from their travels. <b><i>The users of these incorrect terms cannot in any way be adversely criticised for using them. They have done their best and for this we thank them</i></b> (but suggest that next time they resort to a professional translator to put their message across in English).</p>
<p class ="emphasise">How is this for a foretaste?</p>
<p class ="emphasise">A sign in a Japanese public bath-house read:</p>
<img src="Images/hotel sign.gif" width="200" height="149" alt="The sign in a Japanese bath-house indicated that: Foreign guests were requested not to pull cock in tub"title="" border="0" align="" class="sign" />
</div> <!-- end content div -->
<div id="footer">
<p>Footer stuff</p>
</div> <!-- end footer div -->
</div> <!-- end main div -->
</div> <!-- end wrapper div -->
</body>
</html>

css:
/* CSS for qes site nav plus 2
*/
body {
margin: 0;
padding: 0;
background-color: #333333;
font: small Helvetica, arial, sans-serif;
}
#wrapper {
width: 1100px;
margin-left: auto;
margin-right: auto;
margin-top:20px;
padding-bottom: 5px;
background-color: #E3DCD8;
}
#banner {
border-bottom: 1px solid #400080;
}
#main {
margin-top: 10px;
}
#rightbar {
float: right;
width: 200px;
border: 1px solid #996699;
margin-right: 20px;
margin-bottom: 10px;
padding:10px;
background-color: #CCCCC;
font: small Helvetica, arial, sans-serif;
color: #660066;
}
#navigation {
float: left;
top: 170px;
margin-left: 20px;
padding: 10px;
width: 200px;
}
#content {
background-color: #CCCCCC;
margin-top: 10px;
margin-left: 200px;
margin-right: 250px;
border: 1px solid #330033;
padding: 10px;
}
.mainpara {
padding-left: 35px;
}
#leftpara {
width: 320px;
padding-left: 10px;
padding-right: 20px;
float: left;
}
#footer {
clear: both;
border: 1 px solid #800080;
background-color: #C0C0C0;
}
h1 {
text-align: center;
font: Helvetica, arial, sans-serif;
font-weight: bold;
color: #FFFFFF;
background-color: #660066;
}
h2 {
text-align: center;
color: #330033;
background-color: #C0C0C0;
}
h3 {
text-align: left;
color: #330033;
}
.teach {
float: right;
margin-left: 10px;
}
.emphasise {
color: #330033;
font-size: medium;
line-height: 1.5em;
font-weight: bold;
}
.cambridgedicry {
float: left;
margin-right: 25px;
margin-bottom: 25px;
}
.cambpara {
font-size: medium;
color: #660066;
padding-top: 15px;
padding-bottom: 55px;
}
.oxforddicry {
float: left;
margin-right: 25px;
margin-bottom: 15px;
}
.oxpara {
font-size: medium;
font-weight: bold;
color: #660066;
padding-top: 25px;
padding-bottom: 15px;
}
.longmandicry {
float: left;
margin-right: 25px;
margin-bottom: 15px;
}
.longmanpara {
font-size: medium;
font-weight: bold;
color: #660066;
padding-top: 100px;
padding-bottom: 15px;
padding-left: 25px;
}
.joinQES {
background-color: #CCCCCC;
color: #330033;
font-weight: bold;
padding: 15px;
}
.subscribe {
text-align: center;
font: Helvetica, arial, sans-serif;
font-weight: bold;
color: #FFFFFF;
background-color: #660066;
padding-top: 6px;
padding-bottom: 6px;
}
.websterdicry {
float: left;
margin-right: 25px;
margin-bottom: 15px;
}
.websterpara {
font-size: medium;
font-weight: bold;
color: #660066;
padding-top: 40px;
padding-bottom: 65px;
padding-left: 25px;
}
.dicrydotcom {
float: right;
margin-right: 10px;
padding-top: 30px;
}
.dicrydotpara {
font-size: medium;
font-weight: bold;
color: #660066;
padding-top: 40px;
padding-bottom: 15px;
padding-left: 25px;
}
.babylon {
float: left;
margin-right: 25px;
margin-bottom: 80px;
}
.wiki {
float: left;
margin-right: 25px;
margin-bottom: 175px;}
.babylonpara {
font-size: medium;
color: #660066;
padding-top: 10px;
padding-bottom: 15px;
padding-left: 25px;
}
.wikipara {
color: #660066;
padding-top: 10px;
padding-bottom: 15px;
padding-left: 25px;
}
.britam-sites {
float: left;
margin-right: 25px;
padding-bottom: 30px;
}
.tampere {
float: left;
margin-right: 25px;
padding-bottom: 50px;
padding-top:25px;
}
.sign {
float: right;
}
User 122279 Photo


Senior Advisor
14,649 posts
Online Now

If I have understood it correctly, you want to achieve something like in the attached picture, the white rectangle representing the hotelsign.gif (I would write the name in one word, some servers have problems otherwise).

To achieve this, I have added a bit to the bottom of the css:

.sign {
float: right;
}

.specialtext {
float: left;
}
.divclear {
clear:both;
}

Likewise I have modified the html file right above the end tag for the content div:

<div class="specialtext"><p class ="emphasise">How is this for a foretaste?</p>
<p class ="emphasise">A sign in a Japanese public bath-house read:</p></div>
<img class="sign" src="images/hotelsign.gif" width="200" height="149" alt="The sign in a Japanese bath-house indicated that: Foreign guests were requested not to pull cock in tub"title="" border="0" align=""/>
<div class="divclear"></div>

Hope this helps!

As I have said earlier, I'm keen to see the site when you have launched it ;)

And... I hope my foreign English is not worth quoting on that particular page... :lol:
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 122279 Photo


Senior Advisor
14,649 posts
Online Now

Oops, forgot the file...

PS: Have you read the book 'Mother tounge' by Bill Bryson? You'll get many a good laugh there!
Attachments:
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

Inger, My Dear Sir,
Thank you again for your sound advice. I will make the necessary changes. I do have problems with nesting "divs inside divs", although I am always mindful on opening and closing in the correct sequence. The "div-clear" code seems to be a valuable tool I must learn.
You have been very helpful thus far and long may it continue, if you do not mind. I am a relative novice in this field and CC has been an enormous help, particularly as I refuse to go down the WYSIWYG route and insist on doing it the 'proper way, (except for the "Form Builder" etc.
In view of your assistance with our site, I would like you to e-mail me privately:
ant.scott@ntlworld.com
as you appear to be interested in our subject. I have a website live at present: http://www.queens-english-society.com You will see that it is not fit for purpose, for a host of reasons, but I do not intend to get rid of it until the replacement is ready. One thing is for sure, there won't be a PDF file in site, I shall do away with CMS until "CC" develop one and the pages will not give viewers arm-ache, because of the too-long pages.
My best regards
Tony
User 1948478 Photo


Senior Advisor
1,850 posts

Tony,

It is just a guess on my part, but I suspect that Inger may prefer to be addressed in a slightly more female manner than "Sir" ;)

User 122279 Photo


Senior Advisor
14,649 posts
Online Now

;) You're right, Per!

But I'm used to it. When I was working as a teacher, I was called anything from 'mum' to 'grandad' by my pupils if they were focused on a problem they wanted my assistance with.

Best regards,
Ms Inger :cool:
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

I am looking for a smiley with a red face, I am extremely sorry Inger. It is not an excuse that the bee-keeping image slightly foxed me, I should have checked .
Moving swiftly on, embarrassed, the code is working well on my site, which looks as though it is going to be rather large....so back to work for me.

My very best
Tony

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.