Quote:
Originally Posted by Kor
The floated elements escape from their parent overflow. As a result, their height is not added to the height of the parent. To bypass that, there are several methods. My favorite is inserting an empty DIV, as the child, to clear the floats:
Code:
<div id="parent">
<div style="float:left"></div>
<div style="float:right"></div>
<div style="clear:both"></div>
</div>
|
sry but i dont realy understand, where exactly do you want me to put these divs?,
edit: i now also noticed if i create more than 3 news in the db all the right content on the site is moving under the news so it looks like a mess
this is how the index.php looks:
PHP Code:
<!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=utf-8" />
<title>EpxCMS</title>
<link rel="stylesheet" href="style.css">
<link rel="shortcut icon" href="img/favicon.png" type="image/png" />
</head>
<br>
<body>
<div id="container">
<?php include("theme/header.php"); ?>
<?php include("theme/clock.php"); ?>
<?php include("theme/navbar.php"); ?>
<div id="left_content">
<a href="/register.php"><?php include("theme/slider.php"); ?></a>
<?php include("theme/news-content.php"); ?>
</div>
<?php include("theme/footer.php"); ?>
</div> <!-- end #left_content -->
<div id="right_content">
<?php include("theme/server-info.php"); ?>
<a href="/vote_shop.php"><?php include("theme/vote.php"); ?></a>
<div id="latest_threads">
<br />
<div id="h-text-allign-lthreads">
<h4>LATEST THREADS</h4> </div> <!-- end #h-text-allign -->
<div class="text-allign-lthreads">
<br />
<?php include("theme/latest-threads.php"); ?>
</div> <!-- end #right_content -->
</div> <!-- end #container -->
</body>
</html>
and the css:
Code:
/* CENTER */
*{
margin:0;
}
/* ~~~~~~~~ TEXT ~~~~~~~~ */
/* TITLE FONT STYLE */
@font-face {
font-family: OptimusPrinceps-custom;
src:url('OptimusPrinceps.ttf');
}
img {
border:none;
}
a:visited {
color:#65981a;
}
a:link {
color:#65981a;
text-decoration:none;
}
a:active {
color:#e09800;
}
a:hover {
color:#e09800;
}
/* ~~~~~~~~ Design ~~~~~~~~ */
body {
color:#999999;
font-family:tahoma;
background-image:url('images/bg.jpg');
background-color:#000;
}
#container {
left:50%;
width:988px;
position:absolute;
margin-left: -494px;
}
#clock {
float:right;
margin-top:7px;
margin-right:20px;
}
#clockbox {
font-size: 12px;
color:#65981a;
}
#header {
background-image:url('images/header.png');
height: 120px;
width:988px;
margin-bottom:4px;
}
#navigation_bar {
background-image:url('images/navigation_bar.jpg');
width:988px;
height:35px;
}
#navigationbar-links {
width:655px;
float:left;
height:30px;
}
.text-allign-sinfo {
margin-left: 30px;
margin-top: 10px;
}
#h-text-allign-sinfo {
margin-left: 65px;
}
#h-text-allign-lthreads {
margin-left: 80px;
}
.text-allign-lthreads {
margin-left: 30px;
margin-top: -20px;
}
.text_navigation {
float:left;
font-size:12px;
margin-top:10px;
margin-left:20px;
}
#left_content {
margin-top:10px;
min-height:100px;
width:609px;
float:left;
}
#post_bg {
background-image:url('images/post_bg.jpg');
width:609px;
height:255px;
margin-bottom:10px;
background-repeat:no-repeat;
padding-left: 5px;
padding-top: 10px;
}
#post_bg-register {
background-image:url('images/register_bg.jpg');
width:609px;
height:590px;
margin-bottom:10px;
background-repeat:no-repeat;
}
#post_img {
margin-right:5px;
width:75px;
height:75px;
float:left;
margin-top: 5px;
}
.post_title{
font-size:24px;
font-family: OptimusPrinceps-custom;
color:#2f2f2f;
}
.post_author {
color:#181818;
font-size:8.83pt;
float: right;
}
.post_text {
height:180px;
word-wrap: break-word;
margin-top: 30px;
magin-right:5px;
overflow:block;
font-size:8.83pt;
width: 96%;
}
.divider {
width: 290px;
height: 2px;
margin-top: 15px;
background-image:url('images/divider.jpg');
}
#right_content {
margin-top:10px;
min-height:100px;
width:329px;
float:right;
}
.server_info {
width:329px;
height:180px;
background-image:url('images/server_info.png');
}
.vote {
width:329px;
height:90px;
background-image:url('images/vote.png');
margin-top: 10px;
}
#slider {
width:609px;
height:120px;
background-image:url('images/slider.png');
margin-bottom: 10px;
}
#latest_threads {
width:329px;
height:385px;
background-image:url('images/latest_threads.png');
margin-top: 10px;
}
#footer {
margin-top:10px;
margin-left:283px;
font-size:14px;
float:left;
text-align:center;
margin-bottom:20px;
}