Home/ Questions/Q 7609937
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-31T01:17:54+00:00

I have this and it does everything I want it to, but it seems

  • 0

I have this and it does everything I want it to, but it seems to me there would be a way to do this so that I can control the height of the divs seperately from all of the other identical properties. I just haven’t been able through my searches to find a way that makes sense to me.

Note I am about 3 days into html so if this is over complicated I will learn in steps I understand. I understood style sheets to simplify the process so it seemed like there would be a simpler way.

Thanks

<style type="text/css">
    body
    {

        width:1240px;
        border:solid 1px black  
    }

    .rightline1{float:right;width:618px;height:80px;border:solid 1px black;}
    .rightline2{float:right;width:618px;height:20px;border:solid 1px black;}
    .rightline3{float:right;width:618px;height:20px;border:solid 1px black;}
    .rightline4{float:right;width:618px;height:20px;border:solid 1px black;}
    .rightline5{float:right;width:618px;height:20px;border:solid 1px black;}
    .rightline6{float:right;width:618px;height:20px;border:solid 1px black;}
    .rightline7{float:right;width:618px;height:20px;border:solid 1px black;}
    .rightline8{float:right;width:618px;height:20px;border:solid 1px black;}
    .rightline9{float:right;width:618px;height:20px;border:solid 1px black;}
    .rightline10{float:right;width:618px;height:20px;border:solid 1px black;}
    .rightline11{float:right;width:618px;height:20px;border:solid 1px black;}
    .rightline12{float:right;width:618px;height:20px;border:solid 1px black;}
    .leftline1{float:left;width:618px;height:80px;border:solid 1px black;}
    .leftline2{float:left;width:618px;height:20px;border:solid 1px black;}
    .leftline3{float:left;width:618px;height:20px;border:solid 1px black;}
    .leftline4{float:left;width:618px;height:20px;border:solid 1px black;}
    .leftline5{float:left;width:618px;height:20px;border:solid 1px black;}
    .leftline6{float:left;width:618px;height:20px;border:solid 1px black;}
    .leftline7{float:left;width:618px;height:20px;border:solid 1px black;}
    .leftline8{float:left;width:618px;height:20px;border:solid 1px black;}
    .leftline9{float:left;width:618px;height:20px;border:solid 1px black;}
    .leftline10{float:left;width:618px;height:20px;border:solid 1px black;}
    .leftline11{float:left;width:618px;height:20px;border:solid 1px black;}
    .leftline12{float:left;width:618px;height:20px;border:solid 1px black;}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
    <div class="leftline1"></div>
    <div class="rightline1"></div>
    <div class="leftline2"></div>
    <div class="rightline2"></div>
    <div class="leftline3"></div>
    <div class="rightline3"></div>
    <div class="leftline4"></div>
    <div class="rightline4"></div>
    <div class="leftline5"></div>
    <div class="rightline5"></div>
    <div class="leftline6"></div>
    <div class="rightline6"></div>
    <div class="leftline7"></div>
    <div class="rightline7"></div>
    <div class="leftline8"></div>
    <div class="rightline8"></div>
    <div class="leftline9"></div>
    <div class="rightline9"></div>
    <div class="leftline10"></div>
    <div class="rightline10"></div>
    <div class="leftline11"></div>
    <div class="rightline11"></div>
    <div class="leftline12"></div>
    <div class="rightline12"></div>
</div>
</form>
</body>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I see two options:

    1. Create a separate rule with all common styles, and apply to all classes, like this

      .rightline1, .rightline2 (...) .rightLine12 { /* all current rules here */ }

      And then just add a separate rule for a single class when necessary.

    2. Another option (looks better to me): since you can assign any number of classes to an element, just add an extra class for the common styles. Example:

      HTML:

      <p class="rightline rightline1">Lorem ipsum</p>

      CSS:

      .rightline { /* all current rules here */ } 
.rightline1 { width: 200px; }
    • 0