CODEWITHSUNDEEP
htmlcsslayout
alexander.uv
alexander.uv

Reputation: 41

How do I set mixed width containers (px and %)?

I'm sure this must be pretty obvious, but I'm kind of stuck here. I want to build a tool and I need a toolbox and a workspace. So I want to position the toolbox as a fixed width to the left (say 250px) and have the workspace use the rest of the available space in the screen.

I have tried with both DIV and TABLE but the workspace keeps moving below the toolbox because it gets bigger (so that both parts do not fix next to each other)

How can I get the workspace to do that?

Here's the HTML:

<div id="container" style="width: 100%">
    <div id="toolbox" style="width: 250px">
    </div>
    <div id="workspace"> <!-- this keeps jumping to the next line -->
    </div>
</div>

Upvotes: 0

Views: 63

Answers (3)

alexander.uv
alexander.uv

Reputation: 41

Actually what I needed was something like this fiddle. The overflow did the trick I guess

overflow: auto;

http://jsfiddle.net/cmT4x/

Thanks!

Upvotes: 0

Nahydrin
Nahydrin

Reputation: 13507

You need to float your toolbox:

#toolbox {
    float: left;
    width: 250px;
}

/* also you should contain the floated element */
#container:after {
    content: ' ';
    display: block;
    clear: both;
}

Also, don't give a width or float to #workspace and it will slide between your toolbox and the remaining width of the container.

Upvotes: 1

SpliFF
SpliFF

Reputation: 38956

Nest your divs 1 level deeper and you can use a table layout.

<style>
#container { display:table; width:100% }
#container > div { display:table-row }
#container > div > div { display:table-cell }
</style>

<div id="container">
  <div>
    <div id="toolbox" style="width: 250px">
    </div>
    <div id="workspace">
    </div>
  </div>
</div>

Upvotes: 0

Related Questions