CODEWITHSUNDEEP
asp.netcss
NoviceMe
NoviceMe

Reputation: 3256

Move div in next line using css

I have two div's one has textbox in it and other just plain text. This is how it looks: image . I want to move text div which has language in it to the next line where arrow is showing in the pic. I searched every where cant find any solution the wordwrap is not working. Also i have to do this within css.

Here is the aspx code for both:

<asp:Panel ID="search" runat="server" EnableViewState="False" Wrap="False">
 <div id="txtBox">
   <asp:textbox id="box" runat="server"></asp:textbox>
   <div id="text" runat="server">Language</div>
 </div>
</asp:Panel>

css:

#search
{
    position:absolute; 
    top:100px;  
    height:50px;
    left:100px;
    width:1000px;    
}
#txtBox
{
    float: left;
}

Upvotes: 1

Views: 7319

Answers (4)

JohnB
JohnB

Reputation: 18962

You don't want to use float:left in this situation. float:left is for stacking block level HTML elements horizontally.

block level elements automatically stack vertically, which seems to be what you want.

However, the <asp:TextBox> is an inline level element, so you can put a <br /> after it, or wrap it in a <div>.

Solution:

HTML

<asp:Panel ID="search" class="search-class" runat="server" EnableViewState="False" Wrap="False">
 <div id="txtBox">
   <asp:textbox id="box" runat="server"></asp:textbox>
   <br />
   <div id="text" runat="server">Language</div>
 </div>
</asp:Panel>

OR

<asp:Panel ID="search" class="search-class" runat="server" EnableViewState="False" Wrap="False">
 <div id="txtBox">
   <div>
     <asp:textbox id="box" runat="server"></asp:textbox>
   </div>
   <div id="text" runat="server">Language</div>
 </div>
</asp:Panel>

CSS

.search-class
{   /* Curt is right, the ID="search" is in a naming container, */
    /* so use class selector */
    position:absolute; 
    top:100px;  
    height:50px;
    left:100px;
    width:1000px;    
}

Upvotes: 1

NoviceMe
NoviceMe

Reputation: 3256

Here is the solution for anyone who is stuck in same situation:

#text
{
  clear: left;
}

clear:left moves the text to next line to the bottom of the textbox. Then you can use margin-left to set the text at any position you want.

Upvotes: 1

Curtis
Curtis

Reputation: 103348

When ASP.NET controls are rendered to the client, they sometimes produce different IDs (unless specified otherwise in ASP.NET 4).

Looking at your code, I don't see any control with an ID of txtBox, so these styles aren't being applied.

When working with ASP.NET, I find its best to use classes for styling, as these will stay the same after rendering.

<asp:Panel ID="search" runat="server" EnableViewState="False" Wrap="False" CssClass="search">
 <div id="txtBox">
   <asp:textbox id="box" runat="server" CssClass="txtBox"></asp:textbox>
   <div id="text" runat="server">Language</div>
 </div>
</asp:Panel>

.search
{
    position:absolute; 
    top:100px;  
    height:50px;
    left:100px;
    width:1000px;    
}
.txtBox
{
    float: left;
}

I haven't tested this code, but you should now see these styles applying correctly, and therefore you can amend them as you wish.

Upvotes: 0

Kimtho6
Kimtho6

Reputation: 6184

have you tryed doing: clear:both on the div with the language?

and maybe you should contain the textbox 

/* Containing floats */
.contain:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

/* IE6 */ 
* html .contain {
    height: 1%;
}

/* IE7 */
*:first-child+html .contain {
    min-height: 1px;
}

Upvotes: 0

Related Questions