[sash_007]

Hello friends,



Got a problem in floating here is the error i want to float the news part to the left but i came up withthis 

i want to achieve likethis 

body
{
 font-size: 90%;
 font-family: "Trebuchet MS";
 background: #000000 url(images/main_bg2.jpg) no-repeat;
 line-height: 1.6em;
 text-align: center;
 color: #000000;
}

ul, li, img, body, html
{
 margin: 0;
 padding: 0;
}

a
{
 text-decoration: none;
 color: #FFFFFF;
}

a:hover
{
 text-decoration: none;
}

a img
{
 border: none;
}

h3 { font-family:Georgia, "Times New Roman", Times, serif; font-size:22px;}

#container
{
 text-align: left;
 margin: auto;
 width: 970px;
background-color:#FCC86F;
}
#tier1, #tier2, #tier3
{
 margin-bottom: 1em;
}

#mainContent #tier1
{
 height: 300px;
 padding-top: .6em;

  }

#mainContent #tier2 div
{
 float: left;
 width: 31.5%;
 margin-right: 1em;
 padding: 0 0 .5em 0;
 
}
#tier1 #imageslider
{
 height: 400px;
 background-color:#000000;
 float: left;
 width: 100%;
 border: none;
 padding: 0;
 margin:0;
}
#tier2 h3
{
 text-align: left;
}

#mainContent #tier3
{
 position: relative;
}
#mainContent #tier3 div
{
 margin: 0 0 1em 0;
 padding: 0;
 padding-bottom: .5em;
}
#tier3 div#News&Events
{
 width: 31.6%;
 float: left;
 
}
#mainContent #tier3 #welcome
{
 float: right;
 width: 64.8%;
 margin-right: .6em;
}

#menu {
list-style:none;
display:inline;
font-family:Georgia, "Times New Roman", Times, serif;
font-size:24px;
color:#FFFFFF;
margin:0;
padding:0;
}

#mainContent #tier2
{
 text-align: left;
 margin: 0 auto 1em;
 font-size: 1em;
 
}
#footer
{

 clear: both;
 text-align: center;
 font-family:"Trebuchet MS";
 
 
 color:#FFFFFF;
}

my css

[Wickham]

First of all, don't use & in style names, secondly, you have used id="News&Events" twice so rename them both like this (although I can't see a style for #tier3 h3#NewsandEvents yet):-

#mainContent #tier3 div#NewsEvents
{
	width: 31.6%; 
	float: left;
}

<div id="NewsEvents">
            <div>
                <h3 id="NewsandEvents">News & Events</h3>

[sash_007]

Wickham, on 04 January 2010 - 11:34 AM, said:

First of all, don't use & in style names, secondly, you have used id="News&Events" twice so rename them both like this (although I can't see a style for #tier3 h3#NewsandEvents yet):-

#mainContent #tier3 div#NewsEvents
{
    width: 31.6%; 
    float: left;
}

<div id="NewsEvents">
            <div>
                <h3 id="NewsandEvents">News & Events</h3>

ya thanks ya ur rght i shld not use &  in naming id or class  



but can u tell why the background image looks a bit shifted when i coded it
and also i cant change the background color of tier2 to black?

[Wickham]

It helps the background image if you edit like this:-

body
{
	font-size: 90%;               
	font-family: "Trebuchet MS";
	background: #000 url(images/main_bg2.jpg) no-repeat top center;
	line-height: 1.6em;
	text-align: center;
	color: #000000;
}

For the tier2 black background I had to add a class="third" to the three inner divs and also a clear div before the tier2 closing tag to cancel the floats and drag down the background:-

<div id="tier2">
        
        <div class="third">
                 <img src="images/icon1.jpg" alt="What we offer"  
