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
    Oct 2007
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Post Floating elements positioning when browser resized

    Good Day,

    I am trying to develop a typical header, left menu and data style web page. The problem I am having is with the data block since I have made it to float and when the browser is resized to a certain point the data is rendered below the left menu block. Is there a way that I can prevent this?

    Regards,
    Mark P Ashworth


    body {
    font-size: 12px;
    font-family: Tahoma;
    background-color: FFFFFF;
    margin: 0 0 0 0;
    }

    label {
    float: left;
    padding: 0 0 0 0;
    margin: 0 0 0 1em;
    width: 10em;
    text-align: right;
    }

    .header {
    background-color: #2C3A41;
    height: 3em;
    }

    .logo {
    color: white;
    font-family: Tahoma;
    font-size: 2em;
    font-weight: bold;
    padding: 0 0 0 1em;
    }

    .page {
    float: left;
    padding: 0 0 0 0;
    width: 99.9%;
    }

    .context {
    float: left;
    padding: 0 0 0 0;
    }
    .context ul {
    padding: 0 0 0 0;
    margin: 1em 0 0 0;
    list-style: none;
    }
    .context li {
    float: left;
    }
    .selection {
    float: block;
    }
    .tools {
    }

    .content {
    clear: left;
    float: block;
    width: 99.5%;
    margin-top: 0.5em;
    }

    .filters {
    float: left;
    height: 50em;
    border-right: 2px solid #BFBAB0;
    }

    .filters ul {
    padding: 0 1em 0 0.5em;
    list-style: none;
    margin: 0 0 0 0;
    }
    .filters li {
    float: block;
    }

    .data {
    width: 80%;
    align: center;
    float: left;
    margin-left: 1em;
    }

    .message {
    float: block;
    margin: 0 0 1em 0;
    }

    .message p {
    padding: 0.5em 0 0.5em 0;
    }
    .message p.error {
    border: 1px solid #AC433A;
    background-color: red;
    }


    <body>

    <div class="header">
    <span class="logo">Test</span>
    </div>
    <div class="page">
    <div class="context">
    <ul>
    <li>Home</li>
    <li>My Context</li>
    </ul>
    </div>
    <div class="content">
    <div class="filters">
    <ul>
    <li>Home</li>
    <li>My Context</li>
    <li>My Context</li>
    <li>My Context</li>
    <li>My Context</li>
    <li>My Context</li>
    <li>My Context</li>
    </ul>
    </div>
    <div class="data">Some data that could potentially be too long for the section and be displayed under the filters block.
    </div>
    </div>
    </div>
    </body>
    </html>

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,863
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    Have a look at http://bonrouge.com/2c-hf-fluid.php, there is no such probelm.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    Regular Coder
    Join Date
    Dec 2002
    Location
    UK
    Posts
    177
    Thanks
    0
    Thanked 2 Times in 2 Posts
    Possibly a trick is to place an invisible fixed length div in there to force the webpage to have a minimum width.

    Stu
    if ($ENV{'QUERY_STRING'} eq "Afrow UK") {
    print "$ENV{'QUERY_STRING'} rocks!";
    } else {
    print qq~$ENV{'QUERY_STRING'} sucks :)~;
    }


  •  

    Posting Permissions

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