asked on

fix css

I need to fix this css. I'm having issues creating large area for comments,etc,
Id like to line up it properly with the rest of the pages.

<div class="row">
<div class="column w-70-percent">
Supp Review Req Date
</div>
<div class="column w-20-percent">
<asp:TextBox ID="TextBox23" runat="server" Width="96px"></asp:TextBox>
</div>
<div class="column w-30-percent">
</div>
<div class="column w-30-percent">
 
</div>
<%-- <div class="clear-row">
</div>--%>
</div>

<div class="row">
<div class="column w-70-percent">
Suppl Review Date:
</div>
<div class="column w-20-percent">
<asp:TextBox ID="TextBox24" runat="server" Width="94px"></asp:TextBox>
</div>
<div class="column w-30-percent">
<asp:CheckBox ID="CheckBox9" runat="server" Text="Supp Review Approv" />
</div>
<div class="column w-30-percent">
</div>
<%--<div class="clear-row">
</div>--%>
</div>
<div class="row_comment" align="center">
<div class="w-wider" align="center">
Supp Review Recommendation:
</div>
<div class="largediv">
<asp:TextBox ID="TextBox25" runat="server" Width="488px" Height="50px" TextMode="MultiLine" ></asp:TextBox>
</div>

<div class="column w-30-percent">
</div>--%>
<%--<div class="clear-row">
</div>--%>
</div>

<div class="row">
<div class="column w-70-percent">
Comments:<br />
</div>
<div class="column w-20-percent">
<asp:TextBox ID="TextBox26" runat="server"></asp:TextBox>
</div>
<div class="column w-30-percent">
</div>
<div class="column w-30-percent">
</div>
<%-- <div class="clear-row">
</div>--%>
</div>

div.rows div.row {
            clear:both;
            /*border-bottom: 1px dashed black;*/
            width: 100%;
/*height: 51px;*/
height: 37px;
font-family:'Times New Roman';
font-size:smaller;
}

      div.rows div.column {
            float: left;
height: 30px;

}

      div.rows div.clear-row {
            line-height: 0px;
            font-size: 0px;
            clear:both;
      }

      .w-70-percent {
            width: 27%;
border: 1px solid black;
white-space:nowrap;
     }
      .w-30-percent {
            width: 24%;
border: 1px solid black;
      }
.w-20-percent {
            width: 14%;
border: 1px solid black;
text-align:left;
float:left;
}

.w-comments {
            width: 58%;
border: 1px solid black;
      }
.w-wider
{
width: 28%;
border: 1px solid black;
white-space: nowrap;
float:left;
}
.w-comments_title {
            width: 27%;
border: 1px solid black;
height:56px;
      }

      #container {
            /*margin: 20px;*/
            width:846px;
            border: 2px solid black;
      }

.clear-row
{
width: 482px;
}

.row
{
width: 900px;
}
.row_comment
{
width: 91%;
height:72px;
font-size:small;
text-align:right;
}
input[type="text"]
{
outline: none;
font-size:small;
font-family:'Times New Roman';
text-anchor:end;
color: #00008B;
background-color: #FCFFF0;
border: 1px inset #000;
margin-left: 10px;
}
.largediv
{

height: 68px;
border: 1px solid black;
margin-left: 11px;
}

Rob

Can you please post a link to your page or at least the rendered html

Mrunal

hi
you have done it in very complicated way.
Can you please share some information that how you should get this information to be visible in browser?
(any handwritten image or any reference will work)

Kim Walker

Id like to line up it properly with the rest of the pages.

Please post a link to the page with the problem and links to the "rest of the pages" it is supposed to line up with.

COBOLdinosaur

You are not going to get much help if you do not respond to the request from the Experts. We need to see the page and a coherent description of the desired result.

Cd&

zachvaldez

ASKER

here's a better one. I missed the container in the div.. and put it together.

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
div.rows div.row
{
clear: both;
/*border-bottom: 1px dashed black;*/
width: 100%;
/*height: 51px;*/
height: 37px;
font-family: 'Times New Roman';
font-size: smaller;
}

div.rows div.column
{
float: left;
height: 30px;
}

div.rows div.clear-row
{
line-height: 0px;
font-size: 0px;
clear: both;
}

.w-70-percent
{
width: 27%;
border: 1px solid black;
white-space: nowrap;
}

.w-30-percent
{
width: 24%;
border: 1px solid black;
}

.w-20-percent
{
width: 14%;
border: 1px solid black;
text-align: left;
float: left;
}

.w-comments
{
width: 58%;
border: 1px solid black;
}

.w-wider
{
width: 28%;
border: 1px solid black;
white-space: nowrap;
float: left;
}

.w-comments_title
{
width: 27%;
border: 1px solid black;
height: 56px;
}

#container
{
/*margin: 20px;*/
width: 846px;
border: 2px solid black;
}

.clear-row
{
width: 482px;
}

.row
{
width: 900px;
}

.row_comment
{
width: 91%;
height: 72px;
font-size: small;
text-align: right;
}

input[type="text"]
{
outline: none;
font-size: small;
font-family: 'Times New Roman';
text-anchor: end;
color: #00008B;
background-color: #FCFFF0;
border: 1px inset #000;
margin-left: 10px;
}

.largediv
{
height: 68px;
border: 1px solid black;
margin-left: 11px;
}
</style>
</head>
<body>
<div id="container">
<div class="row">
<div class="column w-70-percent">
Supp Review Req Date
</div>
<div class="column w-20-percent">
<asp:TextBox ID="TextBox23" runat="server" Width="96px"></asp:TextBox>
</div>
<div class="column w-30-percent">
</div>
<div class="column w-30-percent">
 
</div>
<%-- <div class="clear-row">
</div>--%>
</div>

<div class="row">
<div class="column w-70-percent">
Suppl Review Date:
</div>
<div class="column w-20-percent">
<asp:TextBox ID="TextBox24" runat="server" Width="94px"></asp:TextBox>
</div>
<div class="column w-30-percent">
<asp:CheckBox ID="CheckBox9" runat="server" Text="Supp Review Approv" />
</div>
<div class="column w-30-percent">
</div>
<%--<div class="clear-row">
</div>--%>
</div>
<div class="row_comment" >
<div class="w-wider" >
Supp Review Recommendation:
</div>
<div class="largediv">
<asp:TextBox ID="TextBox25" runat="server" Width="488px" Height="50px" TextMode="MultiLine"></asp:TextBox>
</div>

<div class="column w-30-percent">
</div>

<%--<div class="clear-row">
</div>--%>
</div>

<div class="row">
<div class="column w-70-percent">
Comments:<br />
</div>
<div class="column w-20-percent">
<asp:TextBox ID="TextBox26" runat="server"></asp:TextBox>
</div>
<div class="column w-30-percent">
</div>
<div class="column w-30-percent">
</div>
<%-- <div class="clear-row">
</div>--%>
</div>

</div>
</body>
</html

Rob

So you've solved it yourself or do you still have an issue?

zachvaldez

ASKER

I fixed this myself with lots of patience and your suggestion.

ASKER CERTIFIED SOLUTION

Rob

membership

Create a free account to see this answer

Signing up is free and takes 30 seconds. No credit card required.

See answer

zachvaldez

ASKER

Excellent help and directon noted