style="float:left; "><h3 id="What we offer">What we offer</h3>
       
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
Suspendisse viverra tellus sit amet libero mattis sed semper tortor 
molestie. Proin mauris ligula, porttitor sed 
                <small><a href="#">more info</a></small>                

            </p>
        </div>
        
        <div class="third">
            <h3 id="Our Support">Our Support</h3>
            <img src="images/calendar.jpg" alt="When Is It?" > 
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Suspendisse viverra tellus sit amet libero mattis sed semper tortor 
molestie. Proin mauris ligula, porttitor sed 
                <small><a href="#">more info</a></small>                

            </p>   
        </div>
        
         <div class="third">
            <h3>Our Work</h3>
             <img src="images/coins.jpg" alt="Who Is Speaking?">
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
Suspendisse viverra tellus sit amet libero mattis sed semper tortor 
molestie. Proin mauris ligula, porttitor sed 
                <small><a href="#">more info</a></small>                

            </p>
        </div>            
 <div class="clear">&nbsp;</div>        
        </div><!-- end tier 2-->

and changed #mainContent #tier2 div to #mainContent #tier2 div.third and added the clear div style and the black background to #tier2:-

#mainContent #tier2 div.third
{                                       
	float: left;
	width: 31.5%;
	margin-right: 1em;
	padding: 0 0 .5em 0;
	
}
.clear { clear: both; width: 100%; height: 0; visibility: hidden; }
#mainContent #tier2
{       background: #000; 
	text-align: left;
	margin: 0 auto 1em;
	font-size: 1em;
	
}

The reason for changing #mainContent #tier2 div to #mainContent #tier2 div.third and adding the class to all the tier2 inner divs is that the general style #mainContent #tier2 div makes all divs have a float including the clear div I added, and although the clear div has clear: both; it then only had a width of 31.5% instead of 100% and I found it easier to get it right adding the .third style.

Note that you now have black text on a black background in #tier2.

[sash_007]

Wickham, on 04 January 2010 - 02:12 PM, said:

It helps the background image if you edit like this:-

body
{
    font-size: 90%;               
    font-family: "Trebuchet MS";
    background: #000 url(images/main_bg2.jpg) no-repeat top center;
    line-height: 1.6em;
    text-align: center;
    color: #000000;
}

For the tier2 black background I had to add a class="third" to the three inner divs and also a clear div before the tier2 closing tag to cancel the floats and drag down the background:-

<div id="tier2">
        
        <div class="third">
                 <img src="images/icon1.jpg" alt="What we offer"  
style="float:left; "><h3 id="What we offer">What we offer</h3>
       
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
Suspendisse viverra tellus sit amet libero mattis sed semper tortor 
molestie. Proin mauris ligula, porttitor sed 
                <small><a href="#">more info</a></small>                

            </p>
        </div>
        
        <div class="third">
            <h3 id="Our Support">Our Support</h3>
            <img src="images/calendar.jpg" alt="When Is It?" > 
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Suspendisse viverra tellus sit amet libero mattis sed semper tortor 
molestie. Proin mauris ligula, porttitor sed 
                <small><a href="#">more info</a></small>                

            </p>   
        </div>
        
         <div class="third">
            <h3>Our Work</h3>
             <img src="images/coins.jpg" alt="Who Is Speaking?">
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
Suspendisse viverra tellus sit amet libero mattis sed semper tortor 
molestie. Proin mauris ligula, porttitor sed 
                <small><a href="#">more info</a></small>                

            </p>
        </div>            
 <div class="clear">&nbsp;</div>        
        </div><!-- end tier 2-->

and changed #mainContent #tier2 div to #mainContent #tier2 div.third and added the clear div style and the black background to #tier2:-

#mainContent #tier2 div.third
{                                       
    float: left;
    width: 31.5%;
    margin-right: 1em;
    padding: 0 0 .5em 0;
    
}
.clear { clear: both; width: 100%; height: 0; visibility: hidden; }
#mainContent #tier2
{       background: #000; 
    text-align: left;
    margin: 0 auto 1em;
    font-size: 1em;
    
}

The reason for changing #mainContent #tier2 div to #mainContent #tier2 div.third and adding the class to all the tier2 inner divs is that the general style #mainContent #tier2 div makes all divs have a float including the clear div I added, and although the clear div has clear: both; it then  only had a width of 31.5% instead of 100% and I found it easier to get it right adding the .third style.

Note that you now have black text on a black background in #tier2.

ya thx it wrked