CSS - Layering Problem

Hi all,

I'm pretty anal about the layouts I make.. especially when it comes to my own site. This is the first time I have really attempted designing to validate within the strict doctype. The only thing is the layout I am trying to get to work requires A LOT of layers, and a lot of them need to line up with eachother. I am running in to problems because some layers are pushed down further than others on the page. The difference is noticeable (10 or 15 pixels) when I change from Firefox to Explorer. Is there anyway around this, am I missing something here? My page is uploaded at http://www.studioflow.net/display.html
and my css file is here http://www.studioflow.net/sfglobal.css
Do I need to just abandon my quest for pixel perfect alignment?

Thanks,

alan

Good day! I have exhausted all of the people I could ask regarding this so I'm hoping I may get help here. This is the first website I've made and it's causing a lot of problems.

http:// www . sycwin . com / index2 . html

My issue is that my website is browser compatible with everything BUT IE. My problem is getting it to look the same on IE as it currently looks now on Firefox. I understand that there are java script solutions for div stacking problems, but for some reason those are causing no effects

problems:
1. subinfo not positioning over mainwrapper and is instead STACKING on top of mainwrapper on IE
2. introduction not in position to the right of carousel/slideshow on IE
3. paints and wires divs are messed up in width, padding and margin on IE

here's the css:
Code:

body {
color:#333333;
background-color: #f5f5ef;
background-image:url(images/bg.jpg);
background-repeat:repeat;
font-family:Arial, Helvetica, sans-serif;
line-height: 18px;
font-size:11px;
padding:0px;
margin:0px;
}

emphasis {
background-color:#e7d018;
}
strong {
color:#2b6934;
}

a:active, a:link, a:hover, a:visited {
border:none;
text-decoration:none;
}

img {
border:none;
}

/*MAIN SEGMENTS*/
#mainwrapper{
width:1000px;
margin:0 auto;
margin-top:-20px;
margin-bottom:-50px;
z-index:900;
overflow:hidden;
}
#contentwrapper {
width:1000px;
margin-bottom:-10px;
}
#header {
background-image:url(images/header.png);
background-repeat:no-repeat;
height:492px;
margin-top:-15px;
width:1000px;
float:none;
}

#footer {
width:1000px;
height:222px;
background-image:url(images/footer.png);
background-repeat:no-repeat;
background-position:bottom;
margin-top:-300px;
padding-top:-300px;
margin:0 auto;
}

/*SUBINFO*/
#subinfo {
width:220px;
position:relative;
top:0px;
right:35px;
float:right;
z-index:1000;
}
#blurb {
width:220px;
height:165px;
color:#FFFFFF;
background-image:url(images/blurb_01.png);
background-repeat:no-repeat;
text-align:center;
padding-top:380px;
padding-bottom:64px;
font-size:11px;
}
.call {
font-size:22px;
padding-top:20px;
font-weight:bold;
line-height:20px;
}
#contact {
width:220px;
background-image:url(images/blurb_02.png);
background-repeat:no-repeat;
font-size:14px;
line-height:20px;
text-align:center;
padding-top:5px;
}
#blurb strong {
color:#FFFFFF;
}
.blurbheader {
font-size:20px;
font-weight:bold;
}
.blurbsubtext {
font-size:14px;
font-weight:bold;
}
#credits {
text-align: center;
font-size:9px;
line-height:14px;
padding-top:80px;
}
/*CONTENT*/
#content {
width:700px;
background-image: url(content-bg.png);
background-repeat:repeat-y;
padding-right:250px;
margin-top:-240px;
padding-left:44px;
}

#slideshow {
width:460px;
padding-left:10px;
height:360px;
float:left;
padding-bottom:20px;
overflow:hidden;
}
#write-up {
width:210px;
height:360px;
padding:8px 0 20px 10px;
margin-left:470px;
}
#products {
width:680px;
padding-right:10px;
margin: 0 auto;
margin-top:20px;
}

