Home/ Questions/Q 6696135
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-26T06:18:19+00:00

I know the obvious solution is to wrap banner and main in a float

  • 0

I know the obvious solution is to wrap banner and main in a float container, but is there any other way to ‘bump’ sidebar to the top, given the constraints of the HTML below?

http://html-bin.appspot.com/aghodG1sLWJpbnIMCxIEUGFnZRjJ0wYM

<!DOCTYPE html>
<head>
    <meta charset="utf-8" />
    <title>Floats</title>
    <style>

        #banner {
            width: 70%;
            float: left;
            padding: 10px;
            border: 1px solid blue;
        }

        #main {
            width: 70%;
            float: left;
            padding: 10px;
            border: 1px solid orange;
        }

        #sidebar {
            width: 25%;
            float: right;
            padding: 10px;
            border: 1px solid green;
        }

    </style>
</head>
<body>

    <div id="banner">
        Banner
    </div>

    <div id="main">
        Main
    </div>

    <div id="sidebar">
        Sidebar
    </div>

</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team
    #sidebar {
    border: 1px solid green;
    display: inline-block;
    .display: inline;
    .zoom:1;
    padding: 10px;
    width: 22%;
}
    • 0