Request: CSS width with Percent and Pixels

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

  • arnage
    replied
    If its for mobile than is better to use max-width: 50px; instead width: 50px;

    Leave a comment:


  • Mysterio
    replied
    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:


  • kei_ki7
    replied
    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:


  • Mysterio
    replied
    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

    Leave a comment:


  • kei_ki7
    started a topic Request: CSS width with Percent and Pixels

    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.
Working...
X