Trying to align text in between <div> tables in a way that looks nice on all screen sizes [closed]

StackOverflow https://stackoverflow.com/questions/23464216

  •  15-07-2023
  •  | 
  •  

Pergunta

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

Foi útil?

Solução

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
Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top