I am attempting to create a CSS layout that contains multiple columns in various places on my site. Some rows have only two columns while others may contain up to six. If I set all of the DIV width values in percentages, totaling 100%, then the DIVS on the end get bumped below the others to the next line. I would like each DIV to have a padding of 4px and a space between the next DIV to the left or right of it of 2px. Is there any way I can pull this off? All the tutorials out there seem to only be for 2 or 3 columns and NEVER have margins. Seems like it should be simple... Thanks for any help!!
[RESOLVED] CSS multiple column fluid layout
Seems like it should be simple...
When you split the divs up to make your 100% you have to take into account the padding and margins. Here is a 4 column layout which should help you.
I've come across this site many times in my searching...These DIVS use absolute positioning. Basically, what I'm trying to do is create a 100% width table, but only in CSS. See the rough example below:
X X X X X X
X X X X X X
X X X X X X
etc... There is a set amount of columns but the amount of rows is dynamic and always changing.
The problem you're running into is that the total width of a block-level element is its specified width plus the left and right margins, paddings, and borders. If you want to use percentages, then you need to also specify your left/right margins, paddings, and borders in percentages, such that the total of all those percentages for all the elements involved does not exceed 100%. (Unless, of course, you do not start your page with a fully qualified doctype declaration and are viewing the page in IE, in which case it will be in "quirks mode" and will calculate element widths in a non-standard manner. )
There's no other way to do it other than specify it all in percentages? For example, I'd like to always have a 1px border and 2px margin.
rapmonkey wrote:There's no other way to do it other than specify it all in percentages? For example, I'd like to always have a 1px border and 2px margin.
Only if you "fudge" your percentages to allow for the fact that as the total display width decreases, a pixel takes up a greater percentage of the available space. This would result in values which take up all/most of the available width at, say 800px window width will end up with some unused space at 1200px width. If you use 1px borders and settle for using percentages for the margins/paddings, this variance can be minimized pretty well.
For instance, the following works pretty well until you get down to around 400px width, while still pretty good at 1024 width:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang='en'>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=ISO-8859-1'>
<title>Test</title>
<style type="text/css">
<!--
body {
margin: 0;
padding: 0;
font: medium arial, sans-serif;
}
.row {
margin: 0;
padding: 1%;
background-color: silver;
color: black;
clear: both;
}
.row div {
margin: 1%;
padding: 1%;
width: 15.5%;
background-color: white;
color: black;
float: left;
border: solid 1px black;
}
.clear {
font-size: 1px;
height: 1px;
line_height: 1px;
margin: 0;
padding: 0;
clear:both;
}
-->
</style>
</head>
<body>
<div class="row">
<div>
<h3>Heading</h3>
<p>This is a test. It is only a test.</p>
<p>This has been a test.</p>
</div>
<div>
<h3>Heading</h3>
<p>This is a test. It is only a test.</p>
<p>This has been a test.</p>
</div>
<div>
<h3>Heading</h3>
<p>This is a test. It is only a test.</p>
<p>This has been a test.</p>
</div>
<div>
<h3>Heading</h3>
<p>This is a test. It is only a test.</p>
<p>This has been a test.</p>
</div>
<div>
<h3>Heading</h3>
<p>This is a test. It is only a test.</p>
<p>This has been a test.</p>
</div>
<p class="clear"> </p>
</div>
<div class="row">
<div>
<h3>Heading</h3>
<p>This is a test. It is only a test.</p>
<p>This has been a test.</p>
</div>
<div>
<h3>Heading</h3>
<p>This is a test. It is only a test.</p>
<p>This has been a test.</p>
</div>
<div>
<h3>Heading</h3>
<p>This is a test. It is only a test.</p>
<p>This has been a test.</p>
</div>
<div>
<h3>Heading</h3>
<p>This is a test. It is only a test.</p>
<p>This has been a test.</p>
</div>
<div>
<h3>Heading</h3>
<p>This is a test. It is only a test.</p>
<p>This has been a test.</p>
</div>
<p class="clear"> </p>
</div>
</body>
</html>
I think that's what I'll do, thanks for the help!
And just a "philosophical" follow-up: if the data you are outputting can logically be considered to be tabular, then there's no reason you cannot mark it up as a HTML table. The thing to avoid is using tables as a means to control the visual display of non-tabular material.
I haven't tried to see if this idea will lead to a solution, but there's a demo here of percentage plus pixel sizing; it strikes me that you could have boxes that have a suitable percentage width minus the thickness of their borders.