SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Member
    Join Date
    Feb 2011
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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:
    Code HTML4Strict:
    <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
    Attached Images Attached Images
    • File Type: jpg 2.JPG (98.9 KB, 4 views)
    Last edited by molona; Feb 23, 2011 at 08:14.

  2. #2
    SitePoint Wizard webcosmo's Avatar
    Join Date
    Oct 2007
    Location
    Boston, MA
    Posts
    1,480
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    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.

  3. #3
    SitePoint Member
    Join Date
    Feb 2011
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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
    Attached Images Attached Images

  4. #4
    Non-Member
    Join Date
    Jun 2010
    Location
    47°27′35″N 26°18′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

    Code:
    <!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.

  5. #5
    SitePoint Member
    Join Date
    Feb 2011
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Smile

    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
    :
    Code:
    <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;
    }
    Last edited by Paul O'B; Feb 24, 2011 at 03:25. Reason: code tags added

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,513
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by Uhmad View Post
    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
    :
    Unfortunately that wont work in IE6 or 7 so 20% of your audience will be missing (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.

  7. #7
    SitePoint Member
    Join Date
    Feb 2011
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  8. #8
    Non-Member
    Join Date
    Jun 2010
    Location
    47°27′35″N 26°18′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Uhmad View Post
    ah it didn't seem to work with your code either
    Could you be more specific about what exactly "is not working"? Maybe post the code you've used based on what I suggested?

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,513
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    In your original example you just needed to float the other two columns (although there is some other tidying up to do also).

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

    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.


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •