Page 1 of 1

margin issue

Posted: Fri Jan 22, 2010 4:15 pm
by insei
i dont understand why i sometimes can put margin-top and why i sometimes cant :S i dont get it at all.

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;
}
this is the html code:

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>