CSS - Problems With A Border-bottom In Ie6

http://www.brendanclements.com/ups/
http://www.brendanclements.com/ups/styles.css

It's the slideshow swf on the right. The bottom has a sliver but the heights are both at 300 px.

I know I used tables too much but it's been way too long since I've done CSS positioning so I'm doing this for now.

I believe the sliver is caused because the slideshow box has a rowspan of 2 since the slideshow does not require a title but I can not figure out how to get rid of it.

Thank you.

This is killing me! The border of a DIV top is working perfectly on FF but not applying on top in IE 6+7. Here are the class attributes:

{padding:1px 7px 3px; font-size:16px; border-color:#555555; border-style:solid; border-width:1px 1px 0px; text-decoration:none; color:#425366; background-color: #abd3ff; font-weight:bold;}

Not sure if the problem is on this class or in anything that affecting it. Any suggestions will be great.


Ehud

I've got a div (picright) within a div that has an image with a border. The border works, but for some reason there's a teeny tiny gap between the bottom of the image and the border. (At least on a Mac using FF.)

.picright {
float: right;
border: solid 1px #9F7A47;
margin: .3em .3em .5em .5em;
padding: 0;
}

Then I thought maybe I needed a rule for the img, so I added

.picright img {
margin: 0;
padding: 0;
}

but that didn't fix it.

Any guesses?

Yes........it's me again with more problems.

In trying to solve some other problems I went to using contrasting bg colors so I could see what was going on per Kravvitz suggestion.

So here is what I have

body bg color set at gold

#whiteBorder - set at white

#page bg set at green; border hot pink

and then #topbar and #sideColumn set at powder blue.

The problems is that the 10px whiteBorder shows on the top and left - but not on the right and bottom and I have no clue why.

Here is the css: Code:

body {
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 12px;
	text-align: center;
	background-color: #FFCC33;
	color: #515151;
	margin:0px;
	padding:10px;
}

/*page container settings*/

#page {
	width: 750px;
	height: 600px;
	border: 1px solid #FF00FF;
	background-color: #339900;
	overflow: hidden;
	margin: auto;
	text-align: left;
}

#whiteBorder {
	border: 10px solid #FFFFFF;
	width: 100%;
	height: 100%;
}

/*text*/

.large {
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	color: #5094F9;
	font-size: 18px;
	font-weight: bold;
	margin-bottom: 15px;
}

h1 {
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	color: #5094F9;
	font-size:20px;
	font-weight: bold;
	margin-bottom: 10px;
}

h2 {
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	color: #5094F9;
	font-size: 16px;
	font-weight: bold;
}

h3 {
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	color: #5094F9;
	font-size: 12px;
	font-weight: bold;
}

h4 {
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	color: #5094F9;
	font-size: 14px;
	font-weight: bold;
}

p a:link, a:visited {
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	text-decoration: none;
	color: #5094F9;
	font-size: 12px;
	font-weight: bold;
}

p a:hover, p a:active {
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	text-decoration: none;
	color: #990099;
	font-size: 12px;
	font-weight: bold;
}

/*logo header and tag settings*/
	
#header {	
	margin: 0;
	padding-bottom: 5px;
	width: 450px;
	height: 36px;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	color: #5094F9;
	text-align: left;
}

#header img {
    vertical-align: -7px;
    }

.tagline {
	color: #5094F9;
	font-size: 16;
	font-style: italic;
	font-weight: bold;
	display: inline;
	clear: both;
	line-height: 20px;
	margin-left: 10px;
}

/*top bar settings*/

#topbar {
	float: top;
	height: 20px;
	background-color: #5094F9;
	clear: both;
	padding-left: 10px;
	text-align: left;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	color: #FFFFFF;
	font-size: 12px;
	font-weight: bold;
}

#topbar a:link, #topbar a:visited {
	background-color: transparent;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	text-decoration: none;
	color: #FFFFFF;
	font-size: 12px;
	font-weight: bold;
}

