If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 3 of 3
  1. #1
    Junior Member
    Join Date
    Aug 2010
    Member #
    Okay I need some help. For my website I want a two cloumn website look with a header on top. Something Like this:
    Column1 Column 2
    (Nav Bar) (Content)

    Pretty simple. Expect for the fact that I can't get the two columns next to each other.I'm using CSS and HTML. Also in the nav bar I want the buttons to be flush with the left side of the screen but thats not working either.
    Here's the coding I'm using:
    And here a link to what the page looks like:
    Geek 'Fo : In'Formation of the Geek Variety
    I can't seem to find the problem.

    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <title>Geek 'Fo : In'Formation of the Geek Variety</title>
    <!-- Search Stuffs -->
    <meta name="keywords" content="Geek Info,GeekInfo,Geek, technology, games, video games, " />
    <meta name="description" content="Geek Fo  InFormation of the Geek Variety. News about video games, technology and everything inbetween. " />
    <style type="text/css"> 
    body {
       text-align: center;
    #container {
    text-align: left;
    margin: 0 auto;
    width: 700px;
    background: #B0BFC2 repeat-y; 
    #header {
       text-align: center ;
       width: 900;
       color: white; 
    #navbar {
      float: left;
      width: 200px; 
      display: inline;
      margin-left: 20px;
      padding: 15px 0;
    .menu {width: 200px;}
    .menu ul {list-style-type: none;}
    .menu{margin:0; padding:0; width:200px; list-style:none;background:rgb(255,255,255);}
    .menu li{padding:0; margin:0 0 1px 0; height:40px; display:block; }
    .menu li a{text-align:left;height:40px; padding:0px 25px; font:16px Verdana, Arial, Helvetica, sans-serif; color:rgb(255,255,255); display:block; background:url('verMenuImages.png') 0px 0px no-repeat; text-decoration:none;}
    .menu li a:hover{background:url('verMenuImages.png') 0px -40px no-repeat; color:rgb(255,255,255);}
    .menu li, .menu li{background:url('verMenuImages.png') 0px -80px no-repeat; color:rgb(255,255,255);}
    .menu li a span{line-height:40px;
    #content {
      float: left;
      width: 475px;
      margin-left: 45px;
      padding: 15px 0;  
    <div id="container">
      <div id="header">Top Header</div>
      <div id="navbar"></div>
    <ul class="menu">
      <li><a href=""><span>Home</span></a></li>
      <li><a href=""><span>Archive</span></a></li>
      <li><a href=""><span>Contact</span></a></li>
      <div id="content">Content here</div>


  3. #2
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Cottage Grove, Minnesota
    Member #
    720 times
    Do any of these layouts fit your project?
    CSS Layout: A collection of 224 Grid and CSS Layouts

    Sometimes using a template, or pre-made layout gives a person some more ideas.

    Or these:
    Layout Gala: a collection of 40 CSS layouts based on the same markup and ready for download!

  4. #3
    etm is offline
    Join Date
    Aug 2010
    Calgary, Canada
    Member #
    What dimension are you going for with the site?

    In your code you specify a container of 700px, but your header nested within is specified at 900px.

    Your nav bar is:
    width: 200px;
    margin-left: 20px;
    Total 220px

    Your content is:
    width: 475px;
    margin-left: 45px;
    Total: 520px

    520 + 220 = 760px.

    So in a container of 700px, we have a header jammed in at 900px, and the nav column and content column total 760px.

    You need to get all the values in order if you want them to line up properly.

Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
All times are GMT -6. The time now is 11:57 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2020 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: