Home/ Questions/Q 130237
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-11T05:54:59+00:00

I am new to CSS. I have a Top, Right, and Content div. I

  • 0

I am new to CSS. I have a Top, Right, and Content div. I want it to look like this:

Top     Right  Content

However, it is showing up like this:

Top Content Right

I know I need a clear somewhere, but I am not sure where because I am unclear on how clears actually work, so can someone please explain the html code below on where I would apply the clear and what type of clear I would choose (left, right, or both). Here is the stripped down html code:

<div style='float:left; width:600px; height:100px;              border:1px solid black;'>Top</div> <div style='float:right; width:200px; height:800px;              border:1px solid red;'>Right</div> <div style='width:500px; height:600px;              border:1px solid blue;'>Content</div>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Put the clear on the Content <div>:

    <div style='float:left; width:600px; height:100px;              border:1px solid black;'>Top</div> <div style='float:right; width:200px; height:800px;              border:1px solid red;'>Right</div> <div style='width:500px; height:600px; clear: both;             border:1px solid blue;'>Content</div>

    This pushes the Content <div> so that it is below any floating elements (from the left or the right).

    A side note: you probably should use CSS classes or the id attribute for convenience instead of inlining using style.

    • 0