• 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


TomStutt

Senior Member
#1
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
 

Xenonsoft

Active Member
#2
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
 
#4
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