A structured design approach combining fixed and fluid elements tailored for the 960.gs framework

Question

A structured design approach combining fixed and fluid elements tailored for the 960.gs framework

Our website is designed using the 960.gs grid system, and I am attempting to customize it into a 3-column layout with Fixed(100px) - Fluid(max width) - Fixed(100px) view. However, most online generators for 960.gs grids only offer fully fixed or fully fluid options. I am trying to modify the originally generated full-fluid grid into this desired layout:

<------------100%--------------->

======== =============== ========
| fixed| |max to screen| |fixed |
======== =============== ========

<-100px>                 <-100px>

The modified code can be viewed here: http://jsfiddle.net/vZm8x/

Issue 1) I am unsure how to make the central content area expand to the maximum width allowed by the screen. Using width:auto; does not work, and setting width:100% causes the divs to wrap.
Issue 2) After fixing the width to 100px, all divs continue wrapping downwards. Setting display:inline; does not resolve the issue. Any suggestions?

My question is: Is it possible to tailor the 960.gs template to suit our specific requirements? If so, could you please provide guidance on how to address these issues? Thank you in advance!

css layout grid fluid-layout 960.gs

Answer 1

Answer №1

Creating fixed-width side columns is a simple task. Using floats and potentially a faux columns trick for specific design requirements can help achieve the desired layout.

The structure to implement would resemble this:

<div class="left"></div>
<div class="right"></div>
<div class="middle">Content</div>

Incorporating CSS properties like below will aid in defining the widths of the columns:

div {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.left {
    float: left;
    width: 100px;
    background: #f00;
}

.right {
    float: right;
    width: 100px;
    background: #00f;
}

.middle {
    width: 100%;
    padding: 0 100px;
    background: #ccc;
}

To see this layout in action, check out this demo link. The content remains within the defined column boundaries even when adjusting the section's width.

Note that placing the content column last in the HTML structure prevents overlap with the side columns due to document flow.

Alternatively, utilizing position: absolute; on side columns offers another approach:

.wrapper {
  position: relative;
}

.left {
  position: absolute;
  top: 0;
  left: 0;
}

.right {
  position: absolute;
  top: 0;
  right: 0;
}

.middle {
  padding: 0 100px;
}

div {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

These techniques are compatible with modern browsers but may require adjustments for older versions like IE7. However, workarounds exist to address compatibility issues if needed.

The position: absolute method provides flexibility in arranging sidebars before or after the content div, offering a more semantic option compared to floating elements.

Overall, these strategies effectively handle fixed-width side columns by manipulating document flow and positioning elements accordingly.

Answer 2

Creating fixed-width side columns is a simple task. Using floats and potentially a faux columns trick for specific design requirements can help achieve the desired layout.

The structure to implement would resemble this:

<div class="left"></div>
<div class="right"></div>
<div class="middle">Content</div>

Incorporating CSS properties like below will aid in defining the widths of the columns:

div {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.left {
    float: left;
    width: 100px;
    background: #f00;
}

.right {
    float: right;
    width: 100px;
    background: #00f;
}

.middle {
    width: 100%;
    padding: 0 100px;
    background: #ccc;
}

To see this layout in action, check out this demo link. The content remains within the defined column boundaries even when adjusting the section's width.

Note that placing the content column last in the HTML structure prevents overlap with the side columns due to document flow.

Alternatively, utilizing position: absolute; on side columns offers another approach:

.wrapper {
  position: relative;
}

.left {
  position: absolute;
  top: 0;
  left: 0;
}

.right {
  position: absolute;
  top: 0;
  right: 0;
}

.middle {
  padding: 0 100px;
}

div {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

These techniques are compatible with modern browsers but may require adjustments for older versions like IE7. However, workarounds exist to address compatibility issues if needed.

The position: absolute method provides flexibility in arranging sidebars before or after the content div, offering a more semantic option compared to floating elements.

Overall, these strategies effectively handle fixed-width side columns by manipulating document flow and positioning elements accordingly.

A structured design approach combining fixed and fluid elements tailored for the 960.gs framework

Answer №1

Similar questions

What could be causing the hover effect to not work on the cards in my Svelte component? (HTML+CSS)

Transforming HTML 'img' elements into React components without losing styling: How do I achieve this with html-to-react?

Tips for inserting a button under a div when clicked

How to center a label vertically within a button group using Bootstrap

Exploring JavaFX and FXML TreeTableView customization for column and header styles

The Safari browser is plagued by a flickering issue with CSS perspective flip animations, even when using the back

CSS auto width not applied to images causing a lack of scaling

Issues arising from script tags causing disturbances in CSS

Transition into animated borders using <hr> lines

What is the best way to align the navbar-brand link in the middle of a Bootstrap 4 navigation bar?

Footer alignment issue when using react-full-page is causing it to not lineup at the bottom of the page

Designing a circular pie navigation interface using HTML that draws inspiration from the sleek and intuitive pie navigation found

The background image fails to load the specified image

Ensure the navbar includes the .container class and insert an extra dropdown right next to the container without causing any misalignment

What steps should be followed in order to replicate the border design shown in the

Collaboration of Bootstrap components

When padding is added on an MVC 5 page, the Bootstrap 4.1.1 class option for rounded-circle becomes distorted

The circular shape of a border-radius becomes distorted when scaling at various browser zoom levels

Dividing a pair of CSS stylesheets on a single HTML page

What is causing col-xs-0 to occupy the entire width of the row?