2014-01-27 4 views
-4

У меня есть страница входа, и я хочу добавить боковую панель div влево. В настоящее время, когда я пишу что-то со стороны левого края, он течет по странице? Как исправить этуКак создать боковую панель lefthand?

Вот мой код

<div align="left"> 
    sdfsdfsdfsdfsfsdfsdf 

    </div> 

    <div align ="center" style="border: thick none #008080; height: 479px; width: 595px; color: #000000; font-size: medium; font-weight: bold;"><br /><br /> 


     Not a User? 
     <asp:LinkButton ID="LinkButton1" runat="server" Font-Bold="True" 
      ForeColor="Blue" CausesValidation="false" onclick="LinkButton1_Click">Sign Up</asp:LinkButton><br /><br /> 
     <center><div class="mainbars"> <div class="vpb_main_wrapper1" top=20 align="center"><br clear="all"></br> 
     <div><h1 align="center" 

       style="color: #000000; font-weight: bold; font-size: xx-large; font-family: Calibri;"> 
      LOG IN</h1></div><hr /><br /> 

     <div align="left" style="width:115px; padding-top:10px;float:left; color: #000000; font-size: medium; font-weight: bold; font-family: Calibri;"> 
      UserName</div>    
    <div align="left" style="width:300px;float:left;"> 
    <input id="txt_username" class="vpb_textAreaBoxInputs" type="text" value="" name="username" runat="server" onclick="return username_onclick()" placeholder="Username"/> 
     <asp:Label ID="LbelUser" runat="server"></asp:Label> 
     <asp:RequiredFieldValidator ID="txt_userna" runat="server" 
     ControlToValidate="txt_username" ErrorMessage="* Enter UserName"></asp:RequiredFieldValidator> 
      </div><br />................. etc etc 

      </center> 

      </div> 
+0

Обеспечить CSS, пожалуйста, я также считаю, что атрибут Align является устаревшим, так не должен работать в HTML5 doctype – ggdx

+0

Пожалуйста, pu t это в скрипке ... –

+0

float: слева; ваш друг PS: Что вы пробовали? PS2: вставить чистый код, включая CSS –

ответ

2

Что-то вроде этого. Вам также необходимо использовать clearfix hack для очистки поплавков.

HTML

<div class="container"> 

    <div class="cf"> 
     <div class="sidebar">sidebar</div> 
     <div class="login">login</div> 
    </div> 
    hhjhj 
</div> 

CSS

.sidebar { float:left; width:300px; background:#eee;} 
.login { float:right; width:400px; background:#ccc; } 

/** 

/* http://nicolasgallagher.com/micro-clearfix-hack/ 

* For modern browsers 
* 1. The space content is one way to avoid an Opera bug when the 
* contenteditable attribute is included anywhere else in the document. 
* Otherwise it causes space to appear at the top and bottom of elements 
* that are clearfixed. 
* 2. The use of `table` rather than `block` is only necessary if using 
* `:before` to contain the top-margins of child elements. 
*/ 
.cf:before, 
.cf:after { content: " "; /* 1 */ display: table; /* 2 */ } 

.cf:after { clear: both; } 

/** 
* For IE 6/7 only 
* Include this rule to trigger hasLayout and contain floats. 
*/ 
.cf { *zoom: 1; } 

JSFiddle Demo

0

Добавьте эту строку CSS в каждом Div

style="float:left;"

Смежные вопросы