Simple 3-column fluid layout, but center column empty with fixed-width?
Question
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 :
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.
4 answers
solution1
2 ACCPTED 2012-10-28 03:46:48
What about using an inner element for spacing? Could be another DIV tag inside each column:
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.
solution2
1 2012-10-28 03:57:09
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!
solution3
1 2012-10-28 07:39:00
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;
}
solution4
0 2012-10-28 03:42:36
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
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.