CODEWITHSUNDEEP
css
methuselah
methuselah

Reputation: 13216

using both pixels and percentages in css layout

i am trying to create a css layout using pixels and percentages. the reason for this being that the first column (body_first) needs to have a fixed width whereas the last two (body_second and body_third) need to have a fluid width to fill up the rest of the page. does anyone know how to achieve this? thanking you in advance!

<style type="text/css">
    * {
        padding: 0;
        margin: 0;
    }
    html, body {
        height: 100%;
        width: 1000px;
        background-image:url(main_bg.png);
    }
    body {
        font-family: "lucida sans", verdana, arial, helvetica, sans-serif;
        font-size: 75%;
    }
    h1 {
        font-size: 1.4em;
        padding: 10px 10px 0;
    }
    p {
        padding: 0 10px 1em;
    }
    #container {
        min-height: 100%;
        border-left: 0px solid #666;
        border-right: 0px solid #666;
        padding: 0px 40px 0px 40px;
        margin: 0 auto;
    }
    * html #container {
        height: 100%;
    }
    #header {
        height: 40px;
        width: 1000px;
        padding-top: 10px;
    }
    .header_column {
        position: absolute;
        padding-top: 0px;
    }
    #header_second {
        margin-left: 400px;
        color:#FFF;
    }
    #header_third {
        margin-left: 80%;
        color:#FFF;
    }
    #body {
        height: 100%;
        width: 1000px;
    }
    .body_column {
        position: absolute;
        background-color:#FFF;
        height: 100%;
        overflow: auto;
    }
    #body_first {
        width: 168px;
        background-color: transparent;
        height: 640px;
        margin-top: 10px;
    }
    #body_second {
        margin-left: 163px;
        width: 400px;
        background-color:#FFF;
        height: 640px;
    }
    #body_third {
        margin-left: 563px;
        width: 400px;
        border: 1px;
        background-color: #919191;
        height: 640px;
    }
    #footer {
        padding-top: 50%;
    }
    </style>
    <link href="SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css">
    </head>
    <body>
    <div id="container">
      <div id="header">
        <div id="header_first" class="header_column"><img src="header_logo.png" width="35" height="16" border="0"></div>
        <div id="header_second" class="header_column">asdas</div>
        <div id="header_third" class="header_column">asdas</div>
      </div>
      <div id="body">
        <div id="body_first" class="header_column">
          <div style="background-image: url(tab_bg.png)">
            <div id="TabbedPanels1" class="TabbedPanels">
              <ul class="TabbedPanelsTabGroup">
                <li class="TabbedPanelsTab" tabindex="0">
                  <div style="padding-top: 6px;"><img src="1.png" width="20" height="17"></div>
                </li>
                <li class="TabbedPanelsTab" tabindex="0">
                  <div style="padding-top: 6px;"><img src="2.png" width="20" height="17"></div>
                </li>
                <li class="TabbedPanelsTab" tabindex="0">
                  <div style="padding-top: 6px;"><img src="3.png" width="20" height="17"></div>
                </li>
                <li class="TabbedPanelsTab" tabindex="0">
                  <div style="padding-top: 6px;"><img src="4.png" width="20" height="17"></div>
                </li>
    </ul>
              <div class="TabbedPanelsContentGroup">
                <div class="TabbedPanelsContent">Content 1</div>
                <div class="TabbedPanelsContent">Content 2</div>
                <div class="TabbedPanelsContent">Content 3</div>
                <div class="TabbedPanelsContent">Content 4</div>
    </div>
            </div>
          </div>
        </div>
        <div id="body_second" class="header_column">asdas</div>
        <div id="body_third" class="header_column">asdas</div>
      </div>
    </div>

Upvotes: 0

Views: 934

Answers (1)

user527892
user527892

Reputation:

This ought to do it, though it does mean putting your body_first inside your body_second. Here's a general example:

HTML:

<div class="two">
  <div class="one">col 1</div>
  <div class="inner">
    col 2
  </div>
</div>
<div class="three">col 3</div>

CSS:

body { margin: 0; }
.one { width: 168px; float: left; background: #F66; }
.two { position: absolute; width: 50%; background: #6F6; }
.two .inner { margin-left: 168px; }
.three { width: 50%; float: left; background: #66F; margin-left: 50%; }

Working example at http://jsfiddle.net/thewebdes/e2CNa/ (resize the window with the slider to see it in action)

Upvotes: 1

Related Questions