Making 3 columns but DIVs dont stay next to eachother

Alright well i started creating a local website for my self and i wanted to have 3 columns
1st column on the left to be a menu,2nd column to be the main content of the website and the 3rd column(as big as the first one) for extras.
now i’ve managed to get the 1st and the 2nd together but the third one won’t come next to the 2nd one, it stays under it -.-
heres the code for it all:


<html>
<head>
<title>Imad Nowsharis football page</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="header">
<p>Hello world!</p>
<a href="http://www.fussballdaten.de" target="new"><img src="bayern2.gif" border="0" title="BayernLogo"></a>
<br />
</div>
<div class="menu">
<p>menu</p>
<ol>
<li><a href="http://www.fussball-web-shop.de/shop/index.php?lang=DEU&list=BAYERN-M%DCNCHEN%20FANAR" target="new">To WebShop</a></li>
<li><a href="http://www.fcbayern.telekom.de/de/mannschaften/profis/index.php?fcb_sid=1a702b8c99685e679715a05c4fb001ea" target="new">Team</a></li>
</ol>
</div>
<!--
<div class="abstand">
<p>&nbsp;</p>
</div>
-->
<div class="content">
<h3>Spiele Highlights</h3>
<table border="0" cellpadding="0" cellspacing="10">
	<tr>
	<td><a href="http://www.youtube.com/watch?v=tDraYtESG9w" target="new"><img src="bayerngame.jpg" border="0" title="Bayern Gegen Mainz"></a><br />
	 Bayern Gegen Mainz 19.02.11 Spielstand: 3-1 </td>
	<td><p>&nbsp;</p></td>
	<td><a href="http://www.youtube.com/watch?v=X9RithjlRqw" target="new"><img src="bayernhoff.jpg" border="0" title="Bayern Gegen Hoffenheim"></a><br />
	 Bayern Gegen Hoffenheim 12.02.11 Spielstand: 4-0 </td>
</tr>
<tr>
	<td><a href="http://www.youtube.com/watch?v=4kfk3YU5yls" target="new"><img src="inter.jpg" border="0" title="Bayern Gegen Inter"></a><br />
	Baynern Gegen Inter CL finale 22.05.10 Spielstand: 0-2 </td>
<p>&nbsp;</p>
	<td><p>&nbsp;</p></td>
	<td><a href="http://www.youtube.com/watch?v=Ho3ycSxhofg" target="new"><img src="juventus.jpg" border="0" title="Bayern Gegen Juventus"></a><br />
	 Bayern Gegen Juventus 9.12.09 Spielstand: 4-1 </td>
</tr>
<tr>
	<td><a href="http://www.youtube.com/watch?v=zldvn4XyhiU&feature=related" target="new"><img src="manu.jpg" border="0" title="Bayern Gegen ManchesterUnited"></a><br />
	Bayern Gegen Manchester United CL 30.03.10 Spielstand: 2-1 </td> 
	<td><p>&nbsp;</p></td>
	<td><a href="http://www.youtube.com/watch?v=krn-NgChMlM&feature=related" target="new"><img src="vfl.jpg" border="0" title="Bayern Gegen Bochum"></a>
	Bayern Gegen Bochum 12.12.09 Spielstand: 5-1	</td>
</tr>
</table>
<p>content</p>  
</div>
<div class="extras">
<table><h3>Tabelle</h3></table>
<table border="1" cellpadding="0" cellspacing="0">
	<tr>
		<td><a href="http://www.bvb.de" target="new">1.Dortmund</a></p></td>
		<td><p>55</p></td>
	</tr>
	<tr>
		<td><a href="http://www.bayer04.de" target="new">2.Leverkusen</a></p></td></td>
		<td><p>45</p></td>
	</tr>
		<tr>
		<td><p><a href="http://www.fcbayern.telekom.de" target="new">3.München</a></p></td>
		<td><p>42</p></td>
	</tr>
		<tr>
		<td><p><a href="http://www.hsc-hannover.de/" target="new">4.Hannover</a></p></td>
		<td><p>41</p></td>
	</tr>
		</tr>
		<tr>
		<td><p><a href="http://www.mainz05.de/" target="new">5.Mainz</a></p></td>
		<td><p>37</p></td>
	</tr>
		</tr>
		<tr>
		<td><p><a href="http://www.scfreiburg.com/" target="new">6.Freiburg</a></p></td>
		<td><p>37</p></td>
	</tr>
		</tr>
		<tr>
		<td><p><a href="http://www.hsv.de" target="new">7.HSV</a></p></td>
		<td><p>36</p></td>
	</tr>
		</tr>
		</tr>
		<tr>
		<td><p><a href="http://www.fcn.de/" target="new">8.FC Nürnberg</a></p></td>
		<td><p>35</p></td>
	</tr>	
		<tr>
		<td><p><a href="http://www.achtzehn99.de/" target="new">9.Hoffenheim</a></p></td>
		<td><p>33</p></td>
	</tr>
		</tr>	
		<tr>
		<td><p><a href="http://www.schalke04.de" target="new">10.Schalke 04</a></p></td>
		<td><p>29</p></td>
	</tr>	</tr>	
		<tr>
		<td><p><a href="http://www.fcstpauli.com" target="new">11.St. Pauli</a></p></td>
		<td><p>28</p></td>
	</tr>
</table>
<br />


