Forum Moderators: not2easy
Everything above Filemaker has been pushed in slightly.
Have tried adjusting margins and padding on both left and right columns but nothing seems to be working!
Any advice?
CSS is:
div#pagecontent {
text-align: left;
width: 706px;
padding: 10px;
margin-right: auto;
margin-left: auto;
min-height: 350px;
_height: 350px
}
div#leftcolumn {
width: 200px;
float: left;
margin: 0px;
padding: 0px;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
}
.clearfloats {
clear: both;
}
div#rightcolumn {
margin-left: 210px;
border-top: none;
border-right: none;
border-bottom: none;
border-left: 1px solid #1a4679;
padding-left: 5px;
}
div#linkbox {
width: 180px;
background-color: #e7e7e7;
padding: 10px;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #666666;
text-align: left;
margin: 0px;
}
div#linkboxheader {
width: 180px;
background-color: #666666;
padding: 5px 10px;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #ffffff;
text-align: left;
font-weight: bold;
margin: 0px;
}
My HTML is:
<div id="pagecontent">
<div id="leftcolumn">
<div id="linkboxheader">DTP</div>
<img src="../images/milestones.jpg" alt="image" width="200" height="200" /
<div id="linkbox">» <a href="introduction.html">Introduction</a><br />
» <a href="dtp_process.html">DTP Process</a><br />
» <a href="project_management.html">Project Management</a><br />
» <a href="translation_services.html">Translation Services</a><br />
» <a href="dtp_services.html">DTP Services</a><br />
» <a href="text_flow.html">Text Flow</a><br />
</div>
</div><!--leftcolumn-->
<div id="rightcolumn">
<p class="heading1">DTP Services</p>
<p class="bodytext">Localsoft uses industry standard programs to ease data exchange between
our company and yours. You can deliver your documents to us on disk or
via the Internet. We work with your format, translating, redesigning, and
proofing, so the resulting translation fits your design and layout perfectly
and is ready for print. Your completed project will then be returned to
you in the same format it was sent.</p>
<p class="bodytext">Localsoft uses the following industry standard programs
for text and graphics:<br />
Microsoft Windows 98, 2000, and XP<br />
Microsoft Office 97, 98, 2000, 2001, and XP<br />
Apple Macintosh OS 8.6, 9.2, OS X<br />
3D Studio<br />
Acrobat<br />
After Effects<br />
AutoCAD<br />
Director<br />
Dreamweaver<br />
FileMaker<br />
Flash<br />
Freehand<br />
GoLive<br />
Illustrator<br />
Localsoft custom software<br />
PageMaker<br />
Photoshop<br />
Premier<br />
Proofing Tools<br />
Protools<br />
QuarkXpress<br />
and many others</p>
</div><!--rightcolumn-->
<div class="clearfloats"></div>
</div><!-- pagecontent -->
[edited by: DrDoc at 6:25 pm (utc) on April 1, 2006]
[edit reason] Removed personal URL. Refer to TOS and forum charter for more information. [/edit]
IE seems to have problems with floats under certain circumstances. In this type of situation I would position div#leftcolumn absolutely. If you are placing any div's absolutely, just remember to apply position:relative to the container that the absolute div is within.
I made a few amendments to your code, feel free to post again if you have any questions as to what I did.
your css:
body {
text-align:center;
font-family: Arial, Helvetica, sans-serif;
}
div#pagecontent {
position: relative;
text-align: left;
width: 706px;
padding: 0;
margin:0 auto;
min-height: 350px;
_height: 350px;
}
div#leftcolumn {
position:absolute;
top:0;
left:0;
width: 200px;
margin: 0px;
padding: 0px;
}
div#rightcolumn {
margin-left: 210px;
border-left: 1px solid #1a4679;
padding-left: 10px;
}
div#linkbox {
width: 180px;
background-color: #e7e7e7;
padding: 10px;
font-size: 11px;
color: #666666;
text-align: left;
margin: 0px;
}
h2 {
background-color: #666666;
padding: 5px 10px;
font-size: 11px;
color: #ffffff;
text-align: left;
font-weight: bold;
margin: 0px;
}
and the html:
<div id="pagecontent">
<div id="leftcolumn">
<h2>DTP</h2>
<img src="../images/milestones.jpg" alt="image" width="200" height="200" />
<div id="linkbox">» <a href="introduction.html">Introduction</a><br />
» <a href="dtp_process.html">DTP Process</a><br />
» <a href="project_management.html">Project Management</a><br />
» <a href="translation_services.html">Translation Services</a><br />
» <a href="dtp_services.html">DTP Services</a><br />
» <a href="text_flow.html">Text Flow</a><br />
</div>
</div><!--leftcolumn-->
<div id="rightcolumn">
<p class="heading1">DTP Services</p>
<p class="bodytext">Localsoft uses industry standard programs to ease data exchange between
our company and yours. You can deliver your documents to us on disk or
via the Internet. We work with your format, translating, redesigning, and
proofing, so the resulting translation fits your design and layout perfectly
and is ready for print. Your completed project will then be returned to
you in the same format it was sent.</p>
<p class="bodytext">Localsoft uses the following industry standard programs
for text and graphics:<br />
Microsoft Windows 98, 2000, and XP<br />
Microsoft Office 97, 98, 2000, 2001, and XP<br />
Apple Macintosh OS 8.6, 9.2, OS X<br />
3D Studio<br />
Acrobat<br />
After Effects<br />
AutoCAD<br />
Director<br />
Dreamweaver<br />
FileMaker<br />
Flash<br />
Freehand<br />
GoLive<br />
Illustrator<br />
Localsoft custom software<br />
PageMaker<br />
Photoshop<br />
Premier<br />
Proofing Tools<br />
Protools<br />
QuarkXpress<br />
and many others</p>
</div><!--rightcolumn-->
</div><!-- pagecontent -->
Thanks so much for your help, was really beginning to stress me out!
Thanks again!
