Can this site have a fluid layout???

[capples3]

Hi All,

Working on a site which I have posted at http://www.clhdesigns.com/intercept I have just threw up some basic images in an html page to start. My question is with this half red circle can I actually make this site a fluid layout so it resizes despite screen size to fit the entire width of the screen. I think the half red circle here is key.

Thanks
Chris

[ralph.m]

Yes, it can be done, perhaps not exactly as you want, though. I would have the big circle as a background image on the body. But to have the white chunk out of it, I would place a text box over the top of it with a white background. that would mean that if text expands, so will the white box. (The only alternative would be to fix a height on the white box and have scroll bars for overflow.

As for the red half-square on the left, though, it looks a bit inflexible, as resized text will overlap it a bit, so I'd rethink that.

[Rayzur]

As for the red half-square on the left, though, it looks a bit inflexible, as resized text will overlap it a bit, so I'd rethink that.

I had done something similar to that once before which was able to expand with the text.

It was simply a left border with two spans AP'd at top and bottom.

Expanding Text Bracket

[ralph.m]

Nice work, Ray!

[RyanReese]

I had done something similar to that once before which was able to expand with the text.

It was simply a left border with two spans AP'd at top and bottom.

Expanding Text Bracket

Simply beautiful!

[capples3]

For just the backgroud alone, the white background and red half circle, what would the css code look like for that?

here is the fixed width code I have for that

*
{
	margin: 0;
	padding: 0;
}

body {
	margin: 0px auto;
	font: 62.5% Arial, Helvetica, sans-serif; 
	background: #ECEDF2;
}

#wrapper {
	width:1630px;
	min-height:1020px;
	margin:0px auto;
	text-align:left;
	background:url(../images/bg.png) no-repeat;
	overflow:hidden;
}

#header{
	background:url(../images/header.png) no-repeat;
	width:1620px;
	height:80px;
	margin:70px 0px 0px 0px;
	overflow:hidden;
}

#content{
	background:#fff;
	margin:30px 0px 0px 180px;
	width:1091px;
	height:579px;
}

p{
	font-size:1.4em;
	font-family:Arial, Helvetica, sans-serif;
	line-height:2.0em;
	color:#868686;
}

Help is appreciated thanks for the idea on the expanding text box will that box work seeing as I will be using font-replacement techniques?