www.webdeveloper.com
Page 1 of 2 12 LastLast
Results 1 to 15 of 27

Thread: Setting up boxes with HTML and CSS

Hybrid View

  1. #1
    Join Date
    Jan 2014
    Posts
    12

    Setting up boxes with HTML and CSS

    Hello,

    I'm kinda new to web-developing and I've searched my way here for some help regarding css and boxes. I found a picture with a basis I'd like to start working with, but I have no clue how to code those actual boxes in css to make them line up as I wish.

    Here's a picture that I'd like my website's boxes to look like.

    https://imageshack.com/i/0zd559p

    Any help is appreciated, thanks!

  2. #2
    Join Date
    Mar 2012
    Posts
    1,495
    Setting up boxes like that is simple, the complex bit is how you want it to behave on different sized displays? E.g.

    1. Do the header and footer need to be a fixed height?

    2. Is the heading fixed height?

    3. Are any of box1, box2 and/or box3 fixed width?

    The precise code needed depends on the answers to these questions.

  3. #3
    Join Date
    Mar 2012
    Posts
    1,495
    The simplest (and traditional) way to code the boxes is as a fixed size. An outline of the code to produce an 800px wide by 760px high display is:

    Code:
    <!DOCTYPE HTML>
    <html>
    <head>
    <title>demo</title>
    
    <!-- ... other settings ... -->
    
    <style>
    #header,
    #footer {
    width: 800px;
    height: 40px;
    clear: both;
    background-color: #F0F;
    }
    #heading {
    width: 800px;
    height: 120px;
    clear: both;
    background-color: #0FF;
    }
    #box1,
    #box3 {
    float: left;
    width: 120px;
    height: 560px;
    background-color: #0FF;
    }
    #box2 {
    float: left;
    width: 560px;
    height: 560px;
    background-color: #0FF;
    }
    </style>
    </head>
    <body>
    <div id="header">
    <p>
    this is the header.
    </p>
    </div>
    <div id="heading">
    <h1>the heading goes here.</h1>
    </div>
    <div id="box1">
    <p>
    box1.
    </p>
    </div>
    <div id="box2">
    <p>
    box2.
    </p>
    </div>
    <div id="box3">
    <p>
    box3.
    </p>
    </div>
    <div id="footer">
    <p>
    this is the footer.
    </p>
    </div>
    </body>
    </html>
    However, that is not always appropriate. Hence the questions above.
    Last edited by jedaisoul; 01-15-2014 at 02:25 PM.

  4. #4
    Join Date
    Jan 2014
    Posts
    12
    Thanks for the fast reply!

    I have worked a bit with the code you wrote for me. The boxes doesn't seem to line up, am I supposed to create another div to make all boxes fit within a bigger box, which I would call "content"? Am I on the track or just clueless?

  5. #5
    Join Date
    Mar 2012
    Posts
    1,495
    There are a number of assumptions in the code I gave, like:

    1. Have you written the divs in the order I gave?

    2. How are you handling overflow?

    Anyway, you can use a "container" div, but you can just set body. You can then amend the widths of the boxes to be a % of the body. E.g.

    Code:
    <style>
    body {
    width: 800px;
    height: 760px;
    }
    #header,
    #footer {
    width: 100%;
    height: 40px;
    clear: both;
    background-color: #F0F;
    }
    #heading {
    width: 100%;
    height: 120px;
    clear: both;
    background-color: #0FF;
    }
    #box1,
    #box3 {
    float: left;
    width: 15%;
    height: 560px;
    background-color: #0FF;
    }
    #box2 {
    float: left;
    width: 70%;
    height: 560px;
    overflow: scroll;
    background-color: #0FF;
    }
    </style>
    Last edited by jedaisoul; 01-16-2014 at 03:29 PM.

  6. #6
    Join Date
    Jan 2014
    Posts
    12
    Thanks,

    I'm confused with this "%" thing. I'd like to use a couple of pixels as margin between box 1,2 and 3 (see the picture). I can't set any margins when using % as width, however when I use pixels instead of % I usually end up having one pixel short i.e when comparing the with the headline's width, which is 980px, I get the width of 979px with my three boxes, it really annoys me. And once I increase one box's width with 1px it doesn't fit...

    If I expressed myself a bit weird, just tell me and I'll give it another try.

  7. #7
    Join Date
    Jan 2014
    Posts
    12
    Oh yeah, I have set the divs as you did.

    Also, what does "overflow" actually mean?

  8. #8
    Join Date
    Mar 2012
    Posts
    1,495
    Quote Originally Posted by Volthair View Post
    Thanks,

    I'm confused with this "%" thing. I'd like to use a couple of pixels as margin between box 1,2 and 3 (see the picture). I can't set any margins when using % as width, however when I use pixels instead of % I usually end up having one pixel short i.e when comparing the with the headline's width, which is 980px, I get the width of 979px with my three boxes, it really annoys me. And once I increase one box's width with 1px it doesn't fit...

    If I expressed myself a bit weird, just tell me and I'll give it another try.
    If you find it easier to use pixels, that's fine. The reason for using percentages is that it makes it simpler to adjust the overall width by just amending the width of the body element.

  9. #9
    Join Date
    Mar 2012
    Posts
    1,495
    Quote Originally Posted by Volthair View Post
    Thanks,

    I'm confused with this "%" thing. I'd like to use a couple of pixels as margin between box 1,2 and 3 (see the picture). I can't set any margins when using % as width, however when I use pixels instead of % I usually end up having one pixel short i.e when comparing the with the headline's width, which is 980px, I get the width of 979px with my three boxes, it really annoys me. And once I increase one box's width with 1px it doesn't fit...

    If I expressed myself a bit weird, just tell me and I'll give it another try.
    There are two issues here:

    1. Pixel differences can be caused by different default margin and padding settings in different browsers. This is often resolved by including in the CSS:

    * {
    margin: 0;
    padding: 0;
    }

    2. If you want to include fixed width elements, you can have problems if you mix it with percentage widths, particularly in responsive designs. That is why it is better to base responsive designs on position absolute; and pixel settings. Position: absolute is more complex, but it is worth the effort to learn it.
    Last edited by jedaisoul; 01-16-2014 at 05:03 PM.

  10. #10
    Join Date
    Mar 2012
    Posts
    1,495
    Position: absolute will adapt to different display sizes, so I'm not sure what the problem is. I really need you to post the code. You can use position: absolute in different ways. E.g.

    left aligned, fixed width:

    left: 0;
    width: 200px;

    right aligned, fixed width:

    right: 0;
    width: 200px;

    full width:

    left: 0;
    right: 0;

    left aligned, variable width:

    left: 0;
    right: 150px;

    right aligned, variable width:

    left: 150px;
    right: 0;
    Last edited by jedaisoul; 01-17-2014 at 05:56 PM.

  11. #11
    Join Date
    Jan 2014
    Posts
    12
    This box flees once I start to play with Chrome's size.

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

  12. #12
    Join Date
    Mar 2012
    Posts
    1,495
    Thanks. The problem is you are mixing float with position absolute. It has to be one or the other. So remove "float: left". Also, you have set a fixed width and left setting. That is not going to work with different display widths. There are two ways to solve this:

    fixed width, right aligned:

    width: 233px;
    right: 0;

    variable width, right aligned:

    left: 954px;
    right: 0;

    However, the left setting is rather high. The box will still disappear if the window is less than 954px wide.

  13. #13
    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;
    }

  14. #14
    Join Date
    Mar 2012
    Posts
    1,495
    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.

  15. #15
    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

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