Jump to content

How do I strech a floated div to the remaining 'space'


cs.punk

Recommended Posts

Basically what it comes down to:

I want to stretch the second div to occupy the remaining space. Width: 100% brings the width to the actual width of the browser 'window' so that won't work.. Any ideas?

<div style="width: 200px; 
		background-color: #CCCCFF;
		float: left;">hello1</div>

<div style="background-color: #CCCCCC;
		float: left;">hello2</div>

 

Thank you guys.

 

 

[attachment deleted by admin]

Link to comment
Share on other sites

How many pixels are left after you minus the 200 from the first div?  Just make the width that number.  Or, you could make the first div a percentage (like width: 20%) and make the second div the "rest of the percentage", IE: width: 80%.

 

But this won't accommodate different screen resolutions...

Link to comment
Share on other sites

Quick and dirty way (assuming you used inline styling to illustrate the issue) ... add a left margin to second div and remove the float.

 

<div style="width: 200px;
         background-color: #CCCCFF;
         float: left;">hello1</div>

<div style="background-color: #CCCCCC; margin:0 0 0 200px
         ">hello2</div>

 

But it is ugly because inline styling is foolish (for troubleshooting, scaling, page load) and proper text content tag defaults (paragraphs, lists, headers) will blow it up.  Try it, simply place hello1 and hello2 into paragraph tags.

 

<div style="width: 200px;
         background-color: #CCCCFF;
         float: left;"><p>hello1</p></div>

<div style="background-color: #CCCCCC; margin:0 0 0 200px
         "><p>hello2</p></div>

 

Now imagine THAT with a whole page of content!

 

Here is the one of a number of better solutions:

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>quick, fixed left /fluid right columns</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<style type="text/css">
body, p {margin:0; padding:0} /*zero out browser defaults */
.left {width: 200px;background-color: #CCCCFF; margin:0; padding:5px; float: left}
.right {background-color: #CCCCCC; margin:0 0 0 200px; padding:5px 20px;}
</style>
</head>
<body>
<div class="left"><p>hello1</p></div>
<div class="right"><p>hello2</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.