1 reply [Last post]
mike12255
Offline
Regular
stayner
Last seen: 7 years 51 weeks ago
stayner
Timezone: GMT-5
Joined: 2009-09-16
Posts: 26
Points: 27

No matter how many tutorials i read i cant seem to get this to work i got three columns #left_col #right_col and #mid_col but i cant seem to get them to go in a row can anyone help me with this??

my html AND CSS:

<!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>Untitled Document</title>
<style type="text/css">
* {
	margin:0;	
		padding:0px;
}
#holder{
	width:900px;
	background-color:#FFF;
	margin-left:auto;
	margin-right:auto;
}
#header{
	width:900px;
	background-color: #999;
	height:118px;
}
#nav{
width:900px;
background-image:url(images/index_r2_c1.gif);
}
#acc_box{
width:900px;
background-color:#FFF;
}
.tb3{
border:#CCC 2px solid;	
height:15px;
}
.tb2{
border:#CCC 2px solid;	
}
.login{
	background-image:url(images/button2.gif);
	height:21px;
	width:42px;
	margin-top:0;	
	margin-bottom:4px;
}	
 
#left_col{
position:relative;
margin: 0;
width:30%;
background-color:#FFF;
float:left;
z-index:100;
 
}
#right_col{
margin: 0;
width:30%;
background-color:#FFF;
float:right;
z-index:99;
 
}
#middle_col{
	z-index:95;
	margin: 0;
	width:40%;
	background-color:#FFF;
}
#spacer{
width:900px;
 
}
 
body {
	background-color: #333;
 
}
 
</style>
 
</head>
<body>
 
<div id="holder">
<div id="header">
.
</div>
<div id="nav">
 
Home  |  My Account  |  Leagues  |  Tournaments  |  Anti-Cheat Client
<img src="images/index_r3_c1.gif" />
</div>
<div id="acc_box"><form action="login.php?page=index.php" method="post">
<img src="images/accguy.png" /> Username: <input name="username" class="tb3" type="text" /> Password: <input name="username" class="tb3" type="password" /> <input name="submit" class="login" type="submit" value="" /> <input name="register" type="button" value="Sign Up" /> Choose Division 
 
  <select class="tb2" name="divison">
    <option>Wolf:Enemey Territory</option>
    <option>Counter Strike</option>
 
    <option>Call Of Duty 5</option>
    <option>Trackmania</option>
  </select></form>
</div>
<div id="spacer">
<img src="images/index_r3_c1.gif" />
</div>
 
<div id="left_col">
  <p><img src="images/index_r7_c1.gif"/></p>
  <p>&nbsp;</p>
 
</div>
<!--Left Col Ends-->
<div id="middle_col">
<p><img src="images/middle.png" /></p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
</div>
 
<div id="right_col"><img src="images/index_r7_c1.gif" alt=""/></div>
</div>
</body>
</html> 

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 10 years 5 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

3-col

Since you have your HTML in order of left, middle, and right, the tuts you should be looking at need that order as well. There are 3-col tuts where the middle comes first in the code.

Here's how it goes with floats: if the float comes before the static (non-floated) box, then it'll look like it's sitting alongside it, but if the float comes AFTER, it sits on a new line.

So I'll bet what you have is middle and left ok but right always drops down below, right?

In your HTML, move your right side up above middle's code. So that your source order is
left
right
middle

then, don't put a width on middle. Unless you calculate it perfectly, some browser is going to take 30% + 30% + 40% and get 101% or something. So leave middle's width out. Since middle isn't floated, it'll try to fill up all the remaining space in the middle anyway.

But if it has a background colour, you may see a difference between IE and modern browsers. With no width or height or anything set on middle, give middle instead some side margins:

#middle_col{
	margin: 0 30%;
	background-color:#FFF;
}

You had z-index on middle. Don't. Z-index is something that you can only state on positioned boxes anyway. And left doesn't need any positioning either. Z-index should only ever show up in your code to get around a browser bug and when you are playing with absolutely positioned things for some funky flashy effect. Otherwise, leave it.

*edit: if you need to keep the source left middle right, then you'll need to do something different.

Left and middle would both need to be floated left, and right floated right still. Then, to prevent some browsers from dropping the right side anyway, I'd either change %'s to pixels (since your container for the whole page is set in pixels) OR make middle something less than 40% (like 39% or 38%) to compensate.
Remember that padding and margins count as width as far as containers are concerned.

I'm no expert, but I fake one on teh Internets