[Solved]tricky layout (help with css)

[Recon]

Hi,

My basic background layout is this:
"http://w...

Cloud background with jquery full screen supersizer.
How can I get that green line start from the left side of the screen and cut it to content. Green line must be stretchable, so it will be on the left side every browser's resolutions.

Here is beginnig of my work.
"http://w...

Best
-R

[Dr.CSS]

You will have to break the line div out of the rest of the divs then use a % to stop it on the right...

[Recon]

If using margin-right: % it will not stay in correct place when zooming in or out.

-R

[Recon]

Tips for this, please.

-R

[Zoorlat]

First of all, to ensure liquid layout ("zooming in and out") use em instead of px when you specify the size of your objects.

To get the green line in place, I'd place the div for this line inside the middle-div. This way you have a common right side edge to relate to. Eg:

Code: Select all

<div id="realBody">
   <div id="top"></div>
   <div id="middle">
	<div id="line"></div>
	<div id="content"><p>Content</p></div>
   </div>
   <div id="bottom"></div>
</div>

Then you can specify the right-margin of the line-div to be the same (in em's) as the black border. Give the left-margin a very high negative and it will expand to the left edge of the window.

Eg:

Code: Select all

#line{
background: url(http://whm10.louhi.net/~vvpakki2/uploads/css/greenline.png) repeat-x center center;
height:7em;
margin-right:10.5em;
margin-left:-100em;
}

Assuming you have modified your other margins, paddings and heights to em, this gives the result you asked for.

Good luck!
Z

[Recon]

Thank you Zoorlat,

seems that it works very well... also on different browsers.
Thank you.

-R