ansaurus

Question

Answer 1

+2 A:

Try giving float:right to the right column and nothing at all to the left one. Don't float it, don't specify a size, just put the content you want inside it and that's it.

Oh sorry I forgot: you must put column2 inside column1

Yeah, this works:

<html>
<head>

<style>
    div#column1-wrapper {
        width: 100%;
    }

    div#column1-wrapper {
    }

    div#column2-wrapper {
        float: right;
        width: 250px;
    }
</style>
</head>
<body>
    <div id="middle-wrapper">
    <div id="column1-wrapper">
        <div id="column2-wrapper">  <!-- Must be first -->
            This has to be 250px wide
        </div>
        This has to be 100% - 250px wide
    </div>
</div>
</body>
</html>

Not sure if it's what you're after.

Kaze no Koe 2009-11-23 07:49:02

For that I'll first have to place the right div above left div in source order but that creates another problem... if left column is taller, some of its content will get placed below right column.

Salman A 2009-11-23 07:52:59

I removed an earlier, retarded comment I made. Sorry, don't have a solution for that.

Kaze no Koe 2009-11-23 08:24:13

Answer 2

+1 A:

Two columns with color.

Svish 2009-11-23 08:08:16

That's not fluid, unless I'm missing something

Kaze no Koe 2009-11-23 08:18:29

You must be missing something. It is fluid here. Only difference from your question is that it is not 100% wide, and it is the right column that is fluid instead of the left one. But if you look right after the last step, two variations are actually described there. One for 100% wide and one for having column on the other side :)

Svish 2009-11-23 09:49:35

Ummm, it requires me to rearrange the order of columns... i.e. the right content should be placed *before* the main content, something that'll disturb the HTML+ASP code in the existing pages.

Salman A 2009-11-23 11:45:06

Haven't really done any ASP.Net, but I thought they had master pages or something for that?

Svish 2009-11-23 12:13:26

You're right, sorry

Kaze no Koe 2009-11-23 13:23:46

This works if I change the div order i.e. put the right column before left in the source order. Changing the div order was not desired but I can live with it for now.

Salman A 2009-11-25 05:13:56

Good to hear :)

Svish 2009-11-25 17:05:55

Answer 3

A:

This is very close to a layout that I've searched everywhere for so thank you! One addl. question, taking the code above as the example how would one make sure that the 100%-250px column never is smaller than say 730px?

Mrmartinblue 2010-01-11 21:08:35

Try using a CSS rule: `min-width: 730px`

Salman A 2010-01-12 09:09:14

ansaurus

tags:

views:

answers:

Fixed widths inside fluid layout

related questions