www.webdeveloper.com
Page 2 of 2 FirstFirst 12
Results 16 to 27 of 27

Thread: Setting up boxes with HTML and CSS

  1. #16
    Join Date
    Jan 2014
    Posts
    12
    I can't get it to work, it does still flee once I've removed float: left; and added a right: 0;

    Here's both the html and css.

    HTML:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>WorkArea</title>

    <link rel="stylesheet" type="text/css" href="cssprov.css" />

    </head>

    <body>

    <div id="header">

    <ul>
    <li>contact</li>
    <li>facebook</li>
    <li>home</li>
    <li>about</li>
    </ul>

    </div><!--end header-->

    <div id="content">

    <div id="heading">
    <h1>the heading goes here.</h1>
    </div><!--end heading-->

    <div id="box1">
    <h2> This is box one. </h2>
    </div><!--end box1-->

    <div id="box2">
    <h2> This is box two. </h2>
    </div><!--end box2-->


    <div id="box3">

    <h2> This is box three. </h2>

    </div><!--box3-->
    </div><!--end content-->

    <div id="footer">
    <p>
    this is the footer.
    </p>
    </div><!--end footer-->



    </body>
    </html>

    CSS:

    #content {
    width: 980px;
    background: white;
    margin: -1em auto;
    }

    #header {
    width: 980px;
    height: 68px;
    clear: both;
    background-color: #F20F88;
    margin: 2em auto;
    }

    #heading {
    height: 200px;
    clear: both;
    background-color: #0FA6F2;
    border: 3px solid #F20F88;
    }

    #box1 {
    float: left;
    width: 233px;
    height: 350px;
    margin-right: 10px;
    }

    #box3 {
    width: 233px;
    height: 350px;
    margin-left: 10px;
    position: absolute;
    left: 954px;
    right: 0;
    top: 321px;
    }

    #box2 {
    float: left;
    width: 480px;
    height: 350px;
    overflow: scroll;
    }

    #footer {
    width: 980px;
    height: 40px;
    clear: both;
    margin: 2em auto;
    background: #F20F88;
    }

    #box1, #box2, #box3 {
    margin-top: 7px;
    margin-bottom: 7px;
    background: #0FA6F2;
    border: 3px solid #F20F88
    }

    ul li{
    display: inline-block;
    float: right;
    margin-right: 2.49500998004%;
    margin-top: 26px;
    margin-bottom: 10px;
    padding: 0 10px;
    font-size: 13px;
    font-family: Georgia, "Times New Roman", Times, serif;
    }

    * {
    margin: 0;
    padding: 0;
    }

    #box1 h2{
    font-family:"Arial Black", Gadget, sans-serif;

    color:#232323;

    font-size: 13px;

    line-height:21px;
    }

  2. #17
    Join Date
    Mar 2012
    Posts
    1,501
    The problem is you are mixing position: static (the default) with position: absolute. That does not work. If you want to use position: absolute you have to be consistent.

    So the CSS needs to be something like:

    Code:
    #content {
    position: absolute;
    left: auto; // this is the default
    top: 0;
    bottom: 0;
    width: 980px;
    background: white;
    }
    
    #header {
    position: absolute;
    left: 0;
    top: 0;
    width: 980px;
    height: 68px;
    background-color: #F20F88;
        }
        
    #heading {
    position: absolute;
    left: 0;
    top: 68px;
    width: 100%;
    height: 200px;
    background-color: #0FA6F2;
    // border: 3px solid #F20F88;
    }
    
    #box1 {
    position: absolute;
    left: 0;
    top: 268px;
    width: 233px;
    bottom: 40px;
    margin-right: 10px;
    overflow: scroll;
    }
    
    #box2 {
    position: absolute;
    left: 233px;
    right: 233px;
    top: 268px;
    bottom: 40px;
    overflow: scroll;
    }	
    #box3 {
    position: absolute;
    right: 0;
    top: 268px;
    bottom: 40px;
    width: 233px;
    overflow: scroll;
    }
    
    #footer {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 40px;
    background: #F20F88;
    }
    
    #box1, #box2, #box3 {
    	background: #0FA6F2;
    	// border: 3px solid #F20F88
    }
    Note: I've omitted the borders and butted the divs next to each other. That way the calculation of positions is simpler. Once you have grasped how it works, you can adjust the left, right, top and bottom settings to allow for the borders.

    E.g.
    top of the header is 0, and the height is 68px, so the top of the heading is 68px. Similarly the bottom of the footer is 0, and its height 40px, so the bottom of the boxes is 40px.

  3. #18
    Join Date
    Sep 2008
    Location
    Old North Sacramento
    Posts
    80
    Here is my solution, please note this example is a fixed width / height layout and you may need to resize the container depending on your needs.

    htmlboxlayoutpicture.png

    Code:
    <!-- Author: Nathan Nelson
    http://www.nathanscomputerknowledge.com -->
    
    
    <html>
    <head>
    <style type="text/css">
    #container{width:500px;height:700px;}
    #header{height:24px;background-color:lightblue;}
    #subheader{height:160px;background-color:red;}
    #contentleft{width:120px;height:200px;background-color:green;float:left;}
    #contentcenter{width:260px;height:200px;background-color:blue;float:left;}
    #contentright{width:120px;height:200px;background-color:orange;float:left;}
    #footer{width:500px;height:24px;background-color:pink;float:left;}
    </style>
    </head>
    <body>
    <div id="container">
    <div id ="header">
    Logotype
    </div>
    <div id="subheader">
    
    </div>
    <div id="contentleft">
    
    </div>
    <div id="contentcenter">
    
    </div>
    <div id="contentright">
    
    </div>
    <div id="footer">
    
    </div>
    </div>
    
    </body>
    </html>
    edit: added picture
    Last edited by Natdizzle; 01-18-2014 at 12:05 PM. Reason: added picture
    Java 2d Game designer / developer
    http://www.nathanscomputerknowledge.com

  4. #19
    Join Date
    Jan 2014
    Posts
    12
    I replaced your code with mine, it resulted in a mess.

    https://imageshack.com/i/10e383p

    I must have forgotten something when I replaced it, this looks awful

  5. #20
    Join Date
    Jan 2014
    Posts
    12
    @Natdizzle

    Please, could you help me with setting up the margins between the three boxes? (See the picture on my first post)
    I find that hard with %.

  6. #21
    Join Date
    Sep 2008
    Location
    Old North Sacramento
    Posts
    80
    i might have time send me your file or source code

    newtzzz@gmail.com
    Java 2d Game designer / developer
    http://www.nathanscomputerknowledge.com

  7. #22
    Join Date
    Jan 2014
    Posts
    12
    Sent.

  8. #23
    Join Date
    Mar 2012
    Posts
    1,501
    Quote Originally Posted by Volthair View Post
    I replaced your code with mine, it resulted in a mess.

    https://imageshack.com/i/10e383p

    I must have forgotten something when I replaced it, this looks awful
    Is this addressed to me? I so, have you linked the right web page? As far as I can see the code is nothing like what I suggested.

  9. #24
    Join Date
    Jan 2014
    Posts
    12
    Yes, it was. I don't know what is causing this, do you mind sending me the html used for that css to see if that helps?

  10. #25
    Join Date
    Mar 2012
    Posts
    1,501
    The html is the same as given in post #3.

  11. #26
    Join Date
    Mar 2012
    Posts
    1,501
    oops!
    Last edited by jedaisoul; 01-20-2014 at 03:27 PM. Reason: duplicate post

  12. #27
    Join Date
    Oct 2013
    Posts
    30
    I think it will be easier for you to use a grid system link 960 grid system. http://960.gs/

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles