[SOLVED] CSS Alignment Issue

[AaronSmith]

Hi Guys,

I've got an issue with some CSS, that I need help with please.

The site in question is online and is viewable at http://www.arsene-all.com. What I'm looking to do is have two columns within the main content area, but aligned with the background. (should be easier to understand what i'm attempting when you see it)

The text i want in the left column is there, but i'm having difficulty aligning it correctly, so that it fits with the background and doesn't stretch to further than two thirds of the main content areas length.

Any help is much appreciated, (its a college project)

Regards,

Aaron

[welshstew]

You will need to have two nested divs within the #main in order to do this.
Change #main to the following:

Code: Select all

#main {
font-family:verdana;
font-size:12px;
margin:0px auto;
width:1000px;
}

then add two new div's like so:

Code: Select all

#mainleft{float:left; width:600px;}
#mainright{float:left; width:380px; margin-left:10px;}

you will then need to wrap your content in these new divs

HTML: Select all

<div id="main">
<div id="mainleft">
<h2>Latest News</h2>
<h4>News Article 3.</h4>
...
</div>
<div id="mainright">
<p>content</p>
...
</div>
</div>

something like that. sorry, only had 5 mins so you might need to paly with it to line it up correctly

[AaronSmith]

Thanks welshstew! Worked a treat, only problem is that a few errors have come about now.

The background within the wrapper div doesn't show up, and the footer has gone above the main content area... so it isn't really a footer

http://www.arsene-all.com

Any more help to fix this issues, would be greatly appreciated.

Regards,

Aaron

[welshstew]

try looking at ryan faits sticky footer

will look at the other errors after lunch

[@lun]

You just need to add

Code: Select all

clear: both

to your footer's css

[AaronSmith]

Thanks @lun, and Welshstew.

Problem Solved.

Regards,

Aaron