• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 525
  • Last Modified:

div tags within a span tag / tableless css

I am trying to design a page using a tableless css layout.  Here is the problem: a modal panel opens up using ajax.  The layout is contained within the modal panel which renders as a span (the modal panel), no other choice here.  I am trying to create two separate cloumns within the modal panel, one on the left and the other on the right.  For some reason, whenever I attempt this the controls within the left and right divs go out in a straight line horizontally instead of vertically in a straight line, even if I set the widths for the divs.  It seems as if the div tag borders are not being honored.  I have tried both static and relative positioning with the same effect.  Could someone point me in the right direction to solving this problem?
here is a sample scenario:

<code>
     <span>
      <div id="divleft" class="position:relative;width:150px;float:left">
           label
           textbox
           label
           textbox
           etc.
      </div>
      <div id="divright" class="position:relative;width:450px;float:right">
           label
           textbox
           label
           textbox
           etc.
      </div>
     </span>
</code>  
0
ksdeveloper
Asked:
ksdeveloper
1 Solution
 
TNameCommented:
Hi, the inline style should be defined as
  style="position:relative;width:150px;float:left"
and not
   class="position:relative;width:150px;float:left"


The text boxes and labels will align in a row because they are inline elements that do not cause line-breaks by default. You can specify  "display:block;" for them (or use <br> elements for instance)

Also, spans are inline elements, and inline elements are not designed to contain block elements as divs. If it has to be a span, you could assign that span "display:block;" so it would behave as a div.

Have a look at this:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<head>
<style>
span { background-color: #ddd; display:block; overflow:hidden; }
input.blockElement { display:block; margin:4px; }
#divleft, #divright { border:1px solid #f00; }
</style>
</head>

<body >
 

 <span id="container">
      <div id="divleft" style="width:450px; float:left">
           <label>aaa</label><br>
               <input type="text"  class="blockElement">
           <label>bbb</label><br>
               <textarea style="width:400px;"> </textarea>
               <input type="text"  class="blockElement">
               <input type="text"  class="blockElement">                  
      </div>
      <div id="divright" style="width:450px; float:right">
               <input type="text" class="blockElement">
               <input type="text" class="blockElement">  
               <input type="text" class="blockElement">
               <input type="text" class="blockElement">                
      </div>
</span>

</body>
</html>
0

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now