|
CSS - 3 Colums Template - How To Get The Right Column Floating Properly?
hello,
ive been following a tute designed for a two column template and trying to follow this logic to make a 3 column template but i cant make it work unfortunately. any help would be really appreciated, thank you! apologies for a 'here is the code' post, but here is the code basically i want a 3 column template with 7 rows and only the 3rd row from the top really being divided into 3 columns -standard header, main content, footer, kind of design. whole 'table' is 587 wide and column sizes are 202 for left and right and 183 for center column. (no live link sorry) index page: Code: <!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <link href="css/template_css.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="container"> <div id="tag">Tag</div> <div id="header">Header</div> <div id="left">Left</div> <div id="main_content">Main Content</div> <div id="right">Right</div> <div id="login">Login</div> <div id="menu1">Menu1</div> <div id="menu2">Menu2</div> <div id="footer">Footer</div> </div> </body> </html> css file: Code: body {
background-image: url(../images/bg.jpg);
background-repeat: repeat-x;
margin: 0 auto;
text-align: center;}
#container {
border: 4px #99968F solid;
width:587px;
height: 724px;
margin: 20px auto;}
#tag {
text-align: left;
color: #64F81B;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
background-color: #000000;}
#header {
width: 587px;
height: 135px;
background-image: url(../images/header.jpg);
background-repeat: no-repeat;}
#left {
text-align: left;
width: 202px;
height: 287px;
margin: 0 auto;
float: left;
padding-top: 39px;
background-image: url(../images/left_bg.jpg);
background-repeat: no-repeat;}
#main_content {
margin-left: 202px;
padding-top: 25px;
width: 183px;
height: 287px;
background-image: url(../images/main_content_bg.jpg);
margin: 0 auto;}
#right {
float: right;
height: 287px;
margin: 0 auto;
margin-left: 385px;
padding-top: 39px;
width: 202px;
background-image: url(../images/right_bg.jpg);}
#login {
clear: both;
width: 587px;}
#menu1 {
clear: both;
width: 587px;}
#menu2 {
clear: both;
width: 587px;}
#footer {
clear: both;
width: 587px;}
Similar TutorialsHi there! About a week ago I posted here about an issue, and I received an immense amount of support, so I figured I'd come back here with anything I ran into! My website, in its current state, can be found here. You'll notice that the right column is stuck below the main content area. This is undesirable. Ideally, that gray box would align with the top of the content area, thus creating a simple 2-column layout. In IE (at least version 7), the gray box is shown BELOW the main content area, but still completely inside the #contentwrap div. In Opera and Firefox, however, the gray box is partially in and partially out of the #contentwrap div. I'm not sure what this is due to, (perhaps something weird in my coding?), but either way I just need to get that column to align with the top of the main content area. My code validated fine (but of course that doesn't make it perfect...), and I have provided the complete code for both the (X)HTML and the CSS below: Code: xhtml <!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" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-type" content="text/html; charset=UTF-8" /> <title>Function T .:. Home</title> <style type="text/css" media="all">@import "css/master.css";</style> </head> <body> <div id="entire-page"> <div id="page-container"> <div id="ghost"></div> <div id="header"></div> <div id="navigation"> <ul id="linkmenu"> <li class="n-home"><a href="#"><span>Home</span></a></li> <li class="n-bio"><a href="#"><span>Bio</span></a></li> <li class="n-media"><a href="#"><span>Media</span></a></li> <li class="n-contact"><a href="#"><span>Contact</span></a></li> <li class="n-reviews"><a href="#"><span>Reviews</span></a></li> <li class="n-tutorials"><a href="#"><span>Tutorials::</span></a></li> <li class="n-charts"><a href="#"><span>Charts::</span></a></li> <li class="n-links"><a href="#"><span>Links</span></a></li> </ul> </div> <div id="contentwrap"> <div id="content"> <h1>New Website Launched!</h1> <h2>10.01.2008</h2> Lorem ipsum debet tritani forensibus et nam, ex solet splendide mea, at cum menandri consetetur conclusionemque. Ocurreret persecuti eum at, intellegat temporibus cu sea. Tale modus mei cu, mucius offendit id mea, id consul urbanitas vis. Ius te alii deseruisse, at mea veri illum perfecto. Per iudico commodo blandit ea, mel eu illum sonet efficiantur, tota delenit splendide at qui.<br/><br/> No vel ridens labores percipitur. Ad eum homero percipitur. Sit stet vero ex. In nec volumus explicari.<br/><br/> Pro puto tempor cu, vix in populo doming legendos, ut has regione suavitate. Nec ea movet omnium assentior, ius solum feugiat no, ut est quem putant mollis. Eu simul suscipiantur has, equidem ornatus ea vel. Cu noluisse placerat nec, nostrum probatus eloquentiam cu sed. Lorem di**** et pri, magna ubique no sed, in solum decore quidam pro.<br/><br/> Ad blandit antiopam pri. Meliore necessitatibus et quo. Qui fabellas torquatos an. Id vel tantas recusabo, ex eos natum simul mentitum. Ea nostrud takimata iudicabit vel. <br/><br/> <h1>This is Only a Test</h1> <h2>10.01.2008</h2> Id sit minimum patrioque ullamcorper, vix prompta intellegat at. Mea vidisse admodum denique in, at eam graecis expetendis referrentur, ancillae prodesset ut eam. Meliore luptatum appellantur duo eu. Cu dicam invenire has, ex affert pertinacia vis, ut impetus mandamus sea. Pri nisl atomorum ex, nam te eripuit numquam docendi. <br/><br/> Est stet albucius maluisset id, et habeo graece molestie mel, adhuc nonumy eloquentiam ea vel. Ubique takimata persequeris ne his, pro an augue feugiat efficiendi, eu eam unum nominavi mediocritatem. Corpora disputando eloquentiam ex quo, cu prima choro salutandi his. Has eirmod regione accumsan eu. Cum ea wisi scripta, veritus assentior complectitur pro ea, mea cu aeterno vocibus eligendi. Ei eam maiorum perfecto. <br/><br/> Et eam eius nostro. In alienum definitiones nec, sed wisi mentitum incorrupte ea, ei per quando appetere. Eu dicta vitae ignota vel. Eu qui quot aperiri adipiscing, eu vim novum deleniti, quod kasd eu has. Copiosae incorrupte neglegentur mea cu, sit adolescens elaboraret constituam te, ea sea tamquam molestie definiebas. Rebum harum labore pro ex, ex soluta contentiones vix, no usu esse nominati mandamus. <br/><br/> Et pro aliquando expetendis theophrastus. Mei ne errem consequat, mei ut sonet singulis indoctum. Alia nihil civibus per ei. Ei sed mucius perfecto elaboraret, invidunt neglegentur ei mel, at vide tota quo. <br/><br/> <h1>New Site Coming Soon!</h1> <h2>09.29.2008</h2> Id placerat phaedrum per. Nec ut persius legimus conceptam, ius no ludus clita consul. At atomorum voluptatum cum, duo cibo putant reprimique ne. Ea mei hinc eros noluisse, ad sea ipsum di****, alii debet tamquam te nam. <br/><br/> Essent labores explicari cu duo. Ius causae copiosae an. Ex omnium diceret maluisset vim. Ad mel vivendo disputationi. Hendrerit democritum id cum, quodsi molestiae duo te. </div> <div id="rightbar"> <h2>THIS IS A TEST</h2> I am trying to see if I can get this column to align to the top of my browser content-wrapper div!<br/><br/> Unfortunately, I can't seem to get it to work!<br/> </div> </div> <div id="content-bottom"></div> <div id="footer"> Home - Bio - Media - Contact - Reviews - Tutorials - Charts - Links <br/> All information Copyright 2008 Tom Winchester unless otherwise specified. All original artists <br/> and labels retain their full respective rights and royalties to all copyrighted material. Mixes are presented <br/> for promotional purposes only. Duplication of any material in part or in whole without the <br/> express written consent of Tom Winchester is strictly prohibited. </div> </div> </div> </body> </html> Code: css
html, body {
margin: 0px;
padding: 0px;
background: url(../images/bgpattern.gif);
}
#entire-page {
}
#page-container {
margin: auto;
width: 750px;
}
#ghost {
height: 15px;
}
#header {
height: 110px;
background: url(../images/headers/rotator.php);
background-repeat: no-repeat;
}
#navigation {
width: 750px;
height: 40px;
background: url(../images/navigation.gif);
background-repeat: no-repeat;
}
ul#linkmenu, #linkmenu li {
padding: 0px;
margin: 0px;
list-style: none;
}
ul#linkmenu {
float: left;
height: 0;
}
#linkmenu li {
font-family: "Times New Roman", Times, Georgia, sans-serif;
position: relative;
width: 10px;
}
.n-home {
top: 7px;
left: 30px;
font-size: 22px;
}
.n-bio {
top: -18px;
left: 116px;
font-size: 22px;
}
.n-media {
top: -43px;
left: 179px;
font-size: 22px;
}
.n-contact {
top: -70px;
left: 271px;
font-size: 24px;
}
.n-reviews {
top: -95px;
left: 392px;
font-size: 22px;
}
.n-tutorials {
top: -120px;
left: 485px;
font-size: 22px;
}
.n-charts {
top: -145px;
left: 592px;
font-size: 22px;
}
.n-links {
top: -170px;
left: 678px;
font-size: 22px;
}
#linkmenu li a {
text-decoration: none;
background: none;
}
#linkmenu li a span {
visibility: hidden;
}
#contentwrap {
background-image: url(../images/contentbg.gif);
background-repeat: repeat-y;
width: 750px;
padding-top: 0px;
padding-left: 0px;
padding-right: 0px;
padding-bottom: 0px;
}
#content {
width: 495px;
padding-right: 245px;
padding-left: 10px;
padding-top: 0px;
padding-bottom: 0px;
font-family: "Trebuchet MS", Verdana, Helvetica, Arial, Times;
font-style: normal;
font-size: 12px;
color: #858585;
}
#rightbar {
float: right;
width: 225px;
margin-left: 505px;
margin-right: 10px;
background: gray;
text-align: center;
font-family: "Trebuchet MS", Verdana, Helvetica, Arial, Times;
font-style: normal;
font-size: 12px;
color: #000000;
}
#content-bottom {
height: 5px;
background-image: url(../images/contentbgbottom.gif);
background-repeat: no-repeat;
}
#footer {
height: 80px;
padding: 5px;
text-align: center;
font-family: "Trebuchet MS", Verdana, Helvetica, Arial, Times;
font-style: normal;
font-size: 11px;
color: #cfcfcf;
}
h1 {
margin-top: 0px;
margin-bottom: 0px;
font-family: "Trebuchet MS", Verdana, Helvetica, Arial, Times;
font-size: 24px;
font-weight: 200;
color: #1c2939;
}
h2 {
margin-top: 0px;
margin-bottom: 7px;
font-family: "Trebuchet MS", Verdana, Helvetica, Arial, Times;
font-size: 12px;
font-weight: 200;
color: #c49271;
}
THANK YOU!!!! -Tom Winchester- Hey all, I have been working on a site in CSS which looks pretty much how we want it to look in FF, however IE is giving me all sorts of problems. If you look at the following page http://www.mobileshop.com/3phones.com/viewphone.php in firefox you can see that the middle (white) column rests nicely between the two side columns, however, if you change to IE and look at the very same page then the middle column drops below the left side column. This is my first time at a css design and i cant work out why it is doing it, also the main logo is supposed to be centered, in IE it is left aligned. If you are viewing the source, you will see a tag soup of tables in the middle of the nice CSS, this is due to the fact that we pick up a feed and it dumps the data into our page. This will change to be pure CSS but i am running out of time to get the site launched first. One final question, i downloaded the Tidy HTML validator for firefox. I managed to get my pages passed the W3c online checker, but tidy claimed there was still errors. I went through and fixed all them to get a happy green tick but then when going back to W3C validation some things failed. I was under the impression that Tidy was developed by W3C, so why do they give varying results regarding validation? Thank you for your time. Hello, I have two columns, one is on the left and another in the middle (center). Left column is where I want it to be, central column is also aligned properly, however, it is below left column. I want it to be on the same level as left. See here see how it got below ? It is XHTML validated and CSS is fine too (some background color warnings). Plz help me to make central column go up. Thanks. hello community... i would like to humble ask for anyone's help on this one... i need to add a right column to this template to make it a 3 column joomla template. but since i dont know css, i really dont know what to do. please help me. i have privided the code below. Here is the index.php Code:
<?php
/**
* @copyright Copyright (C) 2005 - 2008 Open Source Matters. All rights reserved.
* @license GNU/GPL, see LICENSE.php
* Joomla! is free software. This version may have been modified pursuant
* to the GNU General Public License, and as distributed it includes or
* is derivative of works licensed under the GNU General Public License or
* other free or open source software licenses.
* See COPYRIGHT.php for copyright notices and details.
*/
defined('_JEXEC') or die('Restricted access');
?>
<?php echo '<?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="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" dir="<?php echo $this->direction; ?>" >
<head>
<jdoc:include type="head" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/getirshelp/css/layout.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/getirshelp/css/template.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/getirshelp/css/joomla.css" type="text/css" />
<!--[if lte IE 6]>
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/getirshelp/css/template_ie6.css" type="text/css" />
<![endif]-->
<!-- Flow Player Start -->
<script type="text/javascript" src="flowplayer/flowplayer-3.0.6.min.js"></script>
<!-- Flow Player End -->
<meta name="verify-v1" content="18/oD5mtAqJSklIsjK/k6NWXMxJ6ZNJMyoGRkIl3Md8=" />
</head>
<body id="template-body">
<div id="header">
<div id="top"><jdoc:include type="modules" name="top" /></div>
<div id="contact"><jdoc:include type="modules" name="user6" /></div>
</div>
<div id="mainnav">
<div id="blog">
<a href="irsblog/index.php">Blog</a>
</div>
<jdoc:include type="modules" name="user3" />
</div>
<div class="clear"></div>
<div id="mainbody">
<div id="mainbody2">
<div id="sidebar">
<div class="inside">
<jdoc:include type="modules" name="left" style="xhtml" />
</div>
</div>
<div id="sidebar2">
<div class="inside">
<jdoc:include type="modules" name="right" style="xhtml" />
</div>
<div id="maincontent">
<div class="inside">
<?php if ($this->getBuffer('message')) : ?>
<?php endif; ?>
<jdoc:include type="component" />
</div>
</div>
</div>
<div class="clear"></div>
<div id="mainbottom-wrapper">
<div id="mainbottom">
<?php if( $this->countModules('user1') ): ?>
<div class="mainbottom-box" id="box-1">
<jdoc:include type="modules" name="user1" style="xhtml" />
</div>
<?php endif; ?>
<?php if( $this->countModules('user2') ): ?>
<div class="mainbottom-box" id="box-2" >
<jdoc:include type="modules" name="user2" style="xhtml" />
</div>
<?php endif; ?>
<?php if( $this->countModules('user4') ): ?>
<div class="mainbottom-box" id="box-3">
<jdoc:include type="modules" name="user4" style="xhtml" />
</div>
<?php endif; ?>
<?php if( $this->countModules('user5') ): ?>
<div class="mainbottom-box" id="box-4">
<jdoc:include type="modules" name="user5" style="xhtml" />
</div>
<?php endif; ?>
<div class="clear"></div>
</div>
</div>
<div id="footer">
<jdoc:include type="modules" name="footer" />
</div>
</div>
</div>
<div id="bottom">
<div class="left">
<?php echo JText::_("100 S. EDISON AVE., STE. A TAMPA, FL 33606"); ?><br />
<?php echo JText::_("PHONE: (813) 229-7100 TOLL FREE: (888) 438-6474 FAX: (813) 251-9605"); ?>
</div>
<div class="right">
<?php echo JText::_("© 2000-2009 Law Offices of Darrin T. Mish, P.A"); ?>
</div>
<div class="clear"></div>
</div>
<script src="http://24520.hittail.com/mlt.js"; type="text/javascript"></script>
</body>
</html>
here is the layout.css Code:
#header {
background: transparent url('../images/bg-header.jpg') no-repeat scroll 0 0;
height: 149px;
width: 990px;
margin: 0 auto;
}
#mainnav {
height: 46px;
width: 990px;
margin: 0 auto;
}
#mainbody {
background: url('../images/bg-mainbody.png') repeat-y scroll 0 0;
width: 1010px;
margin: 0 auto;
}
#mainbody2 {
background: url('../images/bg-mainbody2.png') no-repeat scroll 0 0;
}
#sidebar {
background: #FFFFFF url('../images/bg-sidebar.png') repeat-x scroll 0 0;
color: #000000;
width: 223px;
min-height: 700px;
margin-left: 15px;
float: left;
}
#sidebar2 {
background: #FFFFFF url('../images/bg-sidebar.png') repeat-x scroll 0 0;
color: #000000;
width: 250px;
min-height: 700px;
margin-right: 15px;
float: right;
}
#maincontent {
width: 500px;
float: right;
margin-right: 15px;
}
#mainbottom-wrapper {
border-top: 0px dotted #000;
margin-top: 50px;
margin: 0 15px;
}
#mainbottom {
background: none #EFEFEF no-repeat scroll 0 0;
min-height: 192px;
margin: 10px 0;
padding: 0 10px;
clear: both;
color: #000000;
}
#footer {
background: #0B60B7 url('../images/bg-footer.png') no-repeat scroll 0 0;
text-align: center;
color: #FFFFFF;
padding: 10px 0;
margin: 0 11px;
}
#bottom {
background: #FFFFFF url('../images/bg-bottom.png') no-repeat scroll 0 0;
margin: 10px 0 20px 0;
width: 1010px;
margin: 0 auto;
padding: 10px 0;
}
and here is the template.css Code:
/* @important */
* { margin:0; padding:0; }
body {
background: #FFFFFF url('../images/bg.png') repeat-x scroll center top;
font: 78% Arial,Tahoma,Verdana;
color: #000000;
}
h1,h2,h3 {
margin: 0 0 10px 0;
}
h1, .componentheading { font-size: 1.5em; }
h2, .contentheading { font-size: 1.2em; text-align:center; }
h3 { font-size: 1.167em; }
ul {
margin: 10px 0 10px 0;
padding: 0 0 0 35px;
}
li{}
a {
text-decoration: underline;
color: #666666;
}
p {
margin: 0 0 15px 0;
line-height: 20px;
}
img {
border: none;
}
fieldset {
border: none;
}
.clear{
clear: both;
}
.inside {
padding: 5px;
}
.left {
float: left;
}
.right {
float: right;
}
/* Header Style */
#top {
height: 35px;
text-align: right;
color: #FFFFFF;
}
#contact {
float: right;
width: 300px;
min-height: 80px;
padding-right: 5px;
color: #000000;
}
/* Mainnav Style*/
#mainnav ul {
float: right;
list-style-type: none;
padding: 0;
margin: 0 auto;
}
#mainnav ul li {
background: url('../images/bg-menu.png') no-repeat scroll right center;
display: inline;
float: left;
height: 46px;
padding: 0 10px;
}
#mainnav ul li a {
color: #FFFFFF;
display: block;
float: left;
font-family: times new roman;
font-size: 1.2em;
font-weight: bold;
line-height: normal;
margin-top: 12px;
text-decoration: none;
text-transform: uppercase;
}
/* Blog Button */
#blog {
float: right;
margin: 10px 15px 0 120px;
padding: 0;
width: 60px;
}
#blog a {
background: #F2A31E;
color: #FFFFFF;
display: block;
font-family: times new roman;
font-size: 1.2em;
font-weight: bold;
text-decoration: none;
text-transform: uppercase;
text-align: center;
padding: 3px 0;
}
/* Advert Style */
#advert-wrapper {
border-bottom: 0px dotted #000;
padding: 0 0 10px 0;
}
.advert-box {
min-height: 239px;
width: 367px;
}
/* Sidebar Style */
#sidebar ul {
list-style-position: inside;
margin: 0;
padding: 0;
}
#sidebar ul li {
padding: 5px;
border-bottom: 1px dotted #B9B9B9;
list-style-image: url('../images/bullet.png');
}
#sidebar ul li a {
color: #000000;
text-decoration: none;
}
#sidebar .moduletable, #sidebar .moduletable_menu{
margin: 0 0 15px 0;
}
/* Sidebar-c Style */
#sidebar-c ul {
list-style-position: inside;
margin: 0;
padding: 0;
}
#sidebar-c ul li {
padding: 5px;
border-bottom: 1px dotted #B9B9B9;
list-style-image: url('../images/bullet.png');
}
#sidebar-c ul li a {
color: #000000;
text-decoration: none;
}
#sidebar-c .moduletable, #sidebar .moduletable_menu{
margin: 0 0 15px 0;
}
/* Main Content Style */
#maincontent img {
padding: 5px;
}
/* Main Bottom Style */
.mainbottom-box {
float: left;
width: 228px;
min-height: 166px;
padding: 10px 5px;
margin: 10px 0;
}
.mainbottom-box ul {
list-style-image: url('../images/bullet.png');
}
.mainbottom-box ul li {}
.mainbottom-box ul li a {
text-decoration: none;
color: #000000;
}
#box-2,#box-3,#box-4 {
border-left: 1px dotted #B9B9B9;
}
/*Footer Style */
#footer a {
color: #FFFFFF;
}
/* Bottom Style */
#bottom .right, #bottom .left {
font-size: 0.833em;
}
#bottom .right {
width: 157px;
}
#bottom .left {
padding-left: 15px;
}
i would really appreciate it if anyone can help... thankks a whole lot!! http://zeroonedesign.com/beyond%2Dmap/www/ Take a look at it first in Firefox, and then in IE. As you can see IE seems unable to understand what display:inline means, or perhaps its interpreting the pixel values I set differently. I have tried a whole pile of different things. I've tried taking out the containing <div style="relative> and it makes no difference. I've tried setting everything static with no sizes but then it all collapses. I am THIS close to moving to a table based layout... sometimes CSS is just so frustrating. Can anyone spot something I'm just missing? Many thanks Hello, I have created a three column html layout with header and footer using liquid CSS format. The problem is, if either any one of the columns (left , middle or right column) increases in length, the others don't grow accordingly. Please let me know how to do it. I didn't post the actual code as it is long. However I could post it if needed. Thanks I am having problems trying to set up a 2 columns inside an existing 2 column layout. The reason why I am doing it that way is because the 2 col layout is part of a template and most pages will be 2 col, but for some there is actually 3 columns, so I need to split the mainColumn into 2 columns. The problem is they are not showing up side by side. If I do display: inline; everything within the id displays that way and that is a problem. So here is what I am trying to accomplish Here is the css: Code: /*Main Section two columns under top section*/
#wrapper{
padding: 10px 10px 10px 0px;
width: 100%;
height: 100%;
}
#sideColumn {
float:left;
width:155px;
height: 78%;
background-color: #5094F9;
padding-top: 50px;
padding-left:10px;
padding-bottom:10px;
pading-right: 10px;
margin-right: 10px;
text-align: left;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
color: #FFFFFF;
font-weight: bold;
line-height: 20px;
}
.category {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
color: #FFFFFF;
font-size: 16px;
font-weight: bold;
letter-spacing: 5px;
}
#sideColumn a:link, #sideColumn a:visited {
background-color: transparent;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
text-decoration: none;
color: #FFFFFF;
font-size: 12px;
font-weight: bold;
}
#sideColumn a:hover, #sideColumn a:active {
background-color: #FFFFFF;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
text-decoration: none;
color: #5094F9;
font-size: 12px;
font-weight: bold;
}
#sideColumn ul {
list-style: none;
padding: 15px 0px 15px 10px;
margin: 0px;
}
#mainColumn {
padding: 0px;
}
/*customer support*/
#csupportWrapper {
padding: 90px 20px auto 185px;
text-align: left;
}
#csupportWrapper span {
color: #000099;
font-weight: bold;
}
#csupportWrapper .large {
margins: 40px auto 20px auto;
}
#csupportWrapper ul {
list-style: none;
padding: 10px 0px 0px 10px;
margin: 0px;
}
#csupportWrapper a:link, #csupportWrapper a:visited {
background-color: transparent;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
color: #5094F9;
font-size: 12px;
font-weight: bold;
}
#csupportWrapper a:hover, #csupportWrapper a:active {
background-color: transparent;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
color: #990099;
font-size: 12px;
font-weight: bold;
}
#column1 {
padding: 40px 10px 0px 185px;
clear: none;
}
#column2 {
padding: 40px 0px 0px 382px;
clear: none;
}
Thanks! Here is the xhtml starting after the heading part (I can add it too if needed): Code: <!--begin wrapper-->
<div id="wrapper">
<!--begin side column -->
<div id="sideColumn">
<span class="category">Products</span>
<ul>
<li><a href="../products/spirometers.html">Spirometers</a></li>
<li><a href="../products/clinical_trials.html">Clinical Trials</a></li>
<li><a href="../products/asthma_copd.html">Asthma & COPD</a></li>
<li><a href="../products/smoking_cessation.html">Smoking Cessation</a></li>
<li><a href="../products/resuscitaion.html">Resuscitation</a></li>
</ul>
<span class="category">Resources</span>
<ul>
<li><a href="customer_support.html">Customer Support</a></li>
<li><a href="training_services.html">Training & Services</a></li>
<li><a href="exhibitions.html">Exhibitions</a></li>
<li><a href="newsletters.html">Newsletters</a></li>
<li><a href="downloads.html">Downloads</a></li>
<li><a href="useful_links.html">Useful Links</a></li>
<li><a href="industry_information.html">Industry Information</a></li>
<li><a href="industry_information.html">Sitemap</a></li>
</ul>
</div>
<!--end of side column -->
<!--begin main column -->
<div id="mainColumn">
<!-- InstanceBeginEditable name="Main_Section" -->
<div id="csupportWrapper">
<div id="column1">
<span class="large">Customer Support</span>
<ul>
<li>Vitalograph Ltd</li>
<li>Maids Morton, Buckingham</li>
<li>MK18 1SW</li>
<li>England</li>
</ul>
<ul>
<li><span>Phone:</span> +44(0) 1280 827110</li>
<li><span>Fax</span>: +44(0) 1280 823302</li>
</ul>
<ul>
<li><span>Email: </span> <a href="mailto:sales@vitalograph.co.uk">sales@vitalograph.co.uk </a></li>
<li><a href="/enquiry_forms/customer_support_form.htm">On-Line Enquiry Form</a></li>
</ul>
</div>
<div id="column2">
<span class="large">Technical Support</span>
<ul>
<li>Vitalograph Ltd</li>
<li>Maids Morton, Buckingham</li>
<li>MK18 1SW</li>
<li>England</li>
</ul>
<ul>
<li><span>Phone:</span> +44(0) 1280 827110</li>
<li><span>Fax</span>: +44(0) 1280 823302</li>
</ul>
<ul>
<li><span>Email: </span> <a href="mailto:techsupport@vitalograph.co.uk">techsupport@vitalograph.co.uk </a></li>
<li><a href="/enquiry_forms/technical_support_form.htm">On-Line Enquiry Form</a></li>
</ul>
</div>
</div>
<!-- InstanceEndEditable -->
</div>
<!--end of main column -->
</div>
<!--end of wrapper-->
how can i use: css Code: Original - css Code .t {background: url(../images/dot.gif) 0 0 repeat-x; width: 20em; width:80%; left:50%; margin:20px; } .b {background: url(../images/dot.gif) 0 100% repeat-x} .l {background: url(../images/dot.gif) 0 0 repeat-y} .r {background: url(../images/dot.gif) 100% 0 repeat-y} .bl {background: url(../images/bl.gif) 0 100% no-repeat} .br {background: url(../images/br.gif) 100% 100% no-repeat} .tl {background: url(../images/tl.gif) 0 0 no-repeat} .tr {background: url(../images/tr.gif) 100% 0 no-repeat; padding:5px; } .t-exif {background: url(../images/dot.gif) 0 0 repeat-x; width: 20em; width:200px; right:0px;} .b-exif {background: url(../images/dot.gif) 0 100% repeat-x} .l-exif {background: url(../images/dot.gif) 0 0 repeat-y} .r-exif {background: url(../images/dot.gif) 100% 0 repeat-y} .bl-exif {background: url(../images/bl.gif) 0 100% no-repeat} .br-exif {background: url(../images/br.gif) 100% 100% no-repeat} .tl-exif {background: url(../images/tl.gif) 0 0 no-repeat} .tr-exif {background: url(../images/tr.gif) 100% 0 no-repeat; padding:10px; }
.t {background: url(../images/dot.gif) 0 0 repeat-x; width: 20em; width:80%; left:50%; margin:20px; }
to make my exif info box appear on the right of the image? i have tried using right:0px but it doesn't work, any ideas? current display page Hello everyone, I have a web application wich i would really like to convert to css style. I have been struggling with this for almost 2 days now and i am getting nowhere... I did manage to make a few 'usable' css based on various template/book but they are either corrupted in mozilla or ie... and thus not usable in a production environment. Basicly here what i need: 1. header div located at the top of the page 2. menu div located just bellow the header div (25height) 3. left div located bellow the header/menu div (160width) 4. content div located at the right of the left div (max available width) 5. footer div located at the bottom of the page. (height 25) 6. A vertical scrollbar allowing the user to scroll the page. if possible, this scrollbar should be located between the header and footer only (that mean it will allow the user the scroll the left/content while the header/footer stay in the window), kinda like a traditional frame'd layout. My site is dynamic and the content located at the left (the left div) can be completly disabled by the user. So if the left div is missing, the content div should automaticly adjust is width. I dont want any vertical scrollbar on that site, it should auto-adjust itself. I hope i have been clear. In case i have not, here is a screenshoot of a layout that is similar to the one i would like to have. Example of what i want ! What i need is an experienced web dev who can do this for me. Since i know nothing in life if free i will reward this person with ANY book he want, with a maximum of 5. Here a few examples of what i can provide: Cascading Style Sheets: The Definitive Guide 2nd edition http://www.oreilly.com/catalog/css2/ HTML & XHTML: The Definitive Guide, 5th Edition http://www.oreilly.com/catalog/html5/ JavaScript & DHTML Cookbook http://www.oreilly.com/catalog/jvdhtmlckbk/ CSS Cookbook http://www.oreilly.com/catalog/cssckbk/index.html I have over 17,000 (250+ oreilly, 400+ mspress, etc...) on various subject, so if you have a specific title in mind, you can almost bet that i have it Anyone ready to take the 'job' can add me to is msn, my address if paologoarex@hotmail.com. I think this would take something like 1hour for an experienced web dev while for me it woud take days (if not weeks) ! Dont blame me for being lazy, i did gave it a try ! but since i am more a coder than a web dev, its very hard for me to grasb all the little tweak of css contact me if you are interested. I have the terrible feeling that I will not be able to explain this properly but I will try my best. It's simple enough to make a layout with colloms using css, just by floating two or three divs, but what if I wanted to make multiple collums out of one bit of text? Kind of like when your writing in a word processer that you've set to use two colums, when your writing fills up the first it just goes strait into the second. I'm not so CSS savvy, can anyone help me with the specific changes needed here that will force the 3 columns to load height at 100% or full column height? Also is it possible to have multiple content boxes loading one above the other in the left and right columns instead of one long content box? jarsandmixes.com/liquid.php body { background-color: #FFF7EF; } div { text-align:center; } div#wrapper { background-color: transparent; border:0px solid black; margin:0px auto; text-align:left; position:relative; width:100%; height:100%; min-height:100%; } div#border { background-image: url(images/bkg2.gif); background-repeat: repeat; border-top: 1px solid #000000; border-bottom: 1px solid #000000; border-left: 1px solid #000000; border-right: 1px solid #000000; width:100%; height:10px; } div#page { background-color: #DEC6B5; border:1px dashed black; position:relative; clear:both; float:left; width:100%; height:100%; min-height:100%; padding-bottom: 10px; overflow:hidden; } div#header { background-image: url(images/.gif); background-repeat: no-repeat; border:1px dashed black; margin:0px; padding:0px; width:100%; height:80px; } div#menu { clear: both; background-color: #CA7B93; border-top: 1px solid #000000; border-bottom: 1px solid #000000; border-left: 1px solid #000000; border-right: 1px solid #000000; width:100%; height:30px; } div#left1 { background-image: url(images/bkg2.gif); background-repeat: repeat; border:1px solid black; float:left; margin:5px; width:20%; height:auto; } div#left2 { background-color: #FFF7EF; background-image: url(images/bkg3.gif); background-repeat: repeat; border:1px solid black; margin:0px 5px 0px 5px; padding:4px; right:20px; width:90%; height:auto; } div#content1 { background-image: url(images/bkg2.gif); background-repeat: repeat; border:1px solid black; margin:5px auto; width:54%; height:auto; } div#content2 { background-color: #DEC6B5; background-image: url(images/bkg3.gif); border:1px solid black; margin:0px 5px 0px 5px; padding:4px; width:96%; height:auto; } div#divider { background-image: url(images/.gif); background-repeat: no-repeat; margin:10px auto; width:439px; height:60px } div#right1 { background-image: url(images/bkg2.gif); background-repeat: repeat; float:right; border:1px solid black; margin:5px; right:10px; width:20%; height:auto; } div#right2 { background-color: #FFF7EF; background-image: url(images/bkg3.gif); background-repeat: repeat; border:1px solid black; margin:0px 5px 0px 5px; padding:4px; right:20px; width:90%; height:auto; } div#footer { clear: both; border-top: 1px solid #000000; border-bottom: 1px solid #000000; border-left: 1px solid #000000; border-right: 1px solid #000000; width:100%; height:30px; } Hi I am trying to make a table to display some stuff within a fix sized window. I want to have 5 columns of fixed width and one column that spans the rest of the remaining space. The Idea is to allow the widths of the first 5 columns to be changed by a script and having the last one adapting as needed... html Code: Original - html Code <div class="container"><table cellspacing="0"> <colgroup> <col width="40" /> <col width="220" /> <col width="120" /> <col width="65" /> <col width="40" /> </colgroup> <thead> <tr> <th>A</th> <th>B</th> <th>C</th> <th>D</th> <th>E</th> <th style="width: 100%;></th> </tr> </thead> <tbody> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> <td style="width: 100%;></td> </tr> </tbody> </table></div> <div class="container"><table cellspacing="0"> <colgroup> <col width="40" /> <col width="220" /> <col width="120" /> <col width="65" /> <col width="40" /> </colgroup> <thead> <tr> <th>A</th> <th>B</th> <th>C</th> <th>D</th> <th>E</th> <th style="width: 100%;></th> </tr> </thead> <tbody> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> <td style="width: 100%;></td> </tr> </tbody> </table></div> css Code: Original - css Code div.container { height: 400px; width: 800px; overflow: scroll; } table { width: 100%; } td { border-style: solid; border-color: silver; border-width: 0px; padding: 1px 3px; } th { border-style: outset; border-color: silver; border-width: 2px; background: silver; padding: 1px 3px; }
It really does fill the entire space but the last column crushes all the other into their minimal width resulting in linebreaks between words inside the cells... Please help me Hi all, I've tried searching around for this issue, but I've not found any help so far and it's driving me nuts. I hope someone here can advise. This is an abridged version of the site's code for example: Code: <style type="text/css">
<!--
#main1 {
padding: 0px;
margin: 0px;
}
#left {
width:260px;
margin:0;
padding:0;
float: left;
}
#left-top {
background-image: url(../images/panel-top-left.gif);
background-repeat: no-repeat;
background-position: center top;
height: 16px;
margin: 0px;
padding: 0px;
}
#left-middle {
background-image: url(../images/panel-middle-left.gif);
background-repeat: repeat-y;
padding-right: 20px;
padding-left: 20px;
padding-bottom: 2px;
}
#left-bottom {
background-image: url(../images/panel-bottom-left.gif);
background-position: center;
height: 18px;
}
#logo {
background-image: url(../images/swalingslogo.gif);
background-position: center top;
width: 260px;
height: 120px;
background-repeat: no-repeat;
}
/* Navigation List */
#navlist
{
padding-left: 0;
margin-bottom:10px;
width: 217px;
}
#navlist li
{
list-style: none;
margin-bottom:4px;
padding: 0;
font-size:1.2em;
line-height:1.8em;
width:217px;
height:32px;
background-image:url(../images/nav2.gif);
background-repeat:no-repeat;
margin-top: 0;
margin-right: 0;
margin-left: 0;
}
#navlist li a:link, #navlist li a:visited {
display:block;
text-decoration: none;
color:#039;
width:207px;
height:32px;
font-weight:bold;
padding-top: 2px;
padding-right: 5px;
padding-bottom: 2px;
padding-left: 5px;
}
#navlist li a:hover {
text-decoration: none;
color:#FF6600;
}
/* Testimonials */
div#fscroller {
width:200px;
height:200px;
background-image:url(../images/bg-testimonials.gif);
background-repeat:no-repeat;
margin-left:8px;
}
div#fscroller p {
margin-left: 10px;
margin-right: 10px;
margin-top: 10px;
margin-bottom: 5px;
}
/* Middle Column */
#middle {
margin-top: 0;
margin-right: 0px;
margin-bottom: 0;
padding-right: 0px;
padding-left: 0px;
padding-top: 0px;
text-align: justify;
margin-left: 260px;
}
#middle #top-left {
background-image: url(../images/panel-top-rightleft.gif);
height: 16px;
font-size: 2px;
background-repeat: no-repeat;
}
#middle #top-right {
float: right;
margin-top: -16px;
background-image: url(../images/panel-top-rightright.gif);
height: 16px;
width: 20px;
font-size: 2px;
}
#middle a {
color: #003399;
}
#middle a:hover {
text-decoration: none;
}
/** Country Titles **/
#middle h2#unitedkingdom {
background-image: url(../images/title-unitedkingdom.gif);
background-repeat: no-repeat;
height: 26px;
width: 201px;
margin-bottom: 6px;
}
#middle h2#antigua {
background-image: url(../images/title-antigua.gif);
background-repeat: no-repeat;
height: 26px;
width: 128px;
margin-top: 16px;
margin-bottom: 6px;
}
/* Minisite Links */
div.minisite {
float: left;
}
div.minisite span {
display: none;
}
div.minisite a {
background-position: top;
background-repeat: no-repeat;
height: 168px;
width: 190px;
display: block;
}
div.minisite a:hover {
background-position: bottom;
}
a#minisite-swimminglessons {
background-image: url(../images/swimming-lessons-uk.jpg);
}
.clear {
clear:both;
}
.hidden {
display: none;
}
.notopgap {
margin-top: 0;
}
.nobottomgap {
margin-bottom: 0;
}
.inside {
background: #EFEFEF;
padding-left: 10px;
padding-right: 10px;
}
-->
</style>
<div id="main1">
<div id="left">
<!-- Logo -->
<div id="logo"></div>
<div id="left-top"></div>
<div id="left-middle">
<!-- Navigation -->
<!--#include file="../inc/nav2.asp" -->
<!-- Testimonials -->
<!--#include file="../inc/testimonials.asp" -->
<!--#include file="../inc/special-offers.asp" -->
</div>
<div id="left-bottom"></div>
</div>
<!-- Middle Column -->
<a name="skipnav" class="hidden"></a>
<div id="middle">
<div class="top-left"></div><div class="top-right"></div>
<div class="insideleft"><div class="insideright"><div class="inside"><div class="gap-saver"></div>
<!-- UK Sites -->
<h2 id="unitedkingdom"><span class="hidden">United Kingdom</span></h2>
<div class="minisite"><a id="minisite-swimminglessons" href="(URL address blocked: See forum rules)"><span>Swimming Lessons</span></a></div>
<div class="minisite"><a id="minisite-swimminglessons" href="(URL address blocked: See forum rules)"><span>Swalings Training</span></a></div>
<div class="minisite"><a id="minisite-swimminglessons" href="(URL address blocked: See forum rules)"><span>Swalings Residential Courses</span></a></div>
<div class="clear"></div>
<!-- Antigua Sites -->
<h2 id="antigua"><span class="hidden">Antigua</span></h2>
<div class="minisite"><a id="minisite-swimminglessons" href="(URL address blocked: See forum rules)"><span>Swalings Soccer</span></a></div>
<div class="minisite"><a id="minisite-swimminglessons" href="(URL address blocked: See forum rules)"><span>Swalings Parties and Events</span></a></div>
<div class="minisite"><a id="minisite-swimminglessons" href="(URL address blocked: See forum rules)"><span>Swalings International School of Swimming</span></a></div>
<div class="minisite"><a id="minisite-swimminglessons" href="(URL address blocked: See forum rules)"><span>Swalings Babysitting and Nanny Agency</span></a></div>
<div class="minisite"><a id="minisite-swimminglessons" href="(URL address blocked: See forum rules)"><span>Swalings School of Rugby</span></a></div>
<div class="minisite"><a id="minisite-swimminglessons" href="(URL address blocked: See forum rules)"><span>Swalings School of Volleyball</span></a></div>
<div class="minisite"><a id="minisite-swimminglessons" href="(URL address blocked: See forum rules)"><span>Swalings Training</span></a></div>
<div class="clear"></div>
<div class="gap-saver"></div>
</div></div></div>
<div class="bottom-left"></div><div class="bottom-right"></div>
</div>
<!-- End Middle Column -->
</div>
I've placed the Country Title in an H2 tag, then beneath that, each anchor is enclosed in a DIV, and is set as a left-floated block. Then I placed a spacer DIV (clear: both) to create a new line, then repeated with H2 and links. This all works fine in Firefox, IE7 and Opera, but of course IE6 is being a pig as usual. The spacer DIV is pushed to sit alongside the bottom of the left column, and I can't figure out how to (or if I can) stop this. I can't add in links properly, so I hope this is acceptable under the rules -- The site in question is: www.swalings .com/swalings/index4.asp and here's a screenshot of IE6 behaviour: www.swalings .com/images/swalings-ie6-troubleshoot.jpg Hopefully that's enough information to go on, please let me know if there's something I missed out. Thanks a lot! Rob Question title: A 2 column layout, let only the second column scroll horizontally and let them both scroll vertically Hello I did try several idea's, but all failed. Then I did search the web but found a list of > 400.000 in google. If someone is willing to tell me if it is possible and give me some directions, please do. Everything is welcome. I got a list with 3 columns ( basically you could say I have only two columns because 2-3 could be concatenated to together, but they have a different style and justification, but I could live to start with a two column sample) f.e line 1 : value_one - ( some_text - value_two (right justified) ) line 2 : value_one - ( some_text - value_two (right justified) ) line 99:.... e.t.c Column one has a fixed width of 32px. 'some text' can be longer then the wide available and value_two is with 3 spaces appended to column 2. I want that column one is fixed horizontal and that the second and the third column can scroll horizontally. Of course when there are more line's then the height of the container is should be posable to scroll vertically. Finally I need the color behind column one be different then the column 2 and 3. So what I did create is a container with two containers where the left one has a different colour then the right one and above those a container with the list. I have overflow on auto, so I get scroll-bars when necessarily. But my problem is that when I scroll horizontally that my first column scrolls away to the left. Basically my question is. How can I get a 2 column layout, let only the second column scroll horizontally ( first is locked in horizontal place ) and let them scroll both vertically? Hey, So I have a three column layout being implemented as such: html: Code:
<div class="content">
<div class="col1 column"></div>
<div class="col3 column"></div>
<div class="col2 column">
<div class="header">Header</div>
</div>
</div>
CSS: Code:
.column {
padding: 10px;
position:relative;
}
.header {
background:#cfe6f5;
color:#416383;
font-size:11px;
font-family:Arial;
font-weight:300;
padding-left:15px;
}
.col1 {
float: left;
width:250px;
}
.col2 {
margin-left: auto;
margin-right: auto;
}
.col3 {
float:right;
width:250px;
}
The problem is that the width of the header div extends all the way to the left and right of the page when it's in the middle column, but behaves the way I want it to (extends to the left and right of the column) when it's in the left or right column. Any ideas? Thanks. --Surgery Hello, I am having difficulty with the center column on the following page: http://cbo4edu.org/index2.html I want to widen the center column so that the CBO NEWS heading touches the blue line which divides the center and right column. When I try to add width to the style sheet the left column moves out of alignment. Any help is much appreciated, thanks! can i make my left column, the same height as my right column? or infact, if the left is taller than the right, the right extends to it and if the right is taller than the left the left extends to it? is this possible, cheers heres my css: left column, is #leftNav and the right column is #contentMain PHP Code: #content { margin:0px auto; padding: 0; width: 760px; } #contentMain { padding: 0; margin: 0; float: right; width: 632px; } #leftNav { color: #000; float: left; margin: 0; padding: 0; width: 128px; } Hi, hopefully you enjoyed the title, I had a good laugh thinking of it in that split second it took me to write it. So, I found a 3 column css layout on a CSS generator website, because I got sick of trying to hack up layouts I've made in the past that didn't work. Anyhow, it was working fine with one line of content in each column when I tested it out, however, once content in the middle column was added, and stretched vertically beyond a certain point, it will drag the left columns content down with it. The right column is not affected in any way. I have spent a few hours trying to look for reasons as to why it would happen, but I had no luck. I would appreciate any help... so thank you in advance if you take a stab at it. Here's the html: Code: <body> <div id="pagewidth"> <div id="header"></div> <div id="wrapper" class="clearfix" > <div id="twocols" class="clearfix"> <div id="maincol">Main Text, woot. (aka hi hi hi)</div> <div id="rightcol">Sidebar, yippee.</div> </div> <div id="leftcol"> <div id="navigation">test</div> </div> </div> <div id="footer"></div> </div> </body> and the CSS: Code: html, body
{
background: #333399;
margin:0;
padding:0;
text-align:center;
font-family: Verdana, Arial, Tahoma;
font-size: 12px;
font-weight: normal;
color: black;
}
#pagewidth
{
width: 750px;
text-align:left;
margin-left:auto;
margin-right:auto;
background: #333399 url('images/bodycontent.gif') repeat-y center top;
}
#header
{
position:relative;
height:138px;
background: url('images/header.gif') center;
width: 100%;
}
#leftcol
{
width: 118px;
float: left;
left: 25px;
position: relative;
background-color: transparent;
margin:0; padding:0;
}
#twocols
{
width: 700px;
float: right;
position: relative;
}
#rightcol
{
width:180px;
right: 25px;
float:right;
position:relative;
background-color: transparent;
}
#maincol
{
background-color: transparent;
float: left;
left: 100px;
display: inline;
position: relative;
width: 390px;
}
#footer
{
text-align: center;
height:39px;
background: url('images/footer.gif');
clear:both;
}
.clearfix:after
{
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix{display: inline-table;}
/* Hides from IE-mac \*/
* html .clearfix{height: 1%;}
.clearfix{display: block;}
/* End hide from IE-mac */
/*printer styles*/
@media print{
/*hide the left column when printing*/
#leftcol{display:none;}
/*hide the right column when printing*/
#rightcol{display:none;}
#twocols, #maincol{width:100%; float:none;}
}
Again, thank you in advance if you can come up with anything. I am a HTML&CSS novice - I am trying to write a page using a three column layout but the column colour doesn't reach the footer. I understand that this is a common problem and I've looked at a lot of examples on the web of how to work around this or create a better layout but I'm still not sure enough to know which would be the easiest and best to go within the page I have written. I want to avoid images but other than that any help would be great! I have validated the HTML & CSS and they are copied below (could any advice be really specific, as I said this is very new to me!). Thanks HTML: <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Drivers Jonas Information Unit</title> <meta name="keywords" content="1" /> <link rel="stylesheet" type="text/css" href="djiucss.css" media="screen" /> <link rel="stylesheet" type="text/css" href="djiuprintcss.css" media="print" /> </head> <body> <div id="top"> <div id="picture"> <img src="GIF.gif" alt="DJ" width="200" height="100" /> </div> <div id="heading"> <div id="title"><h1>Drivers Jonas Information Unit</h1></div> </div> </div> <div id="left"> <br/><p><a href="about.html">About us</a></p><br/> <p><a href="company.html">Company Information</a></p><br/> <p><a href="legal.html">Legal information</a></p><br/> <p><a href="landreg.html">Land Registry</a></p><br/> <p><a href="research.html">Research</a></p><br/> </div> <div id="right"> <div id="title"><h2> News </h2></div> <ul> <li>The Information Unit has recently acquired a set of new APC guides</li> <li>If you would like any training on databases</li> <li>The Information Unit has created an economy timeline </li> </ul> </div> <div id="main"> <div id="title"><h2>Main stuff</h2></div> <p>Suspendisse adipiscing malesuada lectus. Cras vitae dolor. Donec consequat, lectus sed euismod consequat, ipsum mi mollis nunc, eget nonummy neque purus a tortor. Ut vel lorem. Curabitur mollis mauris id diam. Nam posuere. In placerat sapien ut nisl. Donec volutpat augue ut velit. Proin nec mi sit amet metus placerat egestas. Quisque porttitor massa eu lacus. Donec tristique, neque in sollicitudin euismod, enim tellus varius mauris, id vestibulum est massa id massa. Integer et purus. Vivamus condimentum tincidunt ipsum. Duis augue lorem, pretium vel, cursus at, vulputate sed, neque. Quisque justo. Nunc rhoncus. In ornare venenatis velit. </p> <p>Donec facilisis ante sit amet mauris. Nunc fermentum orci eu quam. Donec vestibulum. Vestibulum ultricies nisl eu eros. Curabitur urna. Duis enim erat, lobortis nonummy, mollis non, porttitor nec, nisi. Phasellus pulvinar purus eu pede. In mollis. Duis sit amet dui et arcu rhoncus auctor. Integer est dui, pharetra vel, volutpat ac, luctus in, elit. </p> <p>Suspendisse adipiscing malesuada lectus. Cras vitae dolor. Donec consequat, lectus sed euismod consequat, ipsum mi mollis nunc, eget nonummy neque purus a tortor. Ut vel lorem. Curabitur mollis mauris id diam. Nam posuere. In placerat sapien ut nisl. Donec volutpat augue ut velit. Proin ne</p> </div> <div id="bottom"> Drivers Jonas Information Unit </div> </body> </html> CSS: #top /*DJ logo and page title - includes h1*/ { color: black; font-family: arial, sans-serif; font-size: 20px; background: #d31145; padding-bottom: 15px; } body { color: black; font-family: arial, sans-serif; font-size:14px } img /*DJ logo*/ { padding: 20px; float:left; } #heading { text-align: center; padding:20px; } /*main page title*/ /*should change all reds to DJ red: #d31145*/ #left, #right, #main { color: white; background: black; } #left { float: left; width:140px; border-right:2px solid #d31145; text-align:left; padding-left: 1em; } #right { float:right; width:140px; border-left:2px solid #d31145; text-align:left; padding-right: 1em; } #main { margin-left: 150px; margin-right: 150px; border-left: 1px solid; border-right: 1px solid; padding: 1em; } #bottom { clear:both; margin: 0; color:black; background: #d31145; font-size: 16px; font-family: Arial, sans-serif; text-align: center; } #title { text-align:center; } a:link {color:white} a:visited {color:silver} a:hover {color:#d31145} a:active {color:#d31145} Hi, http://www.dudley.nhs.uk/search.asp has a two column effect. The CSS for it is he http://www.dudley.nhs.uk/css/screen.css I was wondering why if there is a table in the right hand column with a width percentage over 77% there is some horizontal scrolling? This happens in IE. Any help would be greatly appreciated. Thanks. Janusz Jasinski |
|||||||