CODEWITHSUNDEEP
csshtml
omnix
omnix

Reputation: 1899

Divs will not float

I been trying every way possible to try and float the sidebar to the left and have it fit beside the content div, but it seems IMPOSSIBLE for me. Please help.

HTML:

  <div class="index-page">    

      <img src="images/hosting-header.png" width="458" height="179" alt="Hosting Header">
        <h1> Welcome to Elektrik Host! </h1>
        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis 
        egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante.
        Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris
        placerat eleifend leo.</p>
        <h1> A little about us </h1>
        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis 
        egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante.
        Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris
        placerat eleifend leo.</p>
    </div><!-- //index-page -->
    <div class="sidebar">

      <img src="images/sidebar-stickers.png" width="150" height="634" alt="Sidebar Stickers">

    </div><!-- //.sidebar -->

CSS:

.index-page { color: #000; width: 462px; }
.sidebar { float: right; width: 200px; }

clearfix :

    .clearfix:after {
   content: ".";
   visibility: hidden;
   display: block;
   height: 0;
   clear: both;
}

Upvotes: 0

Views: 224

Answers (3)

pinichi
pinichi

Reputation: 2205

  1. .sidebar { float: left; width: 200px; } not right
  2. To make them beside:
       - index-page also need floatleft too index-page{ float: left;} (FF need, IE not)
      - move sidebar to before of index-page

Upvotes: 0

David Thomas
David Thomas

Reputation: 253308

I always find it easier to put the float-ing content ahead of the content that makes way for it, so I switched your sidebar to come ahead of the index-page div, and used the following CSS:

  .sidebar {
    width: 200px;
    float: left;
  }

Demo over at JS Bin.

Upvotes: 2

Pavan
Pavan

Reputation: 18508

You can follow this tutorial: http://css.maxdesign.com.au/floatutorial/index.htm

CSS CODE

.floatright { float: right; }

HTML CODE

<p>
<img class="floatright" src"images/sidebar-stickers.png" width="150" height="634" alt="Sidebar Stickers">
<p>

you dont need to do just apply the class straight to the image.

PK

Upvotes: 0

Related Questions