#topbar a:hover, #topbar a:active {
	background-color: #FFFFFF;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	text-decoration: none;
	color: #5094F9;
	font-size: 12px;
	font-weight: bold;
}

#topbar ul {
	list-style: none;
	margin: 0;
	padding-top: 2px;
}

#topbar li {
	display: inline;
	margin-right: 160px;
}

/*Main Section two columns under top section*/

#wrapper{
	width: 100%;
	height: 100%;
}

#sideColumn {
	float:left;
	width:155px;
	height: 100%;
	background-color: #5094F9;
	padding-top: 50px;
	padding-left:10px; 
	padding-bottom:10px;
	pading-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;
	margin-left: 185px;
}

Here is the xhtml: Code:

<body>

	<!--begin page -->
	<div id="page">
	
	<!--begin white border -->
	<div id="whiteBorder">
	
	<!--begin header -->	
  	<div id="header"><img src="../images/vitalograph_spirometers_logo.gif" width="230" height="36" alt="vitalograph spirometers logo" />
  	<span class="tagline">world leaders in spirometry</span>
	</div>
	<!--end of header -->
	
	<!--begin topbar -->
  	<div id="topbar">
  	<ul>
		<li><a href="../index.html">Home</a></li>
		<li><a href="../about_us/about_us.html">About Us</a></li>
		<li><a href="../other_regions.html">Other Regions</a></li>
   	</ul>
  	</div>
  	<!--end topbar -->
  
  	<!--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="../resources/customer_support.html">Customer Support</a></li>
	  <li><a href="../resources/training_services.html">Training & Services</a></li>
      <li><a href="../resources/exhibitions.html">Exhibitions</a></li>
      <li><a href="../resources/newsletters.html">Newsletters</a></li>
      <li><a href="../resources/downloads.html">Downloads</a></li>
      <li><a href="../resources/useful_links.html">Useful Links</a></li>
      <li><a href="../resources/industry_information.html">Industry Information</a></li>
	  <li><a href="../resources/industry_information.html">Sitemap</a></li>
	</ul>
  </div>
  <!--end of side column -->
  
  <!--begin main column -->  
  <div id="mainColumn">
  
  	<!-- TemplateBeginEditable name="Main_Section" -->Main_Section<!-- TemplateEndEditable -->
  
  </div>
  <!--end of main column -->
  
  </div> 
  <!--end of wrapper--> 
   
  </div>
  <!--end of white border -->
  
  </div>
  <!--end of page -->
  
</body>

Thanks

I use the following CSS for my links, and use a border-bottom to give them a dashed underline...

Code:

a { 
color: #AC4870; 
border-bottom: 1px dashed #DDDDDD; 
text-decoration: none; 
} 
a:hover { 
color: #DDDDDD; 
border-bottom: 1px dashed #AC4870; 
text-decoration: none; 
} 

This underline also shows up under my images that are used as links. How would you write CSS that would remove this dashed border-bottom from my image links?

Thanks

I am modifying an X-Cart implementation that the template originally put the product image in a seperate td. I have modified it to put the image in the same td as the description and used a float style on a div tag. The text is wrapping correctly. The problem is that I have a border-bottom style on the product name and it is ending up under the product image. The image is also covering the bullet on li tags.

An example is http://www.adaappliances.com/produc...48&cat=0&page=1.

Please do not attempt to order anything! This is not a live site yet.

This is a snippet of the code. I am using inline styles for testing.
Code:

<div style="float:left; padding:5px">
<IMG id="product_thumbnail" src="/image.php?productid=16148" width="168" height="230" alt="Eurotech EDW254E Dishwasher" border="0"></div>
<p style="border-bottom: 1px solid black"><font size="3"><strong>Eurotech EDW254E Dishwasher </strong></font></p>

I have not found a way to fix this. Any suggestions?

I'm trying to put a 1px line on the bottom of my header that spans the width all the way. I've used border-bottom: 1px and border-style: solid; but I still have a looks like 3px border all the way around my header.

Also I have my unordered list inside of my header div and it's placed directly below my header.

Any help much appreciated, just learning how to layout.

http://imgbin.org/index.php?page=image&id=6637

CSS code
Code:

body { 	
	font-family: "Lucida Sans Unicode", sans-serif, Verdana; 
	
	background-color: #999999; 
}

#header {
	
	height: 75px; 
	width: 100%; 
	
	border: 0px 0px 1px 0px; 
	border-style: solid;  
	border-color: white; 
	background-color: #336699; 
}	

#container {
	margin: 0 auto; 
	width: 900px;
	height: 100%;  
	
	background-color: #666666;  
}

#content {
	width: 75%; 
}

#sidebar {
	width: 25%; 	
	
	background-color: #666666; 	
}

ul {
 
	list-style-type: none; 
	
}

li {
	display: inline;	
}

and

HTML
Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>
	<head>
		<title>Jeremy</title>
		<link href="default.css" rel="stylesheet" type="text/css" />	
	</head>
	
	<body>
		<div id="header">
			<h1 class="header">Jeremy</h1>
			<ul>
				<li><a href="index.html">Home</a></li>
				<li><a href="portfolio.html">Portfolio</a></li>
				<li><a href="forums.html">Forums</a></li>
				<li><a href="contactme.html">Contact Me</a></li>			
			</ul>
		</div>	
		
		<div id="container">
			<div id="sidebar">
			
			</div>		
			
			<div id="content">
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed porttitor dui sit amet diam molestie cursus. Vivamus a sapien sed nunc fermentum feugiat. Donec iaculis neque sit amet tortor consectetur eu lacinia est commodo. Ut lobortis fermentum felis, eu tristique elit fermentum sed. Etiam pulvinar commodo est non vestibulum. Aenean sed ante in velit vulputate tristique. Duis lacinia eleifend massa, sed volutpat dolor malesuada at. Nam convallis consequat mauris imperdiet rutrum. Aenean vitae vestibulum libero. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum lorem nulla, pellentesque vitae porttitor condimentum, dignissim a libero. In quis turpis orci, vitae faucibus risus. Duis tincidunt, libero tincidunt hendrerit viverra, felis lectus rutrum diam, et dictum mauris ipsum nec purus.</p>
				<p>Vivamus ut nunc vitae eros fermentum pretium. Nunc molestie odio vitae magna consectetur quis ultricies purus adipiscing. Curabitur ante nisl, scelerisque a consequat sed, rhoncus at turpis. Morbi blandit ante eu tellus facilisis eu semper enim auctor. Nunc sollicitudin orci nunc, vitae accumsan risus. Etiam nec est in ipsum iaculis varius. Nam enim velit, imperdiet viverra condimentum vitae, egestas eget dolor. Nullam facilisis condimentum diam, in euismod lorem mattis a. Mauris vel nulla et ipsum venenatis aliquam vitae a nibh. Nunc commodo ullamcorper odio vitae fermentum. Praesent faucibus blandit condimentum. Integer sed justo nulla. Praesent id gravida dui. Proin malesuada interdum scelerisque. Sed condimentum justo nec metus venenatis accumsan.</p>
			</div>		
		
		</div>
	
	</body>
</html>

ok i have links on the side, i have applied border-bottom:0.1em solid black properties so they look like they are underlined. Now it all works but sometimes when i scroll the page down and then up, SOME of the link's border have disappeared, i can fix this by moving my mouse of the links and the border appear but i was wondering is it to do with CSS/html?
the only other thing could be my Screen/monitor's refresh rate

hi.

I need some formatting help.

