css CSS HTML Help

[kman1985]

I'm creating a webpage for now, but I have a little issue. I have a main container that has a width of 989px and inside that, I have another container for the body text that has a width of 439px . So i created the whole paragraph of the site inside this body text container. So it acts like its a column on the left. But how do i add another container or something so i can add an image that is displayed to the right past that 439px mark, so the image would be to the right of that "column"? I'd like that image displayed to the right and towards the bottom of the body text container. Sorry I'm kinda new at this and learning as i go. If anyone could help me out, that would be great. Thanks

[Phouchg]

You're in need of float property.

Add float: left; to the CSS of the leftmost (text) container.

Add new container after this one and add float: right; to the CSS of it. Be sure to set width, too.

To ensure that new containers, should there be any, are positioned below both columns, add a blank container with clear: both; in its CSS.

Example:

<div id="container" style="width: 989px;">
	<div id="left_column" style="width: 439px; float: left;">
	</div>
	<div id="right_column" style="width: 550px; float: right;">
	</div>
	<div class="clearfloat" style="clear: both;">
	</div>
    <!-- other containers, for example, footer section -->
</div>
[/CODE]

See this: http://css-tricks.co...l-about-floats/ for detailed explanation.

[Seahorsepip Veteran]

  On 19/04/2012 at 23:04, Phouchg said:

You're in need of float property.

Add float: left; to the CSS of the leftmost (text) container.

Add new container after this one and add float: right; to the CSS of it. Be sure to set width, too.

To ensure that new containers, should there be any, are positioned below both columns, add a blank container with clear: both; in its CSS.

Example:

<div id="container" style="width: 989px;">
	<div id="left_column" style="width: 439px; float: left;">
	</div>
	<div id="right_column" style="width: 550px; float: right;">
	</div>
	<div class="clearfloat" style="clear: both;">
	</div>
	<!-- other containers, for example, footer section -->
</div>
[/CODE]

See this: http://css-tricks.co...l-about-floats/ for detailed explanation.

clearfloat isn't needed here to put items below those containers...