...

View Full Version : Div lining up / fluid



B33T
05-06-2009, 10:09 PM
Firstly Hello and thanks for reading,
the problem im having with CSS is best discribed with this image.
http://elitehudson.com/images/cssproblem.jpg

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:

#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)

#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

#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?

B33T
05-07-2009, 05:39 AM
nobody at all has any idea on fixing it?

Excavator
05-07-2009, 05:56 AM
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.

B33T
05-07-2009, 06:21 AM
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



<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'.

B33T
05-07-2009, 06:25 AM
the divs


<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 :D and correct me :)

Excavator
05-07-2009, 03:03 PM
If you give seperate control to the right and left boxes you will have an easier time of it.
Try this -
<!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.

..

B33T
05-07-2009, 03:49 PM
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!

Excavator
05-08-2009, 01:56 AM
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.

B33T
05-08-2009, 06:30 AM
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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum