look at this:
http://www.xgs-gaming.com/ladder_system_1.1/index.php
these are the relevant wrappers:
as you can see i try to margin the log in div which i will fill up with forms, but i cant position it where i want, it just rapes the whole header :S why
Code: Select all
.page_wrapper {
margin: 0 auto;
width: 1240px;
}
.header_menu_wrapper {
background-color:red;
width:1236px;
height:311px;
}
.middle_wrapper {
width:1236px;
background-color:#dfdfdf;
}
.column_small_wrapper {
float: left;
width: 320px;
}
.column_mid_wrapper {
float: left;
width: 596px;
}
.column_big_wrapper {
float: left;
width: 916px;
}
.header_container {
background-color:blue;
background-image:url('../images/header_top.jpg');
width:1204px;
height:228px;
}
.menu_container {
background-color:white;
background-image:url('../images/header_bottom.jpg');
width:1204px;
height:53px;
}
.login_container {
display:block;
width:480px;
height:28px;
margin-top:100px;
margin-left:710px;
background-color:red;
}Code: Select all
<div class="page_wrapper">
<div class="header_menu_wrapper">
<div class="header_box_wrapper">
<div class="header_box_noheader"></div>
<div class="header_box_main_container">
<div class="header_container">
<div class="login_container"></div>
</div>
<div class="menu_container"> <?php require "menu.php"; ?></div>
</div>
<div class="header_box_bottom">
</div>
</div>
</div>
<div class="middle_wrapper">
<div class="column_small_wrapper">
<div class="small_box_wrapper">
<div class="box"><p>Top 10 Online Standings</p></div>
<div class="small_box_main_container_padding">
<?php require "online_standings_part.php"; ?>
</div>
<div class="small_box_bottom">
</div>
</div>
<div class="small_box_wrapper">
<div class="box"><p>Top 10 Offline Standings</p></div>
<div class="small_box_main_container_padding">
<?php require "offline_standings_part.php"; ?>
</div>
<div class="small_box_bottom">
</div>
</div>
<div class="small_box_wrapper">
<div class="box"><p>10 Recent Groups</p></div>
<div class="small_box_main_container_padding">
</div>
<div class="small_box_bottom">
</div>
</div>
</div>
<div class="column_mid_wrapper">
<div class="mid_box_wrapper">
<div class="box"><p>Member Login</p></div>
<div class="mid_box_main_container_padding">
<?php require "form_login.php"; ?>
</div>
<div class="mid_box_bottom">
</div>
</div>
<div class="mid_box_wrapper">
<div class="box"><p>F.A.Q</p></div>
<div class="mid_box_main_container_padding">
</div>
<div class="mid_box_bottom">
</div>
</div>
</div>
<div class="column_small_wrapper">
<div class="small_box_wrapper">
<div class="box"><p>Shoutbox</p></div>
<div class="small_box_main_container_padding">
<?php require "shoutbox.php"; ?>
</div>
<div class="small_box_bottom">
</div>
</div>
</div>
</div>
</div>