0

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

Attachments hh.png 4.45 KB
2
Contributors
2
Replies
10
Views
2 Years
Discussion Span
Last Post by DaveAmour
1

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>
1

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

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.