</div>
</body>
</html>
CSS style:
body {
  background-color:#1b7b7c;
}
p {
  color:#ffffff;
  font-family:verdana, arial; 
  font-size:12px;
  line-height:100%;
}
div.header {
  margin:20px 0 0 20px;
  padding:20px 0 0 20px;
  border:1px;
  border-style:solid;
  border-color:#ff0000;
  width:800px;
  height:100px;
}
div.menu {
  margin:20px 0 0 20px;
  padding:20px 0 0 20px;
  border:1px;
  border-style:solid;
  border-color:#ff00ff;
  width:150px;
  height:300px;
  float:left;
}
div.abstand {
  margin:20px 0 0 20px;
  padding:20px 0 0 20px;
  border:1px;
  border-style:solid;
  border-color:#ff00f0;
  width:10px;
  height:300px;
  float:left;
}
div.content {
  margin:20px 0 0 200px;
  padding:20px 0 0 20px;
  border:1px;
  border-style:solid;
  border-color:red;
  width:480px;
  height:600px;
}
div.extras {
  font-family:arial;
  font-size:12px;
  margin:20px 0 0 690px;
  padding:20px 0 0 20px;
  border:1px;
  border-style:solid;
  border-color:blue;
  width:110px;
  height:300px;
}
div.footer {

}
td {
  color:white;
  font-family:arial,verdana;
  font-size:12px;
}
a {
  color:white;
  text-decoration:none;
}

Thanks for the help
Uhmad

make the right column float right.
left one float left.
middle one without any float but with left and right margin equal to the width of the left and right column.

ah, this doesn’t seem to work either, the left column and the middle column are fine but the right one is floating on the right side but lower on the page than the other 2 :frowning:

There are many templates for 3cols, Paul has a lot of them: http://www.pmob.co.uk/temp/3colfixedtest_4.htm

Here’s a simplified one.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
  "http://www.w3.org/TR/html4/strict.dtd">

<html lang="en"><head>

  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>3cols</title>

  <style type="text/css">
    #pageWrapper {
        width:960px;
        background:black;
        height:200px;
        position:relative;
        margin:0 auto;
      }
      
      #content {
          margin:0 210px 0;
          height:100%;
          background:yellow;
        }
        
      #menu, #extras {
          width:200px;
          height:100%;
        }
        
      #menu {
          float:left;
          background:red;
        }
        
      #extras {
          float:right;
          background:blue;
        }
  </style>

</head><body>
  <div id="pageWrapper">
  
    <div id="menu"></div>
    <div id="extras"></div>
    <div id="content"></div>
        
  </div>
</body></html>

You’ll notice that floats come first in this mark up.

ah it didn’t seem to work with your code either but my teacher showed me the answer and how to make them stay next to eachother :slight_smile:
:


<html>
<head>
<body>
<title>ImadTest</title>
<link rel="stylesheet" type="text/css" href="stylesheetmodel2.css">
</head>
<body>
<div class="wrapper">
    <div class="header">
    header
    </div>
    <div class="menu">
    menu
    </div>
    <div class="content">
    content
    </div>
    <div class="extras">
    extras
    </div>
    <div class="footer">
    footer
    </div>
</div>
</body>
</html>

 :
body {
  margin:auto;
  padding:0px;
  background-color:#1b7b7c;
}
p {
  color:#ffffff;
  font-family:verdana, arial; 
  font-size:12px;
  line-height:100%;
}
div.wrapper {
  background-color:#ffa;
  width:800px;
  height:100px;
  margin:auto;
}
div.header {
  background-color:#ffa;
  width:800px;
  height:100px;
}
div.menu {
  background-color:#ff5;
  margin-right:-4px;
  width:150px;
  height:300px;
  display:inline-block;
}
div.content {
  background-color:#ffd;
  margin-right:-4px;
  width:540px;
  height:300px;
  display:inline-block;
}
div.extras {
  background-color:#ff5;
  width:110px;
  height:300px;
  display:inline-block;
}
div.footer {
  background-color:#afa;
  width:800px;
  height:100px;
}
td {
  color:white;
  font-family:arial,verdana;
  font-size:12px;
}
a {
  color:white;
  text-decoration:none;
}

Unfortunately that wont work in IE6 or 7 so 20% of your audience will be missing :slight_smile: (There is a fix for IE6 and 7 so hopefully your teacher will supply you with that also ;))

I do hope that you have a valid doctype with that code or it won’t work in IE8 either. You must always have a full and valid doctype - even with demo code.

Setting heights on your columns is unworkable so don’t do that as the content won’t be able to grow (although I guess you only added heights for the demo).

Why is your wrapper only 100px high yet the content is much taller than that?

Try knocking up the text 1 size via the browser controls and see what happens in Firefox. The negative margin doesn’t really fix the white space bug properly. You can see the proper way to fix the inline-block white space bug here.

oh gosh, i see what you mean now, if i add text to it the divs will only move around -.-
i’m not really sure why the height is only 100 and the content is alot higher :S

Could you be more specific about what exactly “is not working”? Maybe post the code you’ve used based on what I suggested?

In your original example you just needed to float the other two columns (although there is some other tidying up to do also).


div.content {
 [B] margin:20px 0 0 10px;[/B]
  padding:20px 0 0 20px;
  border:1px;
  border-style:solid;
  border-color:red;
  width:480px;
  [B]  float:left;[/B]
}
div.extras {
  font-family:arial;
  font-size:12px;
 [B] margin:20px 0 0 10px;[/B]
  padding:20px 0 0 20px;
  border:1px;
  border-style:solid;
  border-color:blue;
  width:110px;
[B]    float:left;
}[/B]


noonnopes code was working fine also so you may need to say what’s going wrong.

When you want elements next to each other in a fixed width layout you can float them all next to each other with appropriate widths. Or you can float left and right columns and then let the middle column wrap up inside as per noonnopes example.

Or you can use inline-block but you have to add hacks for IE6/7 and the whitespace bug as already mentioned.