How to get a Div to stretch to 100% width of remaining area left in a Div

HTML & CSS
1

So I have a Div setup like this:

<div id="header">
  <div id="image">
    <img here>
  </div>
  <div id="contents">
    <h1>Contents</h1>
    <h3>Look Below blah blah</h3>
  </div>
</div>

The style is like this

#header{
width: 100%;
}
#image{
float: left;
width: 300px;
}
#contents{
float: right;
text-align: left;
width: 100%;
}

But it seems like the Contents div is stretching to 100% of the entire page instead of 100% of the Header Div which is containing it, how do I fix that?

2

Is this what your after?
(copy and save it in an .html file)

<html>
<head>

<style type="text/css">
<!--

#header{
background	:orange;
width		:100%;
}

#image{
background	:green;
float		:left;
width		:300px;
}

#contents{
float		:left;
width		:auto;
background	:blue;
text-align	:left;
}

-->
</style>

</head>

<body>

<div id="header">
  <div id="image">
    <img here>
  </div>
  <div id="contents">
    <h1>Contents</h1>
    <h3>Look Below blah blah</h3>
	<p>Sed tristique posuere dolor. Donec libero augue, aliquam vel, malesuada ut, ornare at, pede. Nullam eget mauris. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sit amet sem non purus iaculis egestas. Proin ut ipsum non augue congue congue. Maecenas ut lorem ut massa tincidunt tincidunt. Sed dapibus ultricies nisl. Donec quam nisl, faucibus non, dictum molestie, sodales et, justo. Fusce convallis nulla sit amet felis. Duis ipsum. Fusce ac dui quis nulla suscipit semper. Mauris quam. Cras dignissim pharetra sem. Quisque ligula. Praesent posuere. Donec ac dui ullamcorper mauris accumsan tristique. Nunc convallis, libero at euismod faucibus, velit magna iaculis sem, at placerat est leo nec pede. Morbi aliquam odio rutrum neque. Curabitur suscipit condimentum pede. </p>
	<p>Sed et massa in enim molestie aliquam. Vestibulum vel tortor ut eros rhoncus fringilla. Nulla eu tellus. Donec varius. Aliquam erat volutpat. Maecenas quis libero. Ut pharetra aliquet velit. Curabitur et diam. Fusce fringilla, sapien ut convallis gravida, magna nulla interdum purus, ac porta ipsum mi ut lacus. Mauris tincidunt, ante eget gravida lacinia, quam eros lobortis massa, eget pulvinar mi lacus in nulla. Praesent commodo turpis ut purus. Fusce lacinia quam ut dui. Mauris id ligula. Ut est lorem, lacinia at, luctus sit amet, feugiat eu, libero. Aenean elementum neque ornare nisl. Etiam hendrerit molestie lorem. Duis vitae augue sed elit porta aliquet. Nulla semper porta erat. </p>
  </div>
</div>

</body>

</html>

I put a few dummy paragraphs in so I could see if the text stayed to the right of the image and added some colour via css so I could see if it definatly worked.

Is that what you wanted?

3

Hi :slight_smile:

You have header as 100% of the window and as such 100% of the header will also be 100%. You need to lower the width of the header if you want what you want haha.

Cheers.

4

The trick here is to NOT float the #contents div. A 100% width will be 100% of the parent (full width). Floating without a set width will not work either, as when content pushes the width, the float will drop below the left float to find more room. If #contents has its overflow set and no width specified, it will naturally fill the remaining space beside the image. IE6 will need HasLayout triggered to perform the same way :

#header{
width: 100%;
}
#image{
float: left;
width: 300px;
}
#contents{
overflow: hidden;
text-align: left;
}
* html #contents {
overflow: visible;
height: 1%;
}
5

Thanks for the tips, I got it working, I actually floated both the items left and set the width to auto like was mentioned and that seemed to work :slight_smile:

6

That will fail as soon as the contents of #contents wants more than the available width, whereupon #contents will drop below the image - the example L4DD13 gave above fails in this respect.

7

Yeah you’re right, just found that out, trying some of the other methods as well, seems to be working

8

In what browser would my example not work?

I have used that method on many projects and have not found any issue.

9

Doesn’t work with Firefox2, Firefox3, or Opera. The content pushes the #contents div too wide and it drops to the next row.

10

Ah, I see where I went wrong.
I’m going to have to look at the differences between what I posted and what i’ve used on the sites.

Cheers.

11

Hi :slight_smile:

If you have used that in multiple sites you may want to consider going back and using a more appropriate method. If you have dynamic content in there you are basically asking to have your layout broken.

Cheers.

12

All the sites I have built work.
I entered my solution wrong. Plus I was having a few beers at the time.

13

That can certainly result in unintended code modification :drink: :smiley: