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

Thread: Setting up boxes with HTML and CSS

  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,819
    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,819
    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 03: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,819
    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 04: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,819
    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,819
    Quote Originally Posted by Volthair View Post
    Oh yeah, I have set the divs as you did.

    Also, what does "overflow" actually mean?
    Overflow controls what to do if the text does not fit in a div:

    - overflow: hidden; Hides the text that does not fit.

    - overflow: scroll; Adds scroll bar(s) to allow the whole text to be viewed.
    Last edited by jedaisoul; 01-16-2014 at 05:48 PM.

  10. #10
    Join Date
    Mar 2012
    Posts
    1,819
    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 06:03 PM.

  11. #11
    Join Date
    Jan 2014
    Posts
    12
    Alrighty!

    I've worked a bit with position: absolute;. I managed to get the boxes where I want them, but as I am changing the browsers resolution it will not move along, it stays where it was set to stay. I need the box to adapt to which resolution is being used, any tricks?

  12. #12
    Join Date
    Jan 2014
    Posts
    12
    Alrighty!

    I've worked a bit with position: absolute;. I managed to get the boxes where I want them, but as I am changing the browsers resolution it will not move along, it stays where it was set to stay. I need the box to adapt to which resolution is being used, any tricks?

  13. #13
    Join Date
    Mar 2012
    Posts
    1,819
    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 06:56 PM.

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

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

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