#products td {
width:160px;
padding-bottom:5px;
text-align:center;
}
#products-wires {
width:660px;
margin: 0 auto;
margin-top:20px;
}
#products-wires td {
width:220px;
text-align:center;
}
.product-header {
font-family:Gotham, Helvetica, Arial, sans-serif;
text-align:left;
font-size:25px;
font-weight:bold;
text-transform:uppercase;
letter-spacing:-2px;
line-height:14px;
}
#introduction {
width:680px;
font-size:11px;
line-height: 18px;
text-align:left;
overflow:hidden;
}
#paints{
margin-right:18px;
width:290px;
padding:20px;
background-image:url(images/introduction.png);
background-repeat:no-repeat;
height:195px;
float:left;
margin-bottom:20px;
}
#wires {
margin-left: 348px;
width:290px;
padding:20px;
margin-right:10px;
background-image:url(images/introduction.png);
background-repeat:no-repeat;
height:195px;
margin-bottom:20px;
}
.product-brand {
background-color:#314842;
color:#FFFFFF;
font-family:Gotham, Helvetica, Arial, sans-serif;
font-weight:bold;
text-transform:uppercase;
text-align:left;
letter-spacing:2px;
font-size:12px;
padding-left:5px;
}

/*ROLLOVER*/
#preview{
position:absolute;
border:1px solid #ccc;
background:#333;
padding:5px;
display:none;
color:#fff;
text-align:center;
z-index:3;
}

#preview img{
width:300px;
height:300px;
} 
/*CAROUSEL*/
#carousel ul {
	list-style: none;
	width:3600px;
	margin: 0;
	padding: 0;
	position:relative;
	padding-left:10px;
height:350px;
float:left;
padding-bottom:20px;
}
#carousel li {
	display:inline;
	float:left;
}
#carousel {
overflow:hidden;

I hope you guys could help me figure this one out. I'm absolutely clueless. Thank you for taking the time to read this.

I'm working on a site where I want to layer grass along the bottom of the page, but slightly over the bottom of an image that's being used as a footer for a table.
I'm new to CSS and any help would be greatly appreciated.

Here's the code I'm using:


<style type="text/css">
<!--
body {
background-image: url(images/polkasky.jpg);
background-attachment: fixed;
}
.greentable {
background-image: url(images/cloud-back.png);
vertical-align: text-top;
}

.cloudfoot {
background-image: url(images/cloudbottom.png);
background-attachment: fixed;
display: block;
margin-left: auto;
margin-right: auto;
background-repeat: no-repeat;
}
#Layer1 {
width:100%;
height:158px;
background-image: urlimages/grass.gif);
background-repeat: repeat-x;
background-position: bottom center;
background-attachment: scroll;
}



-->
</style>
<script type="text/JavaScript">
<!--
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</head>

<body onload="MM_preloadImages('images/cloud-head-tongue.png')">
<table width="850" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td><div align="center"><img src="images/anchors.png" width="650" height="25" /></div></td>
</tr>
</table>

<div align="center"><img src="images/cloud-head-pink.png" name="Image1" width="1000" height="220" border="0" align="center" usemap="#Map" />
<map name="Map" id="Map">
<area shape="rect" coords="229,47,827,214" href="pages/spunkymonkey.htm" onmouseover="MM_swapImage('Image1','','images/cloud-head-tongue.png',1)" onmouseout="MM_swapImgRestore()" />
</map>


</div>
<table width="1000" border="0" align="center" cellpadding="0" cellspacing="0" class="greentable">
<tr>
<td>
<table width="850" border="0" align="center" cellpadding="0" cellspacing="10">
<tr>
<td>
<div align="center">

<script language="php">include ("$Home_Path/$Inc_Dir/pagelist_horizontal.php");</script></div></td>
<td><script language="php">include ("$Home_Path/$Inc_Dir/search_catalog.php");</script></td>
</tr>
</table>
</td>
</tr>
</table>




<table width="1000" border="0" align="center" cellpadding="0" cellspacing="0" class="greentable">
<tr>
<td>
<table width="850" border="0" align="center" cellspacing="10" bgcolor="#FFFFFF">
<tr>
<td width="636" valign="top">
<div align="center">
<script language="php">include ("$Home_Path/$Inc_Dir/title.php");</script>
</div>
<div align="left">
<script language="php">include("$Home_Path/$Inc_Dir/content.php");</script></div></td>
<td width="180" valign="top"><div align="left">Newsletter Signup, Coupon, Etc Here</div></td>
</tr>
</table>
</td>
</tr>
</table>
<img src="images/cloudbottom.png" width="1000" height="145" class="cloudfoot" />
<div id="Layer1"></div>
</body>
</html>

Hey,
I think i just need someone else to look at this for me. I've been coding all day and would probably be able to figure this out if I just went to bed and did it tomorrow. If you roll over an image that's alson an anchor at www.deeperdevotion.com/wp, you'll find that it places a background-color or underline or both on it. The thing is, I can't find the code in my CSS that's causing me the trouble.

my css is located at www.deeperdevotion.com/wp/wp-content/themes/dd/styles/101106.css

Thanks.

Hello. I am new at css and web design so if these are easy problems please excuse.

First of all, the website url

http://www.onlinecasinoboss.com

In Firefox, the unordered lists <ul> in the left column do not display correctly. The left margin is way too big. I'm not sure why, please look at the page in IE to see what I want it to look like.

And in Internet Explorer, the spacing between my top image, header bar, and main page is screwy. There should be no space between the header image and header bar (the flags are in this area). Also there should only be 2px spacing between the header and the main page, however it appears there is atleast 24px there. Again please refer to the page in FF to see what I want it to look like.

I like css, and have decided to pursue my first design in css based off of the many professional designers reconmendations and reviews. But I must say it is a major headache to deal with cross-browser/platform display problems. And what professional designer wants to rely on 'css-hacks' when producing a product for a major vender.

Just beginner bitching.

Thanks for the help!

Hello everyone, I am hoping I could get some help on this.

I'm the new Marketing guy at this company. One of my duties is to fix an issue with our website which was built by the last guy to sit in this chair. I may not know how to build a proper webpage, but this guy knew exactly how not to do it and ran with just that.

So, the issue lies within this example page:
tinyurl.com/rediculouswebsite


The footer ends up under-lapping the table when viewed in IE (when not in compatibility mode) and Firefox.

I know this is a ridiculously constructed site, I just need to fix this one problem and be done with web development forever. High fives and scotch from my boss very well may ensue.

Thank you all very much.

Hi all...I am simply trying to create a header (colored bar). Every thing is fine, even in IE 8 but when it comes to IE 6, the bar does not appears. The code is simple

CSS code is

Code:

#css
{
position:absolute;
top:0px;
height:30px;
right:0%;
left:0%;
background-color:#805670;
border-style:solid;
border-width:thin;
border-color:#805670;
padding-top:12px;
}

and I have just added this line in my .php page

Code:

<div id="mybio"></div>

What can be the problem??

Hi, I am having an issue using my CSS code, I have a drop down section on my menu bar on my site.

I'm trying to firstly just set the background of the whole bar,

Code:

#nav-m {
  font: normal 12px Verdana;
  font-weight: bold;
  width: 100%;
}
  
	#nav-m ul {
	  float: left;
	  left: 0;
	  padding: 2px 0;
	  text-decoration: none;
	  text-indent: 5px;
	}
  
	  #nav-m a {
		  display: block;
		  width: 10em;
		  w\idth: 6em;
		  color: #012345;
		  text-decoration: none;
		  padding: 0.25em 2em;
	  }
  
	  #nav-m a.daddy {
	  }

	  #nav-m li {
		  float: left;
		  padding: 0;
		  background-image: url(http://taxbusters.eu.com/images/nav-bar1.jpg);
		  background-repeat: no-repeat;
	  }

	  #nav-m li ul {
		  position: absolute;
		  left: -999em;
		  height: auto;
		  width: 14.4em;
		  w\idth: 13.9em;
		  font-weight: normal;
		  border-width: 0.25em;
		  margin: 0;
	  }
  
	  #nav-m li li {
		  padding-right: 1em;
		  width: 13em
	  }

	  #nav-m li ul a {
		  width: 13em;
		  w\idth: 9em;
	  }

	  #nav-m li ul ul {
		  margin: -1.75em 0 0 14em;
	  }
	  
	  #nav-m li:hover ul ul, #nav-m li:hover ul ul ul, #nav-m li.sfhover ul ul, #nav-m li.sfhover ul ul ul {
	  left: -999em;
	  }
	  
	  #nav-m li:hover ul, #nav-m li li:hover ul, #nav-m li li li:hover ul, #nav-m li.sfhover ul, #nav-m li li.sfhover ul, #nav-m li li li.sfhover ul {
	  left: auto;
	  }

	  #nav-m li:hover, #nav-m li.sfhover {
	  background: #bdd7e6;
	  }

however the background doesnt show up, and the font alignment isnt right, - there are so many problems

http://alturl.com/nfkp

Hello everyone,

for our intranet I have developed new application tools with tabs to change icons. it is working fine on IE7+ but having problem with IE6.

there are two divs in this applications and on IE 7+ both divs starts in new line. for some reasons in IE6 it comes in one line. what cna I put in the second div that will make it appear on new line. I have tried putting <p> tag but doesn't make any different.

Any suggestions.

thank you.

<div id="mytabsmenu" class="tabsmenuclass">
<span style="cursorointer">
<ul>
<li><a rel="gotsubmenu[selected]">Trust Applications</a></li>
<li><a rel="gotsubmenu">General Applications</a></li>
</ul>
</span>
</div>


<div id="mysubmenuarea" title="Applications Toolbar" align="center" style=" background-image:url(/templates/default/IconImages/iconBkgrd.jpg); background-position:top; background-repeat:no-repeat; margin:2px; padding-top:12px; padding-left:30px; vertical-align:bottom; height:50px;">

<!--1st link within submenu container should point to the external submenu contents file-->
<a href="/templates/default/js/submenucontents.htm" style="visibility:hidden">Sub Menu contents</a>
</div>

I am currently trying to build a website for a church, and have run into a little css coding problem:

