CODEWITHSUNDEEP
asp.nethtmlcss
joncodo
joncodo

Reputation: 2328

Clear Property Not working as expected

This is what I have:

Label1 Value1 Label2 Value2

Label3 Value3 Label4 Value4

This is what I want:

Label1 Value1

Label2 Value2

Label3 Value3

Label4 Value4

Without using breaks
but using the clear property in css. 

<div id="leftColumn" style="width:200px; border:1px solid green; float:left; ">
                <asp:Label ID="lblVIN" runat="server" CssClass="label"  meta:resourcekey="lblVINResource" />
                <asp:Label ID="lblVINValue" runat="server" CssClass="value" /> 
                <asp:Label ID="lblYear" runat="server" CssClass="label"  meta:resourcekey="lblYearResource" />
                <asp:Label ID="lblYearValue" runat="server" CssClass="value" />
                <asp:Label ID="lblMake" runat="server" CssClass="label"  meta:resourcekey="lblMakeResource" />
                <asp:Label ID="lblMakeValue" runat="server" CssClass="value" />
                <asp:Label ID="lblModel" runat="server" CssClass="label"  meta:resourcekey="lblModelResource" />
                <asp:Label ID="lblModelValue" runat="server" CssClass="value" />
                <asp:Label ID="lblSeries" runat="server" CssClass="label"  meta:resourcekey="lblSeriesResource" />
                <asp:Label ID="lblSeriesValue" runat="server" CssClass="value" />
                <asp:Label ID="lblColour" runat="server" CssClass="label"  meta:resourcekey="lblColourResource" />
                <asp:Label ID="lblColourValue" runat="server" CssClass="value" />
                <asp:Label ID="lblCylinders" runat="server" CssClass="label"  meta:resourcekey="lblCylindersResource" />
                <asp:Label ID="lblCylindersValue" runat="server" CssClass="value" />
                <asp:Label ID="lblFuelType" runat="server" CssClass="label"  meta:resourcekey="lblFuelTypeResource" />
                <asp:Label ID="lblFuelTypeValue" runat="server" CssClass="value" />
                <asp:Label ID="lblAxels" runat="server" CssClass="label"  meta:resourcekey="lblAxelsResource" />
                <asp:Label ID="lblAxelsValue" runat="server" CssClass="value" />
                <asp:Label ID="lblNSCNumber" runat="server" CssClass="label"  meta:resourcekey="lblNSCNumberResource" />
                <asp:Label ID="lblNSCNumberValue" runat="server" CssClass="value" />

            </div>

this is the css so far...

   <style type="text/css" >
    .label{ color:Blue; clear:right;}
    .value{ color:Orange; clear:right;}
</style>

Thanks in advance.

Upvotes: 0

Views: 299

Answers (2)

monk
monk

Reputation: 215

you can give float property to label tag and clear and float property to value to get the desired result

Upvotes: 0

canon
canon

Reputation: 41665

You're not floating anything to then clear anything.

Check out this fiddle.

.label{ color:Blue; float:left;clear:left;}
.value{ color:Orange; float:left;}

Upvotes: 3

Related Questions