Request: CSS width with Percent and Pixels

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

    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.

    #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

          Working...
          X