It seems as if the browser is not interpreting how I see the CSS code to lay out on the page (common mistake I'm sure). I know a lot of the problems I am having comes from the height of my id's. If you take a look at "sci.tamucc.edu/~ksnapka/Website/Home/index.php" , the blue-bordered box is my "bodyWrap" css id. I am wanting this to expand to 100% of its contents inside the div container. If you look under some of the pages under "Our Faith in Action", I believe these work fine because I am using text inside of the bodyWrap container instead of other div containers nested in bodyWrap. The display on the home page actually looks better on IE, so I'm also not sure why firefox sets the height of that contained to 0 (I assume for some reason it sees that the container is empty since it just has other divs located inside of it?)

The CSS code is on "sci.tamucc.edu/~ksnapka/Website/CSS/csTemplates.css"


Any help is greatly appreciated Thank you in advance.

Hello all.

I've just started learning to code because I recently started a business and needed a website. I'm having a few issues.

I'm using the 960 Grid System plus a scroller found at queness.com

I can't post links here apparently, or I'd show you what I'm using.

The page renders fine in Firefox (Mac & PC) Safari (Mac & PC) IE 8 and Chrome.

IE 6 is screwed beyond understanding.

IE 7 Pushes me off the screen and links don't work.

And Opera squeezes my text together.

I have screen shots if necessary.

Here is a link to the site in question: ohmyyoga.com

I inserted a redirect script for IE 6-7. So you'll be redirected to my old site if you try the regular URL from either of those browsers. For the purposes of this, I've copied the site W/O the redirect.

The link is test2.ohmyyoga.com

The site validates CSS and XHTML. I'm sure it's something super simple. I'm just brand new to all of this. Any help would be appreciated.

Cheers

I have created a nav bar with css using the widely distributed '<ul>' coding. The problem I am having I think is with the anchor tags. The look of the nav bar is fine but depending on the float position the anchor tag immediately next to it won't follow the css.

Here is the css..
body {
margin:0;
padding:0;
}
div.container {
text-align:center;
}
div.center {
margin-top:20px;
margin-left:auto;
margin-right:auto;
width:800;
text-align:left;
}
div.left {
float:left;
width:100;
height:500;
background-color:#007700;
}
div.right {
float:right;
width:130;
height:500;
background-color:#e8e8e8;
font-size:10pt;
}
div.header {
clear:both;
width:40%;
}
div.footer {
clear:both;
margin:0;
width:100%;
}
ul {
float:left;
width:100%;
padding:0;
margin:0;
list-style-type:none;
}
a.topmenu {
float:right;
width:5em;
height:2em;
text-decoration:none;
color:#005500;
background-color:#e8e8e8;
padding:0.2em 0.6em;
border-right:1px solid #005500;
}
a.topmenu:hover {
background-color:#005500;
color:#e8e8e8;
}
a.topmenu:visited {
float:right;
width:5em;
text-decoration:none;
color:#005500;
background-color:#e8e8e8;
padding:0.2em 0.6em;
border-right:1px solid #005500;
}
li {
display:inline;
}
a.leftmenu {
color:#ffffff;
text-decoration:none;
}
a.leftmenu:hover {
color:black;
}
a.leftmenu:visited {
color:#ffffff;
text-decoration:none;
}

and here is the html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<link rel="stylesheet" type="text/css" href="newstyle.css"/>
</head>
<body>
<div class='container'>
<div class='center'>
<img src="fdat_logo_short.jpg" width=250 />
<ul>
<li><a class='topmenu' href="contact.php">Contact Us</a></li>
<li><a class='topmenu' href="about.php">About Us</a></li>
<li><a class='topmenu' href="services.php">Services</a></li>
<li><a class='topmenu' href="news.php">News</a></li>
<li><a class='topmenu' href="home.php">Home</a></li>
</ul>
</div>
</div>
</body>
</html>

I have a big problem with css in both IE and FF I don't know what's going on i'm making a navigation menu with submenu from some elements when i display the submenu from the element the square bullets isn't displayed beside the list item from the submenu and it's required in firefox and even the hover effect isn't displayed correct in FF also and it's displayed in IE correctly and in some page the conetnt was wholy distroyed in IE and display correct in FF with it's bugs and in dream weaver the design is going ok and i'm using a strict DTD i don't know what's wrong and what's going on ???

Hello all,
Apologies to be asking for help on my first post, but I've scoured the internet looking for what is probably a quick fix but without the terminology I'm losing hours - time to ask for help!

my site is englas.pl and in forefox it's fine. In ie8 it seems to be fine as well, the problem is with ie 6&7. The CSS validates according to the w3c site. (Sorry, can't add urls as i'm a new user)

ie6&7 'cuts' off the bottom section of text where the container meets menu-bottom-bkg. At least this is what is visibly the case when you look at the webpage.

The custom div look like this:
#container {
background: #FFF url(../images/bkg_container.png) repeat-y;
min-height: 100%;
width: 1190px;
margin: 0 auto;
padding: 0 14px 0 14px;
}

#header {
background: url(../images/bkg_header.png);
height: 127px;
width: 1160px;
margin: 0;
padding: 15px 0 0 30px;
}

#menu-top-bkg {
background: url(../images/bkg_menu_top.png) no-repeat left top;
height: 128px;
width: 1190px;
margin: 0 0 -128px 0;
}

#wrapper {
overflow: auto;
background: url(../images/bkg_menu.png) repeat-y left;
min-height: 500px;
width: 1190px;
margin: 0;
padding: 0;
}

#menu {
float: left;
background: none;
min-height: 370px;
width: 159px;
margin: 0;
padding: 110px 0 0 0;
}

#content {
float: right;
background: url(../images/bkg_content.png) no-repeat right top;
min-height: 400px;
width: 763px;
margin: 0 0 0 25px;
padding: 15px 243px 10px 0;
}

#menu-bottom-bkg {
background: url(../images/bkg_menu_bottom.png) no-repeat;
height: 141px;
width: 1190px;
margin: -111px 0 0 0;
}

