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 9 of 9
  1. #1
    New to the CF scene
    Join Date
    Jan 2009
    Posts
    6
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Div lining up / fluid

    Firstly Hello and thanks for reading,
    the problem im having with CSS is best discribed with this image.


    im attempting to move that box to where the arrow is pointing and make it so any more id=box that i add will follow the "flow" of the rest.
    sorry if it seems stupid etc however im newish to css.

    THIS IS THE CONTAINER:
    Code:
    #body {
    background: #000 url(images/index_07.jpg) no-repeat;
    top: 184px;
    position: absolute;
    width: 650px;
    height: auto;
    font-size: 12px;
    font-family: Verdana;
    padding-top: 10px;
    padding-left: 20px;
    color: #fff;
    min-height:900px;
    }
    This is the title box (with red image in background)
    Code:
    #titlebox{
    background: url(images/title.png) repeat-y;
    padding-top:10px;
    margin-bottom:10px;
    color:#FFF;
    font-size: 15px;
    font-family: Verdana;	
    }
    THIS IS THE BOXE's
    Code:
    #box{
     width: 280px;
     border-width:thin;
     border-color:#333;
     border-style:solid;
     padding-left: 20px;
     padding-bottom:10px;
     font-size: 12px;
     font-family: Verdana;
     margin-top:20px;
     margin-left:20px;
     float:left;
    }
    Now i have tried alot of things to get this working but i cant seem to figure it out, ive looked on many sites and not found a solution, is their a name for the thing i want to do?
    Last edited by B33T; 05-06-2009 at 10:30 PM.

  • #2
    New to the CF scene
    Join Date
    Jan 2009
    Posts
    6
    Thanks
    3
    Thanked 0 Times in 0 Posts
    nobody at all has any idea on fixing it?

  • #3
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello B33T,
    You have not provided enough info. We need the complete markup and CSS - a link to the site would be easiest.

    Since it looks like a 2 column layout, have a look at how this one is done - http://nopeople.com/CSS/equal_length_columns/index.html If you float one and margin the other over like that example then you should be fine.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    B33T (05-08-2009)

  • #4
    New to the CF scene
    Join Date
    Jan 2009
    Posts
    6
    Thanks
    3
    Thanked 0 Times in 0 Posts
    the page is a Facebook application, thus:
    http://apps.facebook.com/castlerpg/
    but you will need a facebook account to view it, and then if you do view source you get all the facebook stuff, here is a full css list

    Code:
    <style>
    
    body {
    	background: #000 top no-repeat;
    	color: #000;
    	font-size: 12px;
    	font-family: Verdana;
    	background-image: url();
    	background-repeat: no-repeat;
    	height:900px;
    }
    
    
    
    td {
    
    color: #fff;
    
    font-size: 12px;
    
    font-family: Verdana;
    
    }
    
    
    
    #foot {
    
    color: #090;
    font-size: 12px;
    font-family: Verdana;
    height: 24px;
    position: absolute;
    background: #000 url(images/footbg.jpg) top center repeat-x;
    width: 500px;
    top: 900px;
    left: 0px;
    }
    
    
    
    a, a:visited {
    
    color: #D9C5C5;
    
    font-weight: bold;
    
    text-decoration: none;
    
    }
    
    
    
    a:hover, a:active {
    
    color: #fff;
    
    font-weight: bold;
    
    text-decoration: none;
    
    }
    
    
    
    #head {
    background: #000 url(images/index_02.jpg) no-repeat;
    width: 500px;
    height: 154px;
    font-size: 12px;
    font-family: Verdana;
    left: 0px;
    top: 0px;
    position: absolute;
    }
    #stats {
    background: #000 url(images/index_03.jpg) no-repeat;
    width: 240px;
    height: 154px;
    font-size: 12px;
    font-family: Verdana;
    padding-top: 30px;
    padding-left: 20px;
    left: 500px;
    top: 0px;
    position: absolute;
    color: #fff;
    }
    
    
    #menu {
    
    background: #000 url(images/index_05.jpg) no-repeat;
    top: 154px;
    position: absolute;
    width: 725px;
    height: 30px;
    font-size: 11px;
    font-family: Verdana;
    padding-top: 6px;
    padding-left: 12px;
    padding-right: 6px;
    }
    
    #body {
    background: #000 url(images/index_07.jpg) no-repeat;
    top: 184px;
    position: absolute;
    width: 650px;
    font-size: 12px;
    font-family: Verdana;
    padding-top: 10px;
    padding-left: 20px;
    color: #fff;
    height:100%;
    
    }
    .titlebox{
    background: url(images/title.png) repeat-y;
    padding-top:10px;
    margin-bottom:10px;
    color:#FFF;
    font-size: 15px;
    font-family: Verdana;	
    }
    #bigbox{
     width: 560px;
     border-width:thin;
     border-color:#333;
     border-style:solid;
     padding-left: 20px;
     padding-bottom:10px;
     font-size: 12px;
     font-family: Verdana;
     margin-top:20px;
     margin-left:20px;
    }
    .box{
     width: 280px;
     border-width:thin;
     border-color:#333;
     border-style:solid;
     padding-left: 20px;
     padding-bottom:10px;
     font-size: 12px;
     font-family: Verdana;
     margin-top:20px;
     margin-left:20px;
     float:left;
    }
    #boxright{
     width: 280px;
     margin-top:20px;
     margin-left:20px;
     border-width:thin;
     border-color:#333;
     border-style:solid;
     padding-bottom:10px;
     padding-left: 20px;
     font-size: 12px;
     font-family: Verdana;
     float:right;
    
    }
    #body-right {
    
    background: #000;
    width: 60px;
    height: 500px;
    position: absolute;
    left: 670px;
    top: 184px;
    font-size: 12px;
    font-family: Verdana;
    padding-top: 10px;
    }
    
    
    
    input, select {
    
    font-size: 12px;
    
    }
    
    
    
    </style>
    All of the boxes are currently tagged with class='box'.

  • #5
    New to the CF scene
    Join Date
    Jan 2009
    Posts
    6
    Thanks
    3
    Thanked 0 Times in 0 Posts
    the divs
    Code:
    		
    <div id='body'>
    echo "<div class='box'>";
    echo "<div class='titlebox'>Questing overview: </div>";
    echo "<br>Here you can complete quests for people near you";
    echo "</div>";
    echo "<div class='box'><div class='titlebox'>Latest Quests:</div>";
    echo "Somesql here";
    echo "</div>";		
    echo "<div class='box'>";
    		echo "<div class='titlebox'>Quest List: </div>";
    		echo "<br>";
    echo "somesql here";
    		</div>
    as you can see im slightly nubcake(noob) to css, so if their is any other "errors" or things that seem unneeded please feel free to insult me and correct me

  • #6
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    If you give seperate control to the right and left boxes you will have an easier time of it.
    Try this -
    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>Untitled Document</title>
    <style type="text/css">
    body {
    	background: #000 top no-repeat;
    	color: #000;
    	font-size: 12px;
    	font-family: Verdana;
    	background-image: url();
    	background-repeat: no-repeat;
    	height:900px;
    }
    
    
    
    td {
    
    color: #fff;
    
    font-size: 12px;
    
    font-family: Verdana;
    
    }
    
    
    
    #foot {
    
    color: #090;
    font-size: 12px;
    font-family: Verdana;
    height: 24px;
    position: absolute;
    background: #000 url(images/footbg.jpg) top center repeat-x;
    width: 500px;
    top: 900px;
    left: 0px;
    }
    
    
    
    a, a:visited {
    
    color: #D9C5C5;
    
    font-weight: bold;
    
    text-decoration: none;
    
    }
    
    
    
    a:hover, a:active {
    
    color: #fff;
    
    font-weight: bold;
    
    text-decoration: none;
    
    }
    
    
    
    #head {
    background: #000 url(images/index_02.jpg) no-repeat;
    width: 500px;
    height: 154px;
    font-size: 12px;
    font-family: Verdana;
    left: 0px;
    top: 0px;
    position: absolute;
    }
    #stats {
    background: #000 url(images/index_03.jpg) no-repeat;
    width: 240px;
    height: 154px;
    font-size: 12px;
    font-family: Verdana;
    padding-top: 30px;
    padding-left: 20px;
    left: 500px;
    top: 0px;
    position: absolute;
    color: #fff;
    }
    
    
    #menu {
    
    background: #000 url(images/index_05.jpg) no-repeat;
    top: 154px;
    position: absolute;
    width: 725px;
    height: 30px;
    font-size: 11px;
    font-family: Verdana;
    padding-top: 6px;
    padding-left: 12px;
    padding-right: 6px;
    }
    
    #body {
    background: #000 url(images/index_07.jpg) no-repeat;
    top: 184px;
    position: absolute;
    width: 650px;
    font-size: 12px;
    font-family: Verdana;
    padding-top: 10px;
    padding-left: 20px;
    color: #fff;
    height:100%;
    
    }
    .titlebox{
    background: url(images/title.png) repeat-y;
    padding-top:10px;
    margin-bottom:10px;
    color:#FFF;
    font-size: 15px;
    font-family: Verdana;	
    }
    #bigbox{
     width: 560px;
     border-width:thin;
     border-color:#333;
     border-style:solid;
     padding-left: 20px;
     padding-bottom:10px;
     font-size: 12px;
     font-family: Verdana;
     margin-top:20px;
     margin-left:20px;
    }
    .box{
     width: 280px;
     border-width:thin;
     border-color:#333;
     border-style:solid;
     padding-left: 20px;
     padding-bottom:10px;
     font-size: 12px;
     font-family: Verdana;
     margin-top:20px;
     margin-left:20px;
     float:left;
    clear: left;
    }
    .boxright{
     width: 280px;
     margin-top:20px;
     margin-left:340px;
     border-width:thin;
     border-color:#333;
     border-style:solid;
     padding-bottom:10px;
     padding-left: 20px;
     font-size: 12px;
     font-family: Verdana;
    background: #fff;
    }#body-right {
    
    background: #000;
    width: 60px;
    height: 500px;
    position: absolute;
    left: 670px;
    top: 184px;
    font-size: 12px;
    font-family: Verdana;
    padding-top: 10px;
    }
    
    
    
    input, select {
    
    font-size: 12px;
    
    }
    
    
    </style>
    </head>
    <body>		
    <div id='body'>
    echo "<div class='box'>";
    echo "<div class='titlebox'>Questing overview: </div>";
    echo "<br>Here you can complete quests for people near you";
    echo "</div>";
    echo "<div class='boxright'><div class='titlebox'>Latest Quests:</div>";
    echo "Somesql here";
    echo "</div>";		
    echo "<div class='box'>";
    		echo "<div class='titlebox'>Quest List: </div>";
    		echo "<br>";
    echo "somesql here";
    		</div>
    </body>
    </html>
    I did not correct any errors in your code. Have a look at the links about validation in my sig below.

    ..
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    B33T (05-08-2009)

  • #7
    New to the CF scene
    Join Date
    Jan 2009
    Posts
    6
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Firstly thank you greatly for assisting me so far!.
    I will be sure to check out the validation in your signature once I am home.
    after adding your css it makes it alot easier to track my left / right items, however the problem still exists, for instance in the screenshot above you can see that DIV containing "questlist" needs to move "up" however it seems to place itself below the bottom of the "latest Quests" div.
    I'm at breaking point ive tried everything i can think off and most solutions i can Google however none appear to work! and thats how i ended up here.
    so please if you can think of anything that can help or a reason why this is Imposible please let me know! as im slowly going crazy about this problem!

  • #8
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    after adding your css it makes it alot easier to track my left / right items, however the problem still exists, for instance in the screenshot above you can see that DIV containing "questlist" needs to move "up" however it seems to place itself below the bottom of the "latest Quests" div.
    I made a change in the markup too. Also highlighted in red.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    B33T (05-08-2009)

  • #9
    New to the CF scene
    Join Date
    Jan 2009
    Posts
    6
    Thanks
    3
    Thanked 0 Times in 0 Posts
    This is resolved.
    I've now created two containers as columns and adjusted my width this has solved my issue. thanks for all your help Excavator


  •  

    Tags for this Thread

    Posting Permissions

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