Question

I used to have tables before to display the content and people here advised me to remove tables and use CSS floating for better styling.

I am new to everything. My Problem is I have content and side bar. I want it to be displayed like

content           | Sidebar

But Now with the current styling I have It is displaying like

content
|
Sidebar

Can you please correct me.

       <style type="text/css">

   .csscontent
    {

          margin-right: 500px;



    }

   .csssidebar
    {
        float: right;
        width: 500px;
        background: darkgreen;
       /*  height:500px; */



    }


</style>

If I add

  <div class="Content">
  all the content
 <div class="sidebar">
 <Image>
 </div>

If I add sidebar inside the content the image is getting displayed below the content leaving right-margin of 500px.

If I add sidebar outside of the content the image is getting displayed below the content.

  <div class="Content">
  all the content
  </div>

   <div class="sidebar">
   <Image>
  </div>

I want both content and side bar to be displayed side by side

Answer 1

In the HTML file you first need to set the floating elements, followed by the none floating ones. Because the floating element is going to block the entire “level” of the website and the floating elements are placed below.

So your html should look like this:

   <div class="sidebar">
   <Image>
  </div>
  <div class="Content">
  all the content
  </div>

Other then that it looks good.