1 reply [Last post]
Anonymous's picture

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


Some heading ===============================================
More text about some interesting subject that just goes on and on and on and...


If anyone knows, please help a beginner in need ?


dJomp's picture
Last seen: 1 year 3 weeks ago
Joined: 2003-03-23
Posts: 422
Points: 0

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 class=spacer>

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!

You know you're a geek when you try to shoo a fly away from the monitor with your cursor.