-
Yes you are right, you said without Javascript but I wrongly skiped that part.
For CSS, you can simply do:
.left {
background: red;
float: left;
width: 50px;
}
.right {
background: blue;
}
Its the "float" property which makes the .left to lie over .right without the need of margins or something.
But I dont suggest it!
Still you know!Leave a comment:
-
Thanks! But I want to make it without using a javascript.
I got it using margin.
HTML Code:<html> <head> <title></title> <style type="text/css"> .left { background: red; clear: both; display: block; float: left; position: relative; width: 50px; } .right { background: blue; margin-left: 50px; } </style> </head> <body> <div id="wrap"> <div class="left"> Left Content </div> <div class="right"> Right Content </div> </div> </body>
Leave a comment:
-
Here is your code mate:
<script type="text/javascript">
onload=function() {
var leftWidth = document.getElementById('left').offsetWidth;
var winWidth = document.body.offsetWidth;
var rightWidth = winWidth - leftWidth;
document.getElementById('right').style.width = rightWidth+'px';
}
</script>
<div id="left" style="width: 50px; height: 100px; background: red;">red</div>
<div id="right" style="height: 100px; background: blue;">blue</div>
So what happens:
row 1: get width from left div/frame
row 2: get screen width
row 3: screen width - (minus) left div/frame
row 4: we set width to right div/frame
I made it with divs to test out, you can just make them framesLeave a comment:
-
Request: CSS width with Percent and Pixels
Hello!
I want to make a 2 column which has a percent and a pixel width.
Is there any trick to make this without using JavaScript?
Output that I expected is like this
A fixed 50 pixel, and the rest is for the 2nd column.
Added after 24 minutes:HTML Code:<html> <frameset cols="50,*" border="1"> <frame src="frame_a.htm" /> <frame src="frame_b.htm" /> </frameset> </html>
Hmmm, I guess i can use margin...Last edited by kei_ki7; 21.11.11, 16:42.
Leave a comment: