Member Avatar for tqmd1

Sir I am using these codes

<html>
   <head>
      <title>untitled</title>
      <style type="text/css">
         #boxA{
         float:left;
         }
         #boxB{
         float:left;
         }
         #boxC{
         clear:left;
         }
         #boxD{
         float:left;
         }
         #boxA, #boxB, #boxC, #boxD{
         border:1px solid green;
         text-align:center;
         line-height:100px;
         margin:10px; 
         width:100px;
         height:100px;
         }
      </style>
   </head>
   <body>
      <p>First Row</p>
      <div id="boxA">Box A</div>
      <div id="boxB">Box B</div>
      <p>Second Row</p>
      <div id="boxC">Box C</div>
      <div id="boxD">Box D</div>
   </body>
</html>

Now I want to get this result, shown in attachment.

Two dives in first row
Two dives in second row

hh.png 4.45 KB
  • 2 Contributors
  • 2 Replies
  • 113 Views
  • 34 Minutes Discussion Span
  • Latest Post Latest Post by DaveAmour
Member Avatar for DaveAmour

http://www.paxium.co.uk/content/daniweb/divclear.html

<html>
<head>
    <title>untitled</title>
    <style type="text/css">
        body
        {
            font-family: sans-serif;    
        }

        p
        {
            clear: left;    
        }

        #boxA
        {
            float: left;
        }

        #boxB
        {
            float: left;
        }

        #boxC
        {
            clear: left;
            float: left;
        }

        #boxD
        {
            float: left;
        }

        #boxA, #boxB, #boxC, #boxD
        {
            border: 1px solid green;
            text-align: center;
            line-height: 100px;
            margin: 10px;
            width: 100px;
            height: 100px;
        }
    </style>
</head>
<body>
    <p>First Row</p>
    <div id="boxA">Box A</div>
    <div id="boxB">Box B</div>
    <p>Second Row</p>
    <div id="boxC">Box C</div>
    <div id="boxD">Box D</div>
</body>
</html>
Member Avatar for DaveAmour

You can even make your CSS more concise - put all your float left in on the line 36 section for example.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.