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 2 of 2
  1. #1
    New Coder
    Join Date
    Aug 2011
    Posts
    60
    Thanks
    32
    Thanked 0 Times in 0 Posts

    Combing Float/Absolute/Jello??

    Hi,

    Im getting to grips with CSS and it seems that the choice between these options is really going to make or break my pages.

    I understand if I use float, that it is taken out of the flow and positioned appropriately to the left or right of the element it is written under in the XHTML, however for really nice and interactive designs, e.g. Multiple <div> in 2 or 3 column layouts that using float would be difficult?

    Absolute is great as far as I can see, as you can position everything you want, however browser re-sizing for people who have their browser windows a certain size may miss out on seeing some of your elements and having to use the scroll bar... Is there anyway of combing Absolute with Jello auto margins??

    Again Jello seems good for re-sizing in browsers (which I think a lot of people do except basic surfers), however if you have multiple images on a page and want 2 or 3 column layouts which are very precise, how is this done?????

    Thanks in advance

  • #2
    Banned
    Join Date
    Feb 2011
    Posts
    2,699
    Thanks
    13
    Thanked 395 Times in 395 Posts
    Maybe use this header, 3 floated columns (for main content), footer skeleton layout as a guide.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
            <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
            <title></title>
            <style type="text/css">
                body {
                    margin: 0px 0px 0px 0px;
                    padding: 0px 0px 0px 0px;
                    background-color: gray;
                }
                #wrapper {
                    width: 900px;
                    margin: 0px 0px 0px 0px;
                    margin: 20px auto 20px auto;
                    background-color: white;
                }
                #content {
                    margin: 0px 0px 0px 0px;
                    padding: 0px 0px 0px 0px;
                    border: 1px solid black;
                    overflow: hidden;
                }
                #header, #col1, #col2, #col3, #footer {
                    margin: 0px 0px 0px 0px;
                    padding: 20px 20px 20px 20px;
                }
                #header {background-color: darkkhaki;}
                #col1 {
                    float: left;
                    width: 150px;
                    background-color:  lightblue;
                }
                #col2 {
                    float: left;
                    width: 478px;
                    background-color:  goldenrod;
                }
                #col3 {
                    float: right;
                    width: 150px;
                    background-color:  lightblue;
                }
                #footer {
                    clear: both;
                    background-color:  coral;
                }
            </style>
        </head>
        <body>
            <div id="wrapper">
                <div id="content">
                    <div id="header">Header bar</div>
                    <div id="col1">Column 1</div>
                    <div id="col2">Column 2</div>
                    <div id="col3">Column 3</div>
                    <div id="footer">Footer bar</div>
                </div>
            </div>
        </body>
    </html>


  •  

    Posting Permissions

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