#footer {
background: url(../images/bkg_footer.png);
height: 100px;
width: 1190px;
margin: 0;
padding: 16px 0 0 0;
}

I've gone through the html and i can't find any evidence of it being this, so i'm hoping that the css work above doesn't comply with something in the ie6&7 coding spec.

I've read the guidelines to posting, so I've edited the post as much as possible to be helper friendly!
Many thanks to all,
doodlebug

Hi i have built a navigation system with css controled list, with dropdown effects that works well in both IE6 and FF 1.5 but the problem is that in FF the menu bar is not taking all the space that it is given to him (750px) on the right end of the menu navigation bar there is a white space that i can't get ride of. The navigation bar background is orange!

In IE there is no problem the entire navigation bar is Orange, but in FF there is 6px white space on the right end!

here si the code, i have added background almost everywhere to make taht space the same color as the rest of the menu but it doesn't help!


CSS
Code:

/* Positionning & Structure of 1st Level Menu */
#navigation {
	margin: 0;
	padding: 0;
	list-style: none;
	width: 750px;
	display: block;
	background-color: #DA5D09;
	}
/* Positionning & Structure for Sub-Menus */
#navigation ul{
    display:block;
    /*margin:0;*/
    padding:0;
    list-style: none;
    margin: 0;
    background-color: #DA5D09;
    border-style: solid;
    border-color: #fff;
    border: 1px;

    }
	
#navigation li ul {
	position: absolute;
	top: 173px;
	display: none;
	}

/* Structure for 1st level Menu Items */
#navigation li {
    list-style: none;
    width: 124px;
    height: auto;
    display: block;
    float: left;
    margin: 0;
    padding: 0;
    background-color: #DA5D09;
	}
/* Structure for Sub-Menu Items */
#navigation li li {
  display: block;
    float: none;
    margin: 0;
    padding: 0;
    list-style: none;
    width: 124px;
}


/* Styles for 1st level Menu Items */
#navigation li a{
    text-align: center;
    background: #DA5D09;
    border-width: 0 2px 0 0;
    border-color: #fff;
    border-style: solid;
    color: #fff;
    font-size: 11px;
    font-weight: bold;
    display: block;
    text-decoration: none;
    padding: 10px 0;
    margin: 0;
        }
/* Styles for Sub-Menu Items */
#navigation li li a{
    text-align:left;
    background: #DA5D09;
    border-width: 1px 0 0 0;
    border-color: #fff;
    border-style: solid;
    font-size: 10px;
    display: block;
    text-decoration: none;
    padding: 5px;
    margin: 0px;
        }
/* The magic */
#navigation li:hover ul, #navigation li.over ul { display: block; }

The XHTML
Code:

<ul id="navigation">
    <li><a href="#">Home</a></li>
    <li><a href="#">Features</a>
      <ul>
        <li><a href="#">Muzik News</a></li>
        <li><a href="#">Interviews</a></li>
        <li><a href="#">Reviews</a></li>
      </ul>
    </li>
    <li><a href="#">Lifestyle</a>
      <ul>
        <li><a href="#">Urban reports</a></li>
        <li><a href="#">Style & Gear</a></li>
        <li><a href="#">Sports Corner</a></li>
      </ul>
    </li>
    <li><a href="#">Community</a>
      <ul>
        <li><a href="#">Forums</a></li>
        <li><a href="#">Gallery</a></li>
        <li><a href="#">Calendar</a></li>
      </ul>
    </li>
    <li><a href="#">Muzik</a>
      <ul>
        <li><a href="#">Muzik Lounge</a></li>
        <li><a href="#">Online Radios</a></li>
      </ul>
    </li>
    <li><a id="lastright"  href="#">Muzik Store</a></li>
  </ul>

The navigation UL is included in a global div (that contains the entire page) of 750 px as well!

I am a real newbie with css based design so you might notice my code is not very logic all the time and has a lot os redundancy but at least i am trying to convert to this new paradigm!

Thx in advance for the help!