محاذاة كائن من اليسار إلى اليمين بطريقة سهلة غير معقدة

السلام عليكم ورحمة الله وبركاته

مع خطواتي الأولى في تعلم برمجة الويب, أحببت ان أريكم نموذجا سهرت عليه طوال الليل, لكن يبدو أني أقل من ضعيف في اللغة, فأحببت أن أشارككم ما فعلت لتصوبوا لي أخطائي.

حملت برنامج يدعى netbeans وهو محرر رائع, كبداية ومع خبرتي القليلة, أحببت أن أقلد بعد صفحات الويب.

حسناً, كيف سأبدأ ؟

أول صفحة سأصنعها أو جزء من صفحة وهي الشريط العلوي في الفيس بوك

وقسمتها على الشكل التالي في عدة مجموعات DIV

• الشريط الكامل بلون موحد وسميته class="topline"

• في داخله class="wr"

• أيضا في داخله :

id="logo"

id="search"

• وأخيرا قائمة صغيرة داخل topline وخارج wr اسمها class="menu"

فيكون ملف ال html على الشكل التالي :

<div class="topline">
    <div class="wr">
        <div id="logo">
            <p>LOGO</p>
        </div>
        <div id="search">
            <input type="text" name="lname">
        </div>
    </div>
    <div class="menu">
    </div>
</div>

أما ملف CSS فعملته على الشطل التالي :

* {
    background-color: #f0f0f0;
    font-family: tahoma;

}

.topline {
    width: 100%;
    height: 50px;
    background-color: #555;
}

.wr {
    width: 50%;
    height: 50px;
    margin-left: 15%;
    margin-right: 2%;
    background-color: #555;
}

#logo p {
    padding-top: 15px;
    margin-left: 2%;
}

#search {
    padding-left: auto;
    padding-right: 2%;
}

حسنا بعد كثير من المحاولات وسهر طويل وألم في الرأس :) لم أستطع أن أجعل #logo على يسار .wr وأيضا أن أجعل #search على يمين .wr كما ذكرت سابقا أن الاي دي #logo, #search داخل كلاس .wr والتي هي بدورها داخل .topline

هل بالإمكان توضيح كيف يمكنني أن أتحكم بطريقة سهلة بهذه الرموز وألا يأخذ مني توزيع هذه العناصر وقتا طويلا أستثمره في تطوير بنية الموقع.

لقد أطلت عليكم

شكرا لاصغائكم