Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Mar 2013
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Question Divs not doing what I want them to do!

    I am trying to design a site, and the <div class="right"> is not positioning how i want it. It should be positioned how the <div class="left"> is, but on the right side, but instead is below the text.
    HTML:
    <!DOCTYPE html>
    <html>
    <head>
    <link href='http://fonts.googleapis.com/css?family=Tauri' rel='stylesheet' type='text/css'>
    <link type="text/css" rel="stylesheet" href="index.css"/>
    <title></title>
    </head>
    <body>
    <div id="header"><h1>Sponsor-a-Lesson!</h1></div>
    <div class="left"></div>
    <h2>For only $20, you can sponsor an ELA lesson in Mr. Daley's class!</h2>
    <ul>
    <li>Your business name will be put on the board-- right where students look!</li>
    <li>You business will be mentioned positively 3 times per class period!*</li>
    <li>For an extra $10, Mr. Daley will wear a shirt with your logo on it!</li>
    <li>For an extra $5, you business logo will be drawn on Mr. Daley's bald head!</li>
    <li>This is perfect for resturants, stores, and other local businesses that cater especially to teenagers!</li>
    </ul>
    <h2>About Mr. Daley's class</h2>
    <p>Mr. Daley teaches 8th grade English Language Arts at Nessacus Regional Middle School,
    which has students from Dalton, Hinsdale, and the Hilltowns, as well as some school choice students from Pittsfield.
    He is considered to have a sense of humor, and came up with the idea for the 'Sponsor-a-Lesson' himself!</p>
    <h4>*For $1 extra, you can have your business mentioned even more-- $1 per extra time.</h4>
    <table>
    <thead>
    <th></th>
    <th>Just a sponsoring</th>
    <th>Add the T-Shirt</th>
    <th>Add Mr. Daley's Head</th>
    </thead>
    <tr>
    <td class="pricing">Just a sponsoring</td>
    <td>$20</td>
    <td>$30</td>
    <td>$25</td>
    </tr>
    <tr>
    <td class="pricing">Add the Shirt</td>
    <td>$30</td>
    <td>X</td>
    <td>$35</td>
    </tr>
    <tr>
    <td class="pricing">Add Mr. Daley's Head</td>
    <td>$25</td>
    <td>$35</td>
    <td>X</td>
    </tr>
    </table>
    <div class="right"></div>
    <div id="footer"></div>
    </body>
    </html>


    My CSS:
    body {
    background-color:#F3E9D8;
    }
    #header {
    margin-top:0px;
    width:100%;
    height:80px;
    background-color:#80FF44;
    border:#00AE44 5px solid;
    border-radius:50px;
    position:fixed;
    z-index:1;
    }
    .left {
    margin-top:100px;
    width:80px;
    height:800px;
    background-color:#FF606E;
    border:#CC2341 5px solid;
    border-radius:50px;
    float:left;
    }
    .right {
    margin-top:100px;
    width:80px;
    height:800px;
    background-color:#FF606E;
    border:#CC2341 5px solid;
    border-radius:50px;
    float:right;
    }
    #footer {
    width:100%;
    height:80px;
    background-color:#00A1FF;
    border:#0026FF 5px solid;
    border-radius:50px;
    clear:both;
    }
    h1 {
    font-family:"Tauri";
    text-align:center;
    font-size:60px;
    margin-top:0px;
    }
    h2 {
    font-family:"Tauri";
    text-align:center;
    padding-top:100px;
    }
    ul {
    font-family:"Tauri";
    text-align:center;
    list-style-type:none;
    }
    p {
    font-family:"Tauri";
    padding-left:100px;
    padding-right:100px;
    text-align:center;
    font-size:16px;
    }
    h4 {
    font-family:"Tauri";
    padding-left:100px;
    padding-right:100px;
    text-align:center;
    }
    table {
    margin-left:120px;
    margin-right:120px;
    font-family:"Tauri";
    padding-left:140px;
    padding-right:140px;
    text-align:center;
    border:2px solid black;
    border-radius:10px;
    }
    th {
    font-family:"Tauri";
    padding-left:20px;
    padding-right:20px;
    text-align:center;
    border:1px solid black;
    border-radius:10px;
    }
    .pricing {
    font-family:"Tauri";
    padding-left:20px;
    padding-right:20px;
    text-align:center;
    border:1px solid black;
    border-radius:10px;
    }
    td {
    font-family:"Tauri";
    padding-left:20px;
    padding-right:20px;
    text-align:center;
    border:1px dashed black;
    border-radius:10px;
    }

    Screenshots:
    at the following link:
    http://9gag.com/gag/6850656

  • #2
    Regular Coder
    Join Date
    Mar 2013
    Posts
    262
    Thanks
    4
    Thanked 67 Times in 67 Posts
    You can do this.

    Put everything in between the left/right divs inside another div called "center". For example, notice how I have a "center" div.

    Code:
    <div class="center">
    <h2>For only $20, you can sponsor an ELA lesson in Mr. Daley's class!</h2>
    <ul>
    <li>Your business name will be put on the board-- right where students look!</li>
    <li>You business will be mentioned positively 3 times per class period!*</li>
    <li>For an extra $10, Mr. Daley will wear a shirt with your logo on it!</li>
    <li>For an extra $5, you business logo will be drawn on Mr. Daley's bald head!</li>
    <li>This is perfect for resturants, stores, and other local businesses that cater especially to teenagers!</li>
    </ul>
    <h2>About Mr. Daley's class</h2>
    <p>Mr. Daley teaches 8th grade English Language Arts at Nessacus Regional Middle School, 
    which has students from Dalton, Hinsdale, and the Hilltowns, as well as some school choice students from Pittsfield.
    He is considered to have a sense of humor, and came up with the idea for the 'Sponsor-a-Lesson' himself!</p>
    <h4>*For $1 extra, you can have your business mentioned even more-- $1 per extra time.</h4>
    <table>
    <thead>
    <th></th>
    <th>Just a sponsoring</th>
    <th>Add the T-Shirt</th>
    <th>Add Mr. Daley's Head</th>
    </thead>
    <tr>
    <td class="pricing">Just a sponsoring</td>
    <td>$20</td>
    <td>$30</td>
    <td>$25</td>
    </tr>
    <tr>
    <td class="pricing">Add the Shirt</td>
    <td>$30</td>
    <td>X</td>
    <td>$35</td>
    </tr>
    <tr>
    <td class="pricing">Add Mr. Daley's Head</td>
    <td>$25</td>
    <td>$35</td>
    <td>X</td>
    </tr>
    </table>
    </div>
    After you do that, arrange the left, right, and center divs like this:

    Code:
    <div class="left"></div>
    <div class="right"></div>
    <div class="center">...</div>
    Notice that the "right" div is actually second. Then, add this to your CSS file:

    Code:
    .center {
    	margin-left: 80px;
    	margin-right: 80px;
    }
    I used 80 pixels because that's the width of your left and right divs.

  • #3
    New to the CF scene
    Join Date
    Mar 2013
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Thumbs up Thank you!

    Thank you! It worked!


  •  

    Tags for this Thread

    Posting Permissions

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