noob- How to div this up

[hargi]

Im still strugling with the layout side of CSS, i have set the body color.

If i have the logo including the line as a image, how do i get the line to go all the way to the right no mater what the screen size?
The nav bar will just be a div on the right hand side?
is there a way to get the white content area to start as in the image or is it easier to do to start after the logo?

TIA

 

[Dj_Jestar]

splice the logo to be on it's own, then create a an image with the red bar on it, set it to be a background image of body and use "background-repeat: repeat-x"

 

[Tripnologist]

If you want it to look like it does in the image....

- Make the red line part of a background image. You'll add this to your body. This will make it go all the way across the page.
- then I would do the following

<div id="container">
	<div id="sidecol">
		<a href="#" id="logo"><img src="logo.png" alt="" /></a>
		<ul id="mainnav">
			<li><a href="#">Home</a></li>
			<li><a href="#">School Holidays</a></li>
			...
			...
		</ul>
	</div><!-- end of sidecol -->
	<div id="maincol">
	</div><!-- end of maincol -->
</div>

#container { width: ***px; overflow: hidden;}
#logo { }
#sidecol { float: left; width: ***px;}
#maincol { float: right;'width: ***px; }

Alternatively, if you want a header in the top yellow, I would do it slightly differently..

<div id="container">
	<a href="#" id="logo"><img src="logo.png" alt="" /></a>
	<div id="header"></div>
	<div id="cols">
		<div id="sidecol">
			<ul id="mainnav">
				<li><a href="#">Home</a></li>
				<li><a href="#">School Holidays</a></li>
				...
				...
			</ul>
		</div><!-- end of sidecol -->
		<div id="maincol">
		</div><!-- end of maincol -->
	</div><!-- end of cols -->
</div>

#container { width: ***px; position: relative;}
#header { padding-left: **px;} /* Padding should be used to keep content away from absolute positioned logo */
#logo { position: absolute; top: **px; left: **px;} /* absolute position the logo to where you want it. */
#cols { overflow: hidden;}
#sidecol { float: left; width: ***px;}
#maincol { float: right;'width: ***px; }

 

[gord]

As Jestar says,

body: background yellow with repeated red bar image

container div for the main site, best with auto left and right margins to centre the site and the width you want

left div (inside container) float left, width, contains your logo image and navigation

right div (inside container) float left, width, contains your body content, white background, margin-top to push it down the right amount