I am using niftycorners and the linked list tabs
I am building seem to rest at the bottom, pushing
the bottom of the rounded corners to the right of them.
I have tried clear:left, clear:right, clear:both at the div
and ul levels but that doesnt work.

any ideas?

I have attached a picture of the problem.

Here is the CSS/HTML:

Code:

<style>

body {

margin:20px;

}

#toptabs {
clear:left;
}

#toptabs ul {
    clear:left;
    position:relative;
	width:100%;
	margin-bottom:0;
	list-style:none;
	line-height:1em;
	padding:100px 0px 0px 0px;
}	

#toptabs ul li {
	float:left;
	margin-right:5px;
	padding:0;
}
#toptabs ul li.clear {
	clear:right;
}

#toptabs a {
	display:block;
	color:#444;
	text-decoration:none;
	font-weight:bold;
	background:#ddd;
	margin:0;
	padding:0.25em 1em;
	border-left:1px solid #fff;
	border-top:1px solid #fff;
	border-right:1px solid #aaa;
}

#toptabs A:hover,
#toptabs A:active,
#toptabs A.he link,
#toptabs A.he visited {
	background:#bbb;
}

#toptabs A.he link,
#toptabs A.he visited {
	position:relative;
	z-index:102;
}
</style>
</HEAD>

<BODY>

  <div id="header">
	  <div id="toptabs">
	    <ul id="venture">
          <li id="current"><a href="#"><span>Profile</span></a></li>
          <li><a href="#"><span>Q&A</span></a></li>
          <li><a href="#"><span>Recommendations</span></a></li>
          <li><a href="#"><span>Connections</span></a></li>
        </ul>
      </div>
    </div>	
</BODY>

heloo geniuses.


please to someone helping me for preventing more of the hair pulling out.

I am trying to figure out how to repeat a border image, basically to repeat the div holding the wood images on this page:
http://greentypeoftube.com/kc/

essentially to have the bottom expand with the user's browser window size.

thanks to you for the thinking and the helping of me with it.

s

oh. also I am hoping for a way to show the scroll buttons only if the text [will be in another div being cropped by the content window}.

is there a way to do this with css?


I am working much very hard to be more with css to design than just designing it.

Maybe I should be posting this as a reply - this is an UPDATE: I used the WC3 Validator and it found an outright error in my code. So, gosh - ignore the posting below! And, uhm, I think I'll be using that handy-dandy WC3 tool more often....
----------
Okay - I am a CSS dope - I've been using tables and antiquated code for a long time. I'm putting together a dummy site, just for testing, and I'm trying to postiion things with DIVs, etc. Be gentle - I'm 59, and, not that damned smart... I installed Dreamweaver and have been fooling with that as it has a lot of templates with proper CSS, tips, etc. But I've never used it before, so that's another learning curve.

So, I have a page on which there are some DIVs and, in one, there is an extra space - and, an extra bottom border line - in Internet Explorer. I'm not fond of IE, but that isn't the point - a lot of people use it.....and I need to know why this is happening.

Here's a link to an image of what it looks like in Explorer - the line at the bottom is absent in Firefox and Chrome:

Screenshot

The page is just the index page at:
GuyMerritt.net

The CSS files looks like this:


Code:

body {
margin: 0 0 0 0;
background: #FEFEEC;
height: 1000px;
background: #F9F9EE;
}
h2 {font-family: tahoma; font-size: 12px; font-weight: normal; padding-left: 5px; padding-right: 8px; color: #777772;}
#header {height: 220px; background: url(../images/header_graphics.jpg); }
#left-sidebar {
float:left;
width:20%;
padding-left: 20px;
}
#right-sidebar {
float:right;
width:20%;
padding-right: 20px;
}
#main-content {width: 54%;float: left;padding-top: 0px;
}
.sidebars-2 #content {
width: 54%;float: left;padding-top: 10px;
}
#box {
border-style: solid;
border-width: .05em;
font-family: arial; 
color: #777772;
font-size: 13px;
padding-left: 9px;
padding-right: 9px;
}
img.example {
  width: 100%;
  max-width: 250px;
  height: auto;
}
div#slides {
	width: 500px;
	height: 280px;
	overflow: hidden;
}

