Does Anyone Know How To fix This

**andyp** · 02-21-2008, 11:04 AM

I've Got A problem With my CSS I Have two divs one called irightcolumn & rightcolumn. The irightcolumn is the inner right column and right column is the far right column. but its doing the complete opposite and making the rightcolumn the iright column and vice versa .
Any ideas as how to get them the right way round my site is at http://ap-gfx.com/joomla

**colbyt** · 02-21-2008, 11:36 AM

I don't know if this is the right way to do it or not.

I have 3 columns. Two floated left and one floted right.

Then it is just amatter of where you open and close the divs to to get the look and placement correct.

Both of the sites in my sig uses that format. Copy the CSS for a study guide.

**audiomad** · 02-21-2008, 11:37 AM

Try changing the div layer order around put the divs at the top of your html to the bottom and the bottom ones to the top. This could be the problem I have noticed this when doing stuff my self.

**LadynRed** · 11:45 AM

Of course - I know how to fix it.. but you need to learn how yourself.

Some things that need to be addressed:
- zero out your margins and padding for all elements from the very start.
- avoid putting margins on a floated element that is in the same direction as the float: ie. don't put a right margin on a right-floated box, and the same for a left float. This will cause IE's doubled-float margin bug.
- mind your widths - the sum of the parts inside a container cannot be wider than the container or you'll get float-drop. LEARN THE BOX MODEL !

You have a 5px margin on almost every box, this is not a good practice.
You also have a 300px wide div sitting inside a 200px wide div.. do the math.

Given all that, this works properly:

Quote:

body, #wrapper, #header, ul, li, a, p, #irightcolumn, #rightcolumn, #ileftcolumn, #leftcolumn{
margin: 0;
padding: 0;
}

body,html
{
background-color:#131422;
font-family: verdana;
font-size: 16px;

}
#wrapper
{
width: 920px;
position: relative;

}
#header
{
height: 80px;
background-color: #0099FF;
}
#leftcolumn
{
width: 120px;
height: auto;
float: left;

}
#ileftcolumn
{
width: 400px;
height: auto;
float: left;
/*margin: 5px;*/
margin-top: 0px;
}
#irightcolumn
{
width: 200px;
float: left;
/*height: auto;*/
color: white;

}
#rightcolumn
{
width: 200px;
float: left;
height: auto;
color: #000;
background: white;
/*border: 1px solid red;*/
}
#nav
{
width: 120px;
height: 250px;
border: solid 1px #000000;
/*margin: 5px;*/
background-color: #12102a;
}
#introbox
{
width: 400px;
height: 150px;
border: solid 1px #000000;
/*margin: 5px;*/
background-color: #4e517d;
}
#latestarticles
{
width: 200px;
height: 300px;
border: solid 1px #000000;
/*margin: 5px;*/
}
#login
{
width: 100px;
height: 100px;
border: solid 1px #000000;
/*margin: 5px;*/
}
.banner
{
width: 400px;
height: 60px;
border: solid 1px #000000;
/*margin: 5px;*/
background-color: #c0542e;
}
#newqanda
{
width: 400px;
height: 200px;
border: solid 1px #000000;
/*margin: 5px;*/
}
#xbox360times
{
width: 332px;
height: 170px;
border: solid 1px #000000;
/*margin: 5px;*/
float: left;
}
.boxheader
{ border-bottom: solid 1px #000000;
background-color: #292a4a;
height: 40px;
font-size: 25px;
}
.clear
{
clear: both;
}
.brclear { /* Use a break with this class to clear float containers on both sides */
clear:both;
height:0;
margin:0;
font-size: 1px;
line-height: 0;
}
.symbol
{
font-family: webdings;
font-size: 35px;
float: left;
}
li.light
{
list-style: none;
background-color: #4e517d;
}
li
{
list-style-type: none;
}
li.dark
{
list-style-type: none;
background-color: #1d1d32;
}

Quote:

<!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>[title]</title>

<link href="%5Btitle%5D_files/style.css" rel="stylesheet" type="text/css"><link href="%5Btitle%5D_files/highlighter.css" type="text/css" rel="stylesheet"></head><body>
<div id="header"></div>
<div id="wrapper">

<div id="leftcolumn">
<div id="nav"></div>
</div>


<div id="ileftcolumn">
<div id="introbox">Ap-gfx is for programmers,
gamers and graphics artists alike. Our aim is to provide people one
goal.to help them collaborate with other like minded peopl. We have our
own clans dedicated to all sorts of games and tutorals
</div>
<div class="banner"></div>
</div>


<div id="irightcolumn">
<div id="latestarticles">
<div class="boxheader">
<div class="symbol">8</div>
Latest Articles
</div>
<ul>

<li class="light">how do i</li>
<li class="dark">lorem</li>
<li class="light">ipsum</li>
<li class="dark">dolar</li>
<li class="light">lorem</li>
<li class="dark">ipsum</li>
<li class="light">dollar</li>
<li class="dark">lorem</li>
<li class="light">ipsum</li>
<li class="dark">dolar</li>
<li class="light">lorem</li>
<li class="dark">ipsum</li>
<li class="light">dollar</li>
<li class="dark">ipsum</li>
</ul>
</div> 

</div>

<div id="rightcolumn">
Login Box Goes Here
</div>
<br class="brclear" />
</div>

<br class="brclear" />
</body>
</html>

Oh.. and that whole header nonsense with the "8 latest articles' - you don't need all those divs, you shouldn't use divs. Use a proper Hx (heading) and use spans to style it.