Member Offer
  1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

dividing a page in 2

Discussion in 'Website Design Forum:' started by TomStutt, May 26, 2009.

  1. TomStutt

    TomStutt Senior Member

    Hi

    My homepage at the moment just has text but i want to put an image i have done on the right hand side.

    i know you can define the image to the right in the css but dont know how to do it.

    can anyone help with this? so just to confirm i want the text in a column on the left and the image on the right.

    cheers, tom
     
  2. Xenonsoft

    Xenonsoft Active Member

    Well, depending on the exact technicalities you could do one of two things:

    A) Solution to floating an image right inside text (text wraps around it):

    <div>
    <p>Blah blah blah..</p>
    <img src="blah.png" id="blahhh" />
    </div>

    Then the external css would be #blahhh { float:right; }

    Otherwise..

    B) You want a 2 col layout:

    <div id="container">
    <div id="left">
    <p>Blah blah blah..</p>
    </div>

    <div id="right">
    <img src="blah.png" alt="blah" id="blahhh" />
    </div>
    </div>

    And the css:

    #container { width:Xpx; margin:0 auto; }
    #left { width:Xpx; float:left; }
    #right { width:Xpx float:right; }

    More about floats here and I advise reading the whole CSS section on there once you've got a grip with HTML:
    CSS Float Property
     
  3. h_freezy

    h_freezy Senior Member

    get dreamweaver if you are a beginner
     
  4. mike_watts

    mike_watts Member

    CSS: (if your main div is 600px wide, note that widths and margins add up to 600px, if you have borders you will need to also add the width of them in to the equation, and if you have padding that also needs to be added, so if everything is under 600px wide you'll have no problems)

    #wrapper
    {
    width:600px;
    }
    #column1
    {
    float:left;
    width:400px;
    }
    #column2
    {
    float:left;
    width:180px;
    margin-left:20px;
    }

    HTML:
    <div id="wrapper">
    <div id="column1">
    Your text here
    </div>
    <div id="column2">
    Your picture here
    </div>
    <br style="clear:both" />
    </div>

    The <br /> tag style is important to push down the bottom of the wrapper div, note that the wrapper div is just a generic div that contains the column divs. This works well across all browsers as far as I can tell and is dead simple.

    You can keep using this to as many columns as you need as long as the widths/padding/border-widths all equal or are less than the width of the wrapper.

    Hope that helps
     

Share This Page