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
  • 124 Views
  • 34 Minutes Discussion Span
  • Latest Post Latest Post by DaveAmour

Dani AI

Generated

had the right idea using floats and a clear, and showed the quick fix: the problem usually comes from how clear works rather than a browser bug. Clear only moves the element it’s applied to; it does not automatically make later siblings behave as floated items. If the item that should start the second row is not itself floated, the following floated element can still try to rise into available space.

Practical checks and quick rules:

  • A block that must start a new float-row should either be floated itself or be preceded by a clearing element.
  • Prefer clear: both for robust breaking (it handles floats on either side).
  • Verify widths + margins actually allow two boxes per row — summed widths and margins must be less than the container width. Use the browser inspector to watch how each box is laid out.

Two safe alternatives:

  • Use a simple clearfix on the parent so rows don’t collapse (creates a new block formatting context). This keeps float-based layout intact and avoids inserting empty “break” elements.
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}
  • Use modern layout: Flexbox makes “two items per row” trivial and more future-proof. A container with display:flex and flex-wrap:wrap lets each box take 50% of the row (minus gap) without fiddling with clears.
.container { display:flex; flex-wrap:wrap; gap:10px; }
.box { flex: 0 0 calc(50% - 10px); }

For deeper reference on float/clear behavior and clearfix/flexbox patterns, see MDN’s articles on the clear and float properties and the Flexbox primer: clear, float, Flexbox basics.

Recommended Answers

All 2 Replies

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.