CODEWITHSUNDEEP
csshtml
Naftuli Kay
Naftuli Kay

Reputation: 91850

Aligning Divs with CSS

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 :)

Upvotes: 1

Views: 3232

Answers (2)

Breakthrough
Breakthrough

Reputation: 2534

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.

Upvotes: 3

Donut
Donut

Reputation: 112915

Edit: @Breakthrough's answer seems like it does exactly what you want using just div's and CSS; I'll just leave my CSS-ified solution with Tables up as an alternative.

<html>
<head>
    <style type="text/css">
        #main { min-width: 800px; width: 100%; }
        #content { width: 500px; background: red; }
        .sidebar { background: blue; min-width: 150px; }
    </style>
</head>
<body>    
<table id="main">
    <tr>
        <td class="sidebar">Left</td>
        <td id="content">Center</td>
        <td class="sidebar">Right</td>
    </tr>
</table>    
</body>
</html>

Upvotes: 0

Related Questions