SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    Founder of Primal Skill Ltd. feketegy's Avatar
    Join Date
    Aug 2006
    Posts
    482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question please help with this layout

    okay, i need a 3 div layout floated left in a container
    something like http://rothcrew.deviantart.com

    so you see that there are two column(first two ), and those are somehow differnet sizes.
    And if you resize your browser than you see that those two columns width are getting smaller and and the second column doesn't go under the first on. How to achieve this?
    Basically what i need is that columns width different widths next to each other (in already a floated container) and when i resize the browser the columns doesn't float underneath each other but to stay net to each other but with smaller width. I tried with 2 column one, width: 20% but when i resized it the second one goes under the first one...

  2. #2
    SitePoint Wizard drhowarddrfine's Avatar
    Join Date
    Aug 2005
    Posts
    3,438
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    First, remove the comment line as your first line. IE will go into quirks mode if there is anything placed before the doctype.

  3. #3
    Founder of Primal Skill Ltd. feketegy's Avatar
    Join Date
    Aug 2006
    Posts
    482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    it is not that the problem

  4. #4
    Founder of Primal Skill Ltd. feketegy's Avatar
    Join Date
    Aug 2006
    Posts
    482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    anybody?

  5. #5
    SitePoint Enthusiast
    Join Date
    Aug 2006
    Posts
    74
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    to be honest, that site looks really boring man. Try to spice it up, with a different color or something.

  6. #6
    Founder of Primal Skill Ltd. feketegy's Avatar
    Join Date
    Aug 2006
    Posts
    482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question

    oh, man. not that site, S$%#

    Okay. so here it is. i created a 'mockup' file with what i want.
    Problem is that I have there a menu like div on the right side with red background and fixed width
    and all what i want that the blue bordered divs to fill up the rest of the space and when i resize the page it stills fills up all the remaining free space and NOT TO go under each other, i want that all 3 with the menu to stay on the same level.

    Right now th page all it does that when i resize the browser the 3 blue bordered columns will go under each other...

    CAN ANYBODY HELP???

    <!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=iso-8859-1" />
    <title>Untitled Document</title>
    <style type="text/css">
    .container {
    background:#C5B18D;
    padding:0px;
    margin:0px;
    float:left;
    width:100%;
    clear:both;
    }

    .title {
    background:#8C4646;
    padding:7px;
    margin:0px;
    clear:both;
    }
    .title h3 {
    font-size:14px;
    color:#FFFFFF;
    margin:0px;
    margin-right:10px;
    display:inline;
    }
    body {
    background:#987E4E;
    margin:0px;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-size:10px;
    margin-left:20px;
    margin-right:20px;
    }

    #right_container {
    float:right;
    width:250px;
    background:#00FF00;
    }
    #user_controls {
    background:#8C4646;
    padding:4px;
    margin-bottom:6px;
    }

    .userpage_container {
    float:right;
    border:1px solid #0000FF;
    margin:4px;

    width:24%;
    height:100%;
    }
    </style>
    </head>

    <body>

    <div class="title"><h3>header</h3></div>

    <div class="container">


    <div id="right_container">
    <div id="user_controls">
    some text here
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />


    </div>
    <div id="ad_content">some ad will go here<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></div>
    </div>

    <div class="userpage_container">
    adfsdfslkfjsdlj sdfksjfl kjsd lfksdj fls fjsld jslf fl lf jsdlfksjdflsdjfljfsdl f
    </div>
    <div class="userpage_container">
    adfsdfslkfjsdlj sdfksjfl kjsd lfksdj fls fjsld jslf fl lf jsdlfksjdflsdjfljfsdl f
    </div>
    <div class="userpage_container">
    adfsdfslkfjsdlj sdfksjfl kjsd lfksdj fls fjsld jslf fl lf jsdlfksjdflsdjfljfsdl f
    </div>

    </div> <!-- container end div -->
    </body>
    </html>

  7. #7
    SitePoint Enthusiast
    Join Date
    Aug 2006
    Posts
    74
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    it would help if we could actually see what your talking about, instead of the script.

  8. #8
    Founder of Primal Skill Ltd. feketegy's Avatar
    Join Date
    Aug 2006
    Posts
    482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    here it is a link to the script. I want that the blue bordered divs to be variable width and to stay in one line not to go underneath each other when i resize the browser

    http://onlinecv.evonet.ro/

  9. #9
    SitePoint Wizard drhowarddrfine's Avatar
    Join Date
    Aug 2005
    Posts
    3,438
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The problem is the width of your boxes is too big for their container.

  10. #10
    Founder of Primal Skill Ltd. feketegy's Avatar
    Join Date
    Aug 2006
    Posts
    482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    could you explain it a little bit more? i don't understand

  11. #11
    SitePoint Wizard drhowarddrfine's Avatar
    Join Date
    Aug 2005
    Posts
    3,438
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The width of the beige box is too small. Add up the widths of the three text boxes plus margins and all 3 cannot fit in the beige box.

  12. #12
    Founder of Primal Skill Ltd. feketegy's Avatar
    Join Date
    Aug 2006
    Posts
    482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i tried to adjust it but still that problem occurs, I event tried to handle it with javascript but it faild tht too, i'm in a time crisis i have to get it done. please somebody help me.


Bookmarks

Posting Permissions

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