CODEWITHSUNDEEP
htmlcssmultiple-columns
Baumr
Baumr

Reputation: 6284

Simple 3-column fluid layout, but center column empty with fixed-width?

Tricky to find the most cross-browser-compatible solution (IE6 included).

Three columns, the two on the sides are responsive and adjust with screen.

The middle column should be empty, but with a fixed width:

enter image description here

It's easy to make them all responsive: http://jsfiddle.net/Baumr/sZehH/2/ (in this case, the middle one isn't even a column but just a margin — which is nice).

<section> 
    <div>
        <p>Column 1, lorem ipsum dolor bla bla dogs and cats</p>
    </div>
    <!-- Best if Column 2 is a margin or something -->
    <div>
        <p>Column 3, lorem blops dolor bla laa cats and dogs</p>                        
    </div>
<section>

I've considered using position:, but it can get messy...

Any ideas? Thanks in advance.

Upvotes: 1

Views: 1364

Answers (5)

BLynx03
BLynx03

Reputation: 1

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

.left, .right {
  margin: 30px;
}
<section class="grid-container"> 
    <div class="left">
        <p>Column 1, lorem ipsum dolor bla bla dogs and cats</p>
    </div>
  
    <div></div>
  
    <div class="right">
        <p>Column 3, lorem blops dolor bla laa cats and dogs</p>                        
    </div>
<section>

This is an old post but I thought of sharing my thoughts for beginners like me... I suggest adding an empty div between the two paragraphs in your html and use display grid in your css. You can adjust the grid size the way you want it.

Upvotes: 0

jamesplease
jamesplease

Reputation: 12869

Given your strict browser support requirements you may need to use non-semantic tables. This table solution, though you might already know it, can be viewed on this JSFiddle or below. Oh, and I haven't tested it, but as far as I know all of this should be IE6 compatible:

HTML: 

<table> 
  <tr>
    <td class="column">
        <p>Column 1, lorem ipsum dolor bla bla dogs and cats</p>
    </td>
    <td class="center-column"><div id='ie6-fix'></div></td>
    <td class="column">
        <p>Column 3, lorem blops dolor bla laa cats and dogs</p>                        
    </td>
  </tr>
<table>

​ CSS:

.column {
    background: pink;
}
.center-column {
    background-color: #eee;
    width: 100px;
    min-width: 100px;
}
#ie6-fix {
    width: 100px;
}

Upvotes: 1

apttap
apttap

Reputation: 468

I think the best solution is box-sizing. While it is not technically supported for older browsers, it does have polyfills.

Check out the fiddle To the following:

CSS (vendor prefixes excluded):

html, body {
    background: #000;
    height: 100%;
    width: 100%;
    color: #000;
}    

#columnOne, #columnTwo {
    width:50%;
    height: 100%;
    background: #fff;
    box-sizing: border-box;
}

#columnOne {
    float:left;
    border-right: 20px solid blue;
}

#columnTwo {
    float: right;
    border-left: 20px solid blue;
}​

HTML:

<html>
    <body>        

        <div id="columnOne">HI!</div>
        <div id="columnTwo">HI!</div>

    </body>
</html>  ​

More info here and info on polyfills here.

Have fun!

Upvotes: 1

Ricardo Souza
Ricardo Souza

Reputation: 16456

What about using an inner element for spacing? Could be another DIV tag inside each column:

http://jsfiddle.net/sZehH/3/

HTML:

<section> 
    <div class="left">
        <p>Column 1, lorem ipsum dolor bla bla dogs and cats</p>
    </div>

    <div class="right">
        <p>Column 3, lorem blops dolor bla laa cats and dogs</p>                        
    </div>
<section>

​CSS:

section div {
    float: left;
    width: 50%;

}

section div p {
    background: pink;
    padding: 2.5%;    
}

.left p {
    margin-right: 20px;
}

.right p {
    margin-left: 20px;
}

I've used the paragraphs that where already there, but you probably will have more than one element, so you will have to add a wrapping element to account for that. ​

Upvotes: 2

Daniel Lepe
Daniel Lepe

Reputation: 1

I suggest you to use a robust css framework like YAML.

It alows you to develop columnar an responsive layouts with 2 or 3 columns. So, instead of trying to solve the cross-platform issues, you could focus in arts and development.

Check this out: http://www.yaml.de/demos/flexible-columns.html

Upvotes: 0

Related Questions