-1

I am creating a three column style webpage to describe my experience and a bit about me. I want the left and right columns to have borders, but not the middle one. I don't want anything to overlap, and it needs to look good on all screen sizes. (With obvious ridiculous exceptions e.g. Smart watches). My HTML and CSS are below, and are linked together. I am new to web programming, and any metaphor to Objective-C would be helpful.

HTML : http://pastebin.com/QJ5VkJGF CSS : http://pastebin.com/qCcuHiXq

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
Alex Noyle
  • 11
  • 2
  • rather than a pastebin, use codepen or jsfiddle to make a live demo - makes it easier to help – Patrick May 05 '14 at 03:19
  • http://stackoverflow.com/questions/20566660/3-column-layout-html-css For lower screen sizes (smartphones) - i wouldn't use 3 column view (you could check css media queries) – sinisake May 05 '14 at 03:21
  • there are multiple ways to do things, it depends on what you actually want. Do you want all 3 column to shrink when the screen size go down or just the middle shrink? Do you want font size to change accordingly? The basic way to handle scaling is to use percentage(of browser screen) based height and width. – Jacky Cheng May 05 '14 at 03:32

1 Answers1

-1

Here is the revised code:

CODEPEN

HTML,

<html>
        <head>
                <link type="text/css" rel="stylesheet" href="stylesheet.css"/>
                <title>About Me</title>
                <meta http-equiv="refresh" content="1" > <!--TEMPORARY-->
        </head>
        <body>
          <div class="container">
            <div class="left">
                    <h2 class=tableheader>About Me:</h2>
                    <ul>
                        <li>I am a 16 year old boy from East Norriton, PA.</li>
                         <li>I am currently attending Norristown Area High School.</li>
                         <li>Next year, I will be attending Montgomery Technical school for networking.</li>
                        <li>I have been programming since I was 11.</li>
                        <li>I am fluent in HTML5/CSS, and am currently in the process of learning Javascript and Objective C.</li>
                        <li>Social Plug:
                        <br></br><br></br>  
                            <a class="links" href="http://www.twitter.com/AlexNoyle">Twitter</a><br></br>
                            <a class="links" href="http://instagram.com/alexnoyle">Instagram</a><br></br>
                            <a class="links" href="https://www.youtube.com/user/alexnoyle">Youtube</a><br></br>
                            <a class="links" href="http://stackoverflow.com/users/3366059/alex-noyle">Stack Overflow</a>
                       </li>
                   </ul>
        </div>
        <div class="middle">
          <h2>Alex Noyle</h2>
          <h4>My Vision</h4>
          <h4>Contact</h4>
          <p>You can e-mail me @ alexnoyle@icloud.com. I reply quickly and have a self-proclaimed good sense of design with a bias to minimalism and simplicity.</p>
        </div>
        <div class="right">
            <h2 class="tableheader">Experience:</h2>
            <ul>
                <li>Avid member of the IOS Jailbreaking community since 2009.</li>
                <li>Advanced Linux command line user / ESN flasher.</li>
                <li>UNIX Filesystem reverse-engineering since 2012.</li>
                <li>Undisclosed and EXITING projects coming in the near future. *Hint: Modifying IOS*</li>
                <li>Your project here! As a freelance developer I can do almost anything you request.</li>
                <li>Open Source is the future. Get the source code for this website here:
                </li>
                <br></br><br></br>
                <!--Add proper download links below-->
                <a class="links" href="www.google.com">Mirror 1</a>&nbsp;|
                <a class="links" href="www.twitter.com">Mirror 2</a>
              </ul>
            </div>
          </div>
      </body>
</html>

CSS,

* {
    font-family: Verdana;

    box-sizing: border-box;
}

li {
    padding-top: 30px;
    padding-right: 20px;    
}

body {
  width: 100%;
  min-width: 1024px;
}

.container {
  display: table;
  width: 100%
}

.left,
.middle,
.right {
  display: table-cell;
  padding: 10px
}

.left {
    height: 750px;
    width: 300px;
    margin-top: 5px;
    padding-top: 10px;
    text-align: left;
    border: 1px solid black;
    background-color: white;
    position: relative;
}

.tableheader {
    text-align: center;
}

.links {
    text-decoration: none;
}

.right {
    height: 750px;
    width: 300px;
    margin-top: 5px;
    padding-top: 10px;
    text-align: left;
    border: 1px solid black;
    background-color: white;
    position: relative;
}

.middle {
  width: 500px
}

tip to beginner:

  1. use *{box-sizing: border-box} this is the CSS magic for width property that separates you from other beginners.
  2. use reset.css to get rid of unwanted default behavior style
  3. use display: table and display: table-cell for containers. It makes life much easier.
  4. dude, your code is very messy. misplaced tags, wrong indentation, wrong practice of css selectors, and more...
  5. practice practice and practice :) you will get there eventually
mcn
  • 711
  • 4
  • 9