Home/ Questions/Q 324899
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-12T09:10:00+00:00

I know there are tons of articles all over Google on doing something similar

  • 0

I know there are tons of articles all over Google on doing something similar to this, but the problem is that they all vary on the implementation. What I’d basically like to do is have a single div of a fixed width be aligned to the center of my page, with bars on the side stylable to whatever I’d like. In Flex (MXML), I could easily make this happen with something like this:

<mx:HBox width="100%">
  <mx:VBox id="sideBarLeft" width="100%"/>
  <mx:Panel id="content" width="500"/>
  <mx:VBox id="sideBarRight" width="100%"/>
</mx:HBox>

This would give me a design that looks like this:

[sideBarLeft][content][sideBarRight]

The sidebars would expand as the screen area grows, but the content would stay the same, 500px wide.

How would I achieve this in HTML with divs and CSS?
Also, is there a way to set the minimum width of the sidebars? Ie: a size that they couldn’t shrink below? (for example: <mx:VBox id=”sideBarLeft” width=”100%” minWidth=”150″/>)

And I apologize for the nature of how much of a novice I am at this stuff. I guess I’ve spent too much time building applications and too little time with HTML and CSS 🙂

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Is there any particular reason you want to use div’s over table cells in this case?

    Regardless, I came up with a quick solution you might like:

    <html><head>
<style type="text/css">
*         { margin: 0; padding: 0; }
body      { text-align: center; }
#content  { width: 500px; height: 100%; margin: 0 auto;
            text-align: left; background: #DDDDDD; overflow: auto; }
.column   { width: 50%; position: absolute; top: 0; height: 100%; }
#leftcol  { margin-right: 250px; background: #AAAAAA; height: 100%; }
#rightcol { margin-left: 249px; background: #AAAAAA; height: 100%; }
</style>
</head><body>
<div class="column" style="left:0;">
<div id="leftcol">This is the column on the left.</div>
</div>
<div id="content">Your content goes here.</div>
<div class="column" style="right:0;">
<div id="rightcol">This is the column on the right.</div>
</div>
</body></html>

    I really minified it to fit nicely on here, but copy and paste that into a file and tell me what you think.

    Just be forewarned: using tables is the preferred way to do this, and is perfectly acceptable. There is no problem mixing tables and divs, and styling/positioning tables with CSS. This solution is more of a “workaround”, but one thing is for sure – it works.

    • 0