[SOLVED] Pixel and Percentage widths.

[JasonLewis]

I have a layout that I'm coding but I'm stuck.

 

I have two div's next to each other. The one on the left has a fixed width of 364px. They are both floating left. I want the second one to stretch the rest of the document, so it hits the scroll bars but stays next to the one on the left.

 

Here is my CSS:

div#newsletter_container {
float:left;
width:364px;
height:143px;
background-image:url('images/15.gif');
}

div#welcome_container {
float:left;
margin-left:15px;
width:100%;
height:143px;
background-image:url('images/17.gif');*/
}

 

Of course, using 100% means it is stretching the whole document, which is bad! I want this to be resizable in different screen resolutions which is why I'm using percentage for the right div. The left one NEEDS to be fixed width.

 

Here is my HTML:

<div id="newsletter_container">
Text
</div>

<div id="welcome_container">
Text 2
</div>

 

However, Text 2 appears underneath Text. Any ideas on where I should be going with this?

 

Cheers.

[xtopolis]

CSS"

div#newsletter_container {
        float: left;
width: 364px;
height:143px;
background-image:url('images/15.gif');
}

div#welcome_container {
margin-left: 365px;
height:143px;
background-image:url('images/17.gif');
}

 

HTML:

<div id="newsletter_container">
Text
</div>

<div id="welcome_container">
Text 2
</div>

 

Notice the first side (left side div) floats left with a fixed width.  The right side div has a left margin of the left divs width +a few pixels for borders etc.

[JasonLewis]

Cheers, it worked. Just had to chuck in a clear:both in at another div and it's working like a charm.

 

Thanks a bunch.