Wed, 2003-04-09 11:06
If I want to have a fixed say a 80 px box on the left side and a box to the right of that that fills the rest of the screen (whatever size that is) how do I do.
Another, perhaps more difficult problem, is if I have a heading in a text and want a colored line that extends from the right end of the heading to the end of the bounding box but not more than that (so it doesn't get moved down a row). Can this be done?
It should look something like this
---8<---
Some heading ===============================================
More text about some interesting subject that just goes on and on and on and...
---8<---
If anyone knows, please help a beginner in need ?
\w42
Wed, 2003-04-09 13:23
#1
Screen space
Floats could be the answer. This is just off the top of my head here at work so I hope I'm right...
Firstly the 80px box. If you mean a whole column, then something like
.left { float:left; width:80px; }
.main {margin-left : 85px; }
<div class=left>...</div>
<div class=main>...</div>may do the trick.
If you don't want a whole column (just a small box at the top-left) then get rid of the margin-left property.
Secondly the heading line.
.header {background-color : red; width: 100% }
.headertext {background-color : blue; }
.spacer {clear:both; }
<div class=header>
<div class=headertext>
Header here
</div>
<div class=spacer>
</div>This gives text on a blue background, with a huge red background to the left of it. The spacer DIV makes sure the red bit is shown.
Obviously that's a crude example... I think you can play around with the background properties (see http://www.w3.org/TR/REC-CSS2/colors.html#q2 ) to change it to an image, so hopefully you can recreate the line instead.
Hope that helps!