Request: CSS width with Percent and Pixels

Collapse
X
Collapse
 
  • Page of 1
  • Filter
  • Time
  • Show
Clear All
new posts
Previous template Next
    #1

    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.
    HTML Code:
    <html>
<frameset cols="50,*" border="1">
  <frame src="frame_a.htm" />
  <frame src="frame_b.htm" />
</frameset>
</html>
    Added after 24 minutes:

    Hmmm, I guess i can use margin...
    Last edited by kei_ki7; 21.11.11, 16:42.
    Did I help you?
    You can help me too
    Your donations will help me finance my studies.
    Tags: None
    #2
    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 frames
    mysterio.al - programming is a functional art

    Comment

      #3
      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>
      Did I help you?
      You can help me too
      Your donations will help me finance my studies.

      Comment

        #4
        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!
        mysterio.al - programming is a functional art

        Comment

          #5
          If its for mobile than is better to use max-width: 50px; instead width: 50px;
          <!DOCTYPE html PUBLIC "-//WAPFORUM.RS

          Comment

          Previous template Next
          Working...
          X