div#slides div {
	height: 280px;
	width: 500px;
	font-size: 100px;
	line-height: 200px;
	text-align: center;
	color: #fff;
}

ul#ticker {
	height: 1.4em;
	overflow: hidden;
	border: solid 1px #aaa;
	background: #ccc;
}

ul#ticker li {
	padding: 0.2em 0;
}

/* @group global */

p#links {
	padding-top: 50px;
	clear: both;
}

a#avatar {
	position: absolute;
	bottom: 10px;
	right: 10px;
}

a#avatar img {
	border: none;
}

h1 {
	color: #0094d5;
}

a {
	color: #0094d5;
}

a:visited, a:hover {
	color: #00577e;
}

.red {
	background: #e40053;
}

.blue {
	background: #0094d5;
}

.green {
	background: #43aa38;
}

/* @end */

At the rate I'm moving, I'll be dead before I ever figure this stuff all out! If anyone could explain what's causing this I would be very grateful. And why do so many things render differently in Explorer (from Chrome and Firefox)?

Thanks again,

Guy Merritt,
Flint, MI

I like dashed underline links. The trouble is a couple of sections of my site use line-height and vertical-align to center their content. This means that applying a border-bottom: 1px dashed black; to an href has the effect that the underline appears at the bottom of the line height and not directly underneath the link. Is there a way to overcome this?

Hi All,

I'm trying to create some expanding headers using images and background color/images. Everything seems to be working fine except that at the bottom of the heading there is a 1 or 2 pixel showing of the background color!

I assume it is something I'm missing in the CSS rule as the problem occurs in both Mozilla and IE!

Click here to see example

It's not the images as there on a white background and are cropped fine as can be seen from the enlarged left side image.

[html]
<div style="width: 162px; color: white; background: green; margin: 0; padding: 0;"><img src="/RhL.gif" width="25" height="50" border="0"><span>HEADING TEXT</span><img src="/RhR.gif" width="25" height="25"></div>
[/html]

Any help kindly appreciated

PHP Addict

hello,
i'm having a problem with the border on one of divs. the name of the div is content2. Depending on what I set the width to, it looks fine in IE or Firefox, one or the other. I used an image for the top and one for the bottom. I did the linkbanner on the left the same way, and that one worked fine. Anyone have any idea why i'm having this problem??
thanks,
*j

Problem 1: I specified #pic with a height of 176px and a border of 1px. The total height should be 178px, correct? Measuring it with my handy web developer ruler, it only measures 176px tall, including the border or 174px excluding the borders. Why would this occur? Aren't borders supposed to go around an element not be included in the element? This occurs in both Firefox and IE.

Problem 2: Same problem area as above, except I'm attempting to add 3px left and bottom margin around several #pic. Using my trusty ruler again, I'm getting a margin of only 1px around my #pic's. Instead, it appears that the margin is including the 1px border from the two #pics, totaling 3px. This only occurs in Firefox though, IE renders it as I would have guessed. This means that the .right content doesn't line up in either IE or Firefox, depending on which one I correct it for.

Below is a picture to explain what I'm attempting to say.

