Skip navigation
Comp. 792
Comp. 792
Currently Being Moderated

div is not floating to the right!

Aug 13, 2012 11:08 PM

http://www.buzzfx.ca/services_new.html

 

I Need Left and Right Columns On The Page

In the above page I am trying to create left and right columns with about 20px. of space in between.

I created 2 separate divs (a .class named “.column_left" and a class named “.column_right”) and floated one to the left and one to the right.

 

 

Problem

The right div is not floating up to the right of the page but staying down to the left and I am unsure why?

 

 

The reason the right column may not be floating right is due to the “clearfix” container it is in but this is just a guess.

 

Important!

I do not want to change the container’s "style" the columns are in because that will change the layout of my whole site unless there is a way to change “only” the container in the above page. But again that may not be the problem.

 

I hope this all makes some sense.

428 Views   5 Replies   Latest reply: osgood_, Aug 15, 2012 12:55 AM
 
Replies
  • osgood_
    Currently Being Moderated
    1. osgood_,
    Aug 13, 2012 11:45 PM   in reply to Comp. 792
    Report

    column_right <div> is NOT floating right because its in one of your column_left <divs>. Why are you using two column_left <divs> when only one is required? Just delete the one that is not required.

     

    Delete the first instance:

     

    <div id="main" class="clearfix">

     

    <div class="column_left"><!-- DELETE THIS -->

     

    and delete its closing tag:

     

    </div><!-- DELETE THIS -->

        </div><!-- #main -->

     
    |
    Mark as:
  • Comp. 792
    Currently Being Moderated
    2. Comp. 792,
    Aug 14, 2012 9:58 AM   in reply to osgood_
    Report

    osgood,

     

    Thank you very much!

     

    So now I have the columns left and right which is great. but I have encountered “one” problem.

     

    Problem

    The "title1" div is surrounding the "title3" and "title5" div’s. When I remove the </div> then all the div’s line up left in a stack (not what I want)

     

    So to clarify, I like the look of the current page visually (with the columns on the left and right) but how do I get the left div’s to be separated like the right div’s are but keep the look of the page? See image below.

     

    columns.jpg

     
    |
    Mark as:
  • osgood_
    Currently Being Moderated
    3. osgood_,
    Aug 14, 2012 10:11 AM   in reply to Comp. 792
    Report

    You really just need to make 2 columns on your page and then insert the 3 <divs> into each column.

     

    Wrapping your 3 left divs in another <div class="column_left"></div> may work without the need to reconstruct the page.

     

     

    <div class="column_left"> 

    <div class="column_left">Title 1<img height="188" src="images/2D CHARACTER/THUMB/black_thumb.jpg" width="450" />Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam at lacus nisl, non consequat odio. Nam vel ligula massa. Nullam ligula velit, molestie accumsan fringilla a, facilisis non felis. Nullam blandit ligula metus, nec ultricies erat. Ut quam lorem, sagittis eu aliquam in, malesuada vitae dolor.</div>

    <div class="column_left">Title 3<img height="188" src="images/2D CHARACTER/THUMB/black_thumb.jpg" width="450" /> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam at lacus nisl, non consequat odio. Nam vel ligula massa. Nullam ligula velit, molestie accumsan fringilla a, facilisis non felis. Nullam blandit ligula metus, nec ultricies erat. Ut quam lorem, sagittis eu aliquam in, malesuada vitae dolor.</div>

    <div class="column_left">Title 5<img height="188" src="images/2D CHARACTER/THUMB/black_thumb.jpg" width="450" /> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam at lacus nisl, non consequat odio. Nam vel ligula massa. Nullam ligula velit, molestie accumsan fringilla a, facilisis non felis. Nullam blandit ligula metus, nec ultricies erat. Ut quam lorem, sagittis eu aliquam in, malesuada vitae dolor.</div>

          </div>

     
    |
    Mark as:
  • Comp. 792
    Currently Being Moderated
    4. Comp. 792,
    Aug 14, 2012 10:55 AM   in reply to osgood_
    Report

    You really just need to make 2 columns on your page and then insert the 3 <divs> into each column.

    Thanks osgood,

     

    The reason I wanted 3 different (separate) div’s was so I could add padding to the top and bottom of each div like I did on the right columns. (I have added 20px to top and bottom)

     

    Question 1

    So I uploaded an updated file using your suggestion. The “left” column is only 1 column with <br> to separate the content. Did I do this correctly?

     

    Question 2

    I am confused as to why I can’t have individual div’s on the left side without them flowing inside each other. The right side has 3 separate div’s. Is this not possible to do also on the left side?

     
    |
    Mark as:
  • osgood_
    Currently Being Moderated
    5. osgood_,
    Aug 15, 2012 12:55 AM   in reply to Comp. 792
    Report

    Comp. 792 wrote:

     

    Question 1

    So I uploaded an updated file using your suggestion. The “left” column is only 1 column with <br> to separate the content. Did I do this correctly?

     

     

    No, you didn't do it correctly. Insert three seperate <divs> within the parent 'column_left' <div> (as below)

     

    <div class="column_left">

     

    <div id="one">Div One</div>

    <div id="two">Div Two</div>

    <div id="three">Div Three</div>

     

          </div><!-- end column_left-->

     

     

     

    Comp. 792 wrote:

     

     

    Question 2

    I am confused as to why I can’t have individual div’s on the left side without them flowing inside each other. The right side has 3 separate div’s. Is this not possible to do also on the left side?

     

    If you follow the method above (inserting 3 <divs> into the parent <div>) you do have 3 individual <divs>.

     
    |
    Mark as:
Actions

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points