I have a main DIV which uses a background image. Inside that DIV are two more DIV’s. I’ve set the float property of the first of the two DIVs to ‘left’, and the second DIV’s float to right (so I have a two column layout). Unfortunately as soon as my first DIV’s float is set to ‘left’, my main DIV’s background image disappears. How can I get around this?
I want to create a layout like this
can you post your code plz, or better yet… upload it so we can see it. I shouldn’t be doing that… the only thing i can think off the top of the noggin, is that you need to create a clear. so in your css make a clear class
.clear { clear: both; }
then after your div that’s floating right try…
<br class="clear" />
Tried that but no luck… here is the first image:
Here the float of the main contents isn’t set, and the right sidebar’s float is set to ‘right’.
Here i have set the float for the contents to ‘left’ which puts the sidebar next to the contents as I want, but for some unknown reason, the background image (which produces the grey sidebar background effect) disappears!
Here is the HTML for this section after the top gold menu nav bar:
<div id="shell-2col">
<div id="contents-left">
<p><span class="heading">How you are helping</span><br>
Simply hold a small friendly gathering for friends and family, who donate a minimum of £5 each to attend. After the event, send all cheques (made payable to “Wantage Nursing Home Charitable Trust”) to:
<p class="postit">
WNHCT Parties c/o
Hon Treasurer Colin Wilkins<br>
9 Swan Close<br>
Grove<br>
Wantage<br>
Oxon<br>
OX12 0QE</p>
You then need to check with your guests to ensure they hold a similar function themselves, and thus the chain continues. Pick up more of these free invites from <a href="http://www.streetmap.co.uk/newmap.srf?x=439967&y=187880&z=0&sv=OX12+8AX&st=2&pc=OX12+8AX&mapp=newmap.srf&searchp=newsearch.srf" target="_blank">Rowes Newsagents in Wantage</a> and enjoy your party!
</p><br>
<p><span class="heading">How it works</span><br>
Let’s say you hold a dinner party for 5 others, who each donate £5 and go on to hold their own dinner parties for a further 5.
We will have raised the £800,000 needed if this pattern continues just 6 more times - it really is that simple.</p>
<p class="essential">It is essential that your invited guests hold a similar function to continue this fundraising!</p>
</div id="contents-left">
<div id="contents-right">
<ul>
<li id="packlinks"><a href="index.php?c=parties-download">Download a party pack</a></li>
<li id="packlinks"><a href="index.php?c=parties-post">Post me a party pack</a></li>
<li id="packlinks"><a href="index.php?c=parties-book">Book your party now</a></li>
</ul>
</div id="contents-right">
</div id="shell-2col">
And this is the CSS:
html{ height: 100%;}
body {
height: 100%;
font-family: 'Lucida Grande', Verdana, Arial, sans-serif;
padding: 0;
margin: 0;
border: 0;
text-align: center;
background-color: #F5F3E5;
font-size: 11px;
line-height: 20px;
}
#shell {
min-height: 100%;
width: 760px;
border-left: 1px solid #CCC;
border-right: 1px solid #CCC;
margin: 0 auto;
text-align: left;
background-color: #FFFFFF;
/*background: url(../images/home-bg.gif) repeat-y 50% 0;*/
}
a:link { color: #9A7539;}
a:visited { color: #9A7539;}
a:hover { color: #990000;}
a:active { color: #9A7539;}
.clear { clear: both; }
/* ---------------------------------------
HEADER
--------------------------------------- */
#header {
text-align: center;
padding-top: 12px;
background-color: #FFFFFF;
background-image: none;
}
#header-photo {
background-color: #FFFFFF;
margin-top: 0px;
padding-bottom: 1px;
background-image: none;
/*border: 1px solid #BFBFBF;*/
}
#logo {
padding-left: 8px;
background-color: #FFFFFF;
padding-bottom: 12px;
background-image: none;
}
/* ---------------------------------------
NAVIGATION BAR
--------------------------------------- */
a.topnav {
color: #FFFFFF;
text-decoration:none;
padding-top: 7px;
padding-bottom: 9px;
padding-right:25px;
padding-left:25px;
}
a.topnav:hover {
color: #FFFFFF;
background: url(../images/nav-bg-hover.gif) repeat-x ;
text-decoration: underline;
padding-top: 6px;
padding-bottom: 9px;
padding-right:25px;
padding-left:25px;
}
a.topnav-active {
color: #FFFFFF;
background: url(../images/nav-bg-active.gif) repeat-x ;
text-decoration: none;
background-color: #990000;
padding-top: 6px;
padding-bottom: 8px;
padding-right:25px;
padding-left:25px;
border-top-width: 1px;
border-bottom-width: 1px;
border-bottom-color: #666666;
border-top-color: #666666;
border-top-style: solid;
border-bottom-style: solid;
cursor: default;
}
a.topnav-active:hover {
color: #FFFFFF;
background: url(../images/nav-bg-active.gif) repeat-x top left;
text-decoration: none;
background-color: #990000;
padding-top: 6px;
padding-bottom: 8px;
padding-right:25px;
padding-left:25px;
border-top-width: 1px;
border-bottom-width: 1px;
border-bottom-color: #666666;
border-top-color: #666666;
border-top-style: solid;
border-bottom-style: solid;
cursor: default;
}
#topnav {
font-family: 'Lucida Grande', Verdana, Arial, sans-serif;
text-align: center;
background: url(../images/nav-bg.gif) repeat-x top left;
padding-top: 5px;
padding-bottom: 6px;
border-top-width: 1px;
border-bottom-width: 1px;
border-bottom-color: #666666;
border-top-color: #666666;
border-top-style: solid;
border-bottom-style: solid;
font-size: 14px;
font-weight: bold;
color: #FFFFFF;
}
/* ---------------------------------------
GENERAL STYLES
--------------------------------------- */
.heading {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 20px;
color: #990000;
/*line-height: 0px;*/
}
.heading2 {
font-family: 'Lucida Grande', Verdana, Arial, sans-serif;
font-size: 14px;
color: #000000;
font-weight: bold;
line-height: 4px;
}
#shell-2col {
background: url(../images/home-bg.gif) repeat-y 0 0;
text-align: right;
}
#contents {
text-align: left;
min-height: 400px;
float: left;
padding: 8px;
padding-left: 20px;
padding-top: 4px;
margin-bottom: 10px;
background-color: #FFFFFF;
border: 0px;
}
#contents-left {
text-align: left;
width: 500px;
min-height: 400px;
float: left;
padding: 8px;
padding-left: 20px;
padding-top: 4px;
margin-bottom: 10px;
border: 0px;
}
#contents-right {
text-align: left;
float: right;
padding: 12px;
width: 206px;
/*border-left: 1px solid #BFBFBF;*/
/*background-color: #E6E6DC;*/
}
/* ---------------------------------------
HOME
--------------------------------------- */
#home-right-inner {
text-align: left;
width: 200px;
padding-left: 3px;
padding-right: 3px;
padding-top: 0px;
padding-bottom: 0px;
margin-bottom: 10px;
background-color: #FFFFFF;
border-top-color: #990000;
border-top-width: 3px;
border-top-style: solid;
border-bottom: 1px solid #BFBFBF;
}
.home-events-bullet{
font-size: 10px;
color: #990000;
font-weight: bolder;
}
.home-events-date{
font-weight: bold;
font-size: 10px;
}
.home-events{
font-size: 10px;
}
/* ---------------------------------------
PARTIES
--------------------------------------- */
.postit {
padding: 6px;
line-height: 16px;
border-bottom-width: 1px;
border-right-width: 1px;
border-bottom-color: #CCCCCC;
border-right-color: #CCCCCC;
border-right-style: solid;
border-bottom-style: solid;
background-color: #F7FF89;
border-top-color: #EEF584;
border-top-width: 20px;
border-top-style: solid;
width: 270px;
}
.essential {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 24px;
color: #990000;
text-align: center;
line-height: 27px;
}
.packlinks {
font-size: 14px;
font-weight: bold;
}
ul{
list-style: none;
margin: 0;
padding: 0;
}
ul li a:link,
ul li a:hover,
ul li a:visited,
ul li a:active {
color: #000000;
font-size: 14px;
font-weight: bold;
text-decoration: none;
line-height: 30px;
}
ul li a:hover{
text-decoration: underline;
}
#bookingform{
background-color: #E6E6DC;
width: 100%;
}
#bookingform-submit{
background-color: #E6E6DC;
text-align: right;
}
.bookingform-title{
font-weight: bold;
font-size: 14px;
}
#bookingform-left{
background-color: #E6E6DC;
float: left;
}
/*** CORNER STYLES ***/
.rounded-top ul {
background: url(../images/parties-corners.gif) -6px -6px no-repeat;
height:6px;
list-style: none;
margin: 0;
}
.rounded-top ul li {
float: right;
background: url(../images/parties-corners.gif) 0px -6px no-repeat;
width: 6px;
line-height: 6px;
}
.rounded-bottom ul {
background: url(../images/parties-corners.gif) -6px 0px no-repeat;
height: 6px;
list-style: none;
margin: 0;
}
.rounded-bottom ul li {
float: right;
background: url(../images/parties-corners.gif) 0px 0px no-repeat;
width: 6px;
line-height: 3px;
}
/* ---------------------------------------
FOOTER
--------------------------------------- */
#footer {
clear: both;
text-align: center;
font-family: "Lucida Grande", Verdana, Arial, sans-serif;
font-size: 9px;
color: #666666;
padding-bottom: 10px;
padding-top: 10px;
line-height: 12px;
background-color: #FFFFFF;
}
.footer-rule {
border: none;
background-color: #BFBFBF;
height: 1px;
margin-right: 20px;
margin-left: 20px;
margin-top: 0px;
margin-bottom: 0px;
}
Scratch that last post; I’d tried your “<br class=“clear” />” method on the wrong html doc. I inserted it after the sidebar DIV and it’s fixed the problem. Thanks so much!! 
:lol: kewl… glad it worked for ya 
:: Copyright KIRUPA 2024 //--