Here is the code (sorry I'm building it for a friend and he is working on a host -- so its local only):

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "(URL address blocked: See forum rules)">
<html>
	<head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <style type="text/css">
		  body
		  {
		  background-color: #615947;
		  }
 
		  #container
		  {
		  width: 800px;
		  margin: 10px auto;
		  color: #333;
		  }
 
		  #nav
		  {
		  }
 
		  #navcontainer {
		  padding: 0;
		  height: 35px;
		  }
 
		  #navcontainer ul 
		  {
		  border: 0;
		  margin: 0;
		  padding: 0;
		  list-style-type: none;
		  text-align: center;
		  }
 
		  #navcontainer ul li 
		  {
		  display: block;
		  float: left;
		  text-align: center;
		  padding: 0;
		  margin: 0;
		  width: 154px;
		  height: 16px;
		  }
 
		  #navcontainer ul li a 
		  {
		  position:relative;
		  background: #AE0000;
		  border-top: 1px solid #000000;
		  border-left: 1px solid #000000;
		  border-bottom: 1px solid #000000;
		  border-right: 1px solid #000000;
		  padding: 8px;
		  margin: 0 0 0 0;
		  color: #f5d7b4;
		  text-decoration: none;
		  display: block;
		  text-align: center;
		  font: 13px/15px Verdana,Arial,Helvetica,sans-serif;
		  font-weight:bold;
		  }
 
		  #top
		  {
		  background-color: #AD9F7F;
		  background-image: url(<a href="(URL address blocked: See forum rules)" rel="nofollow">(URL address blocked: See forum rules)</a>);
		  background-repeat: no-repeat;
		  height: 150px;
		  width: 767px;
		  margin-bottom: 3px;
		  }
 
		  .left
		  {
		  display:inline;
		  border: 1px solid black;
		  background-color: #fff;
		  float: left;
		  width: 385px;
		  margin-bottom: 3px;
		  padding: 0;
		  margin-right: 3px;
		  }
 
		  #updates
		  {
		  height:539px;
		  }
 
		  #topleft
		  {
		  margin: 0px;
		  height: 14em;
		  border-bottom: 1px solid black;
		  }
 
		  #topleft h3
		  {
		  background-color: #9E9E9E;
		  margin: 0px;
		  color: white;
		  font-family: sans-serif;
		  padding-left: 12px;
		  font-size: 12px;
		  }
 
		  #bottomleft
		  {
		  height: 309px;
		  margin: 0px;
		  overflow: auto;
		  }
 
		  #bottomleft h3
		  {
		  background-color: #9E9E9E;
		  margin: 0px;
		  color: white;
		  font-family: sans-serif;
		  padding-left: 12px;
		  font-size: 12px;
		  }
 
		  .right
		  {
		  margin-left: 385px;
		  padding: 0;
		  width: auto;
		  background-color: #615947; 
		  }
 
		  .pic
		  {
		  width: 186px;
		  height: 176px;
		  margin: 0px 3px 3px 0px;
		  border: 1px solid black;
		  float: left;
		  background-color: #616161;
		  }
 
		  #footer
		  {
		  clear: both;
		  margin: 0;
		  color: #333;
		  background-color: #AD9F7F;
		  border: 1px solid black;
		  width: 767px;
		  }
    	</style>
 
        <title>CSS</title>
    </head>
 
  <body>
    <div id="container">
      <div id="top"></div>
      <div id="navcontainer">
        <ul>
          <li><a href="#">HOME</a></li>
          <li><a href="#">THE ARTIST</a></li>
          <li><a href="#">GALLERY</a></li>
          <li><a href="#">GUESTBOOK</a></li>
          <li><a href="#">CONTACT</a></li>
        </ul>
      </div>
      <div class="left">
        <div id="topleft">
          <h3>Welcome</h3>
        </div>
        <div id="bottomleft">
          <h3>Daves daily news</h3>
          <p>
              Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut.
           </p>
        </div>
      </div>
      <div class="right">
        <div class="pic"></div>
        <div class="pic"></div>
        <div class="pic"></div>
        <div class="pic"></div>
        <div class="pic"></div>
        <div class="pic"></div>
      </div>
      <div id="footer">footer</div>
    </div>
  </body>
</html>

Image link
http://lh5.ggpht.com/_zKwoPOwgFUM/SyNwWAxR0ZI/AAAAAAAAAKI/CzOKCNVox3E/prob.jpg