I have a page which is designed using CSS layout. It has a simple form where two spans are used as columns. In the 1st span, i have used float:left and width to create width of the 1st column. In the second span when i have more data (say more than 3 lines) then the third line is coming from the extreme left instead of confining to the second column.
If i specify width and float for the second column(span) also then it works. But i don’t want to do that in that way.
Using display:block is also not solving the problem completely. Please help me in resolving this problem.
margin-left in % is working fine if i have data in both the columns. But i am not restricting the second columns width and using this column to span the complete length where ever required in the page.
The length of data is decided on runtime in my case. So, i can’t go for another CSS class for second column when i have more data in second column.
PFB the sample code:
<html>
<head>
<style> #col1{background-color: green; float: left; width: 20%;} #col2{background-color: yellow; margin-left:20%;display: block;}
</style>
</head>
<body>
<p>
<span id=“col1” >sample data</span>
<span id=“col2”>
sample data sample data sample data sample data sample data sample data sample data
sample data sample data sample data sample data sample data sample data sample data
sample data sample data </span>
</p>
<p>
<span id=“col2”>
sample data sample data sample data sample data sample data sample data sample data
sample data sample data sample data sample data sample data sample data sample data
sample data sample data </span>
</p>
</body>
</html>
margin-left in % is working fine if i have data in both the columns
What is the problem you are seeing when there is only data in one column? Why is this a problem or perhaps what is it that you do want to happen?
The code will make two columns as required. The first column has to have a width set but the second column doesn’t need a width at all.
If you can show a test cases where it’s not doing what you want I might be able to understand the effect you want. It’s probably just me not seeing the obvious as I’m sure you know what you mean
Let me try to explain you clearly what my requirement is.
There is a simple form designed in div layout with span used as columns.
The structure of the form is pre-defined with two columns. So, when ever i want to place a data to span complete row then i am using 2nd column (Where i have not specified any width).
The suggestion which you gave is to use margin-left in %. If i want to display data in two columns, then i don’t have any problem. Now, when i want to span a data which covers complete row then i can’t go with this as this will create left margin.
So, i want a solution with following requirement.
If data is more in 2nd column then it should not come in 1st column(This was the problem mentioned in the 1st post)
I should be able to use 2nd column for placing a data which should span complete row without any left margin.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
#col1{background-color: green; float: left; width: 20%;}
#col2{background-color: yellow;overflow:auto;display:block}
* html #col2{zoom:1.0}
</style>
</head>
<body>
<p>
<span id="col1" >sample data</span>
<span id="col2">
sample data sample data sample data sample data sample data sample data sample data
sample data sample data sample data sample data sample data sample data sample data
sample data sample data </span>
</p>
<p>
<span id="col2">
sample data sample data sample data sample data sample data sample data sample data
sample data sample data sample data sample data sample data sample data sample data
sample data sample data </span>
</p>
</body>
</html>
If there is no float in the left column then column2 will start at the left edge. The overflow and haslayout ensure that if a float is present in column one then the column 2 forms a rectangular block to the side.
Can I ask why you are using spans to make a column?
