Layout Help Please

Hi i can't think straight at the moment, how would i go about the following:

Fixed width 300px div on the right, with a 100% div to the left of it..
and i want the 300px div opened first on the source code!!

EDIT: I think i've done it by floating both to the right, and adding a margin-right to the 100% div of -300px!!

 

I may be wrong but I think floating both div's will cause a problem. Just float the 300px and dont float the 100%. so its like this:

HTML:

<div id="right"></div>
<div id="left"></div>

Code (markup):

CSS:

#right {
	float: right;
	padding: 0;
	margin: 0;
	border: 2px solid #000;
	width: 300px;
	height: 200px;
}

#left {
	padding:0;
	margin: 0 300px 0 0;
	border: 2px solid #000;
	height: 200px;
}

Code (markup):

Ignore border and height, those are just there so I could see my results in testing.

 

Thank you very much for the fast and effective reply this is just what i needed!! There is just one problem I have a border underneath my heading for the left div, and it carries all the way across and can be seen underneath the right column?
For e.g

<div id="right">right right right right right right right right right right right right right right right right right right right right right </div>
<div id="left"><h2>dotted line test</h2></div>

#left h2 { border-bottom: 5px dotted #000 ; }

 

What browser are you using? I'm not getting that problem in FF2 or IE7.

I am running my test with just the bar minimum code we have mentioned in this thread, so maybe if you have some other code already in place, something there is messing with it. Post your full css and html if you can.

 

Woops my own fault I had margin-right: 0 300px 0 0; instead of just margin!! Thanks again.

 

lol. no prob man