Two DIV's next to each other, not so simple as it seems.

OK DIV 1 is fixed at 500px width.
DIV 2 should be next to it, and take up all remaning space (width-wise).

However DIV 2 cannot be floated, as DIV 1 can expand width via Javascript onclick but I need DIV 2 to stay positioned 500px across the page regardless of whatever happens it should be static there, but I still need it to take up all remaining space?

Maybe I could absolute position DIV2 with a negative margin? However I tried without success..

Many thanks to any advice. It's appreciated.

 

Hey, I have no time to test this but it should work, Ive left the divs empty so Test it with some information inside the divs and let me know

<div id="wrapper">
    <div id="a"></div>
    <div id="b"></div>
</div>

#wrapper {
width: auto;
}

#a {
position: relative;
float: left;
width: 500px;
height: 200px;
}

#b {
position: relative;
left: 500px;
float: left;
width: auto;
height: 200px;
}

HTML:

 

Sorry AnonymousUser, but that's not what he's asking for (or I'm reading it differently).

If I'm reading this correctly, div 1 can change size larger or smaller than 500px, but even when it resizes div2 should stay 500px in.

The easy solution is to put div2 FIRST in your source.

<div id="div2Wrapper"><div id="div2">
	Div 2 content here 
<!-- #div2,#div2Wrapper --></div></div>

<div id="div1">
	Div 1 content here
</div>

#div2Wrapper {
	float:right;
	width:100%;
}

#div2 {
	margin-left:500px;
}

#div1 {
	float:right;
	position:relative; /* make sure it depth sorts over #div2 */
	width:500px;
	margin-right:-500px;
}

Code (markup):

That should do the trick. When your javascript changes the width of div1, it should also set the margin-right equal to negative the width. If you leave the margin-left in DIV2 alone, when you resize div1 wider it should overlap the contents of DIV2 - that's what you were asking, right?

 

Thanks for the reply, it was exactly what I was looking for, and probably a better source order even though it hardly matters.

Again many thanks.

Am I correct in saying that if an element requires 100% width and a margin it requires a wrapper (So that it totals 100%).

 

Not getting th question. Side margins can't (shouldn't) be added if width is explicitly set to 100% (though if someone's a block they'll just be 100% and thehn you could set margins on the sides and it'll just deal with it).

 

Hi,

To make that in XHTML/CSS you have to use the CSS:float: left;
With that you make sure the div stick to the left one next to each other

Hope it helps

 

If you want the total width as 100%, adding margin gives you more than that, so yes as a rule you should use a separate element.

I try to avoid assinging widths at the same time as margins or padding in my code just out of habit. Leftovers from supporting IE 5.x's broken box model.

 

Hey sorry Stomme for poor wording I meant if you have to assign the width like on an object or something. Liverpool just played a team from Holland earlier called PSV they were pretty poor, we won 3-1 Just incase you cared the slightest..

Thanks for the tip again ds it's really appreciated.

I'm trying constantly to give you guys some rep but it won't let me, on about I need to spread it around first or some bullcrap.

mypsd2html my problem was a bit more problematic than a simple float, it was solved in an earlier post but thanks for the advice..