Jump to content

[SOLVED] Two columns - one 200px, one fluid width


tibberous

Recommended Posts

Basically, I have two div's, that are supposed to be beside each other. The right one needs to be 200px, the left one needs to take up the rest of the screen.

 

I thought about making the two divs %99 and %1, and then sticking a 200px wide div in the %1 one to force it to stretch larger, but is there a proper way to do this?

 

Thanks

Link to comment
Share on other sites

You can do it this way

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Some Title</title>

<style type="text/css">
  #wrap {float:left; width:100%; margin-left:-200px;}
  #liquid {margin-left:200px}
  #fixed {float:left; width:200px;}
</style>

</head>

<body>

<div id="wrap">
  <div id="liquid">
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas a tortor. Donec venenatis molestie odio. Duis eleifend, felis eu auctor adipiscing, risus dui hendrerit sapien, ullamcorper venenatis velit mauris rhoncus leo. Donec volutpat felis ut quam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque scelerisque. Suspendisse erat lorem, eleifend quis, luctus et, mattis vitae, dui. Donec a nulla. Sed elit lectus, feugiat at, malesuada scelerisque, vestibulum sit amet, purus. Donec erat pede, tempor at, dignissim vitae, interdum rutrum, tortor. Maecenas aliquet pharetra augue. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Aenean turpis. Aliquam dignissim, nisi vel malesuada convallis, urna massa ullamcorper tellus, eget porta libero justo vel enim. Nunc at felis. Mauris nulla. Curabitur adipiscing augue quis velit.</p>
  </div>
</div>

<div id="fixed">
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas a tortor. Donec venenatis molestie odio. Duis eleifend, felis eu auctor adipiscing, risus dui hendrerit sapien, ullamcorper venenatis velit mauris rhoncus leo. Donec volutpat felis ut quam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;</p>
</div>

</body>
</html>

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.