CSS question...how to dynamically size?

[WeakButHopeful]

Hello to any CSS experts out there. I'm a relative newbie laying out a Web page with CSS instead of tables (the better, or more modern, way...I hear).

Can I have a logo at the top left of my Web page (float: left) and have the rest of the viewport width taken up by my top banner? In other words, I'd like to say the width of the logo is 200px, and the width of the top banner (to its right) is 100% - 200px. The height of both is 70px. I doubt you can really give math calculations as the value in a CSS statement, but that's the idea. In that top banner I have a gradient fill image.

I figure either I can't do this at all, or else I'm approaching the problem the wrong way. I've tried experimentation and Google research, but I don't seem to be getting anywhere so far.

Thanks in advance for any advice.

 

[willab]

If I understand what you want, this should help:
p
{
position: absolute;
top: 200px;
left: 100px
}
Put it wherever you need it and specify the correct place. Why do you have to have a certain amount of posts to post a link? w3schools.com has a great tutorial, but I can not link to the page. That has got to be the worst thing I have ever heard of doing to a forum.

 

[rdale]

1) 3 columns, the holy grail


2) Look Ma, No Tables


3) The Layout Reservoir


4) CSS Tutorial - w3schools


And, lastly, if you like easy to use software that's number one in it's class : TopStyle Pro CSS




*EDIT*

and

Jeffrey Zeldman in his ALA article A Web Designer's Journey

 

[rdale]

Can I have a logo at the top left of my Web page (float: left) and have the rest of the viewport width taken up by my top banner? In other words, I'd like to say the width of the logo is 200px, and the width of the top banner (to its right) is 100% - 200px. The height of both is 70px. I doubt you can really give math calculations as the value in a CSS statement, but that's the idea. In that top banner I have a gradient fill image.

#Content {
margin:0px 50px 50px 200px;
padding:10px;
}

#Menu {
position:absolute;
top:100px;
left:20px;
[B]width:200px;[/B]
padding:10px;
background-color:#eee;
border:1px dashed #999;
line-height:17px;
/* Again, the ugly brilliant hack. */
voice-family: "\"}\"";
voice-family:inherit;
width:150px;
}
/* Again, "be nice to Opera 5". */
body>#Menu {width:150px;}

The 'meat' of this came from Left Menu

 

[WeakButHopeful]

Thanks for the advice folks. However, if I understand what I'm reading, your suggestions will only work when the content to the right of the logo is text (which will naturally flow to fill the viewport width). My content is an img that I want to dynamically resize to take up whatever room remains from the logo. Using HTML tables I could use "width=*" but I was trying to stay CSS for the learning experience. If I specify "width: 100%" in the attribute for "TopBanner" DIV in my CSS and also "width=100%" on my img tag, then I fail because my banner falls below my logo, instead of to its right. If I could say "width: 100%-200px" in the CSS attribute and "width=100%" on my img tag, it might work (but I'm sure it won't surprise you that it didn't...I tried).

But I finally got it (thanks to your help). I used absolute positioning to lay the logo on top of the top banner gradient, which I edited in my graphics program to have a 200px white area at its left (reserving room for the logo). That way the banner can stretch to fill the area, but the logo is fixed in size and doesn't distort.

Thanks rdale04 for your detailed replies! And willab, I guess the link prohibition has got something to do with spam (i.e. robots joining a forum just to post commercial links) but I don't really know. I guess the W3Schools link in rdale04's reply was the one you would have posted. Thanks for caring!