Forum Moderators: not2easy
I'm working on a layout that simulates tables, and I'm having trouble getting tables with multiple "columns" to effectively expand the div layer down the page.
I have one div layer to act as a "shell". this has a margin around it to keep pushing anything that might appear below my "tables" down the page as the table gets taller. CSS is:
#left {
float: left;
margin: 50px 0 50px 30px;
width: 850px;
}
Inside that div, I want a table with multiple columns. (I keep saying "table", but that's just what I'm simulating... everything here is technically table-less)
When I put a table inside the main div that only has ONE column, the outer div expands perfectly as more rows (<p> tags) are added. With one column, I am able to use "relative" positioning inside the div. CSS is:
#name {
position: relative;
left: 0;
top: 0;
width: 350px;
}
#namecol1 {
position: relative;
left: 0;
top: 0;
width: 99px;
}
However, when I add a second column, I believe I need to specify "absolute" positioning.
#namecol1 {
position: absolute;
left: 0;
top: 0;
width: 99px;
}
#namecol2 {
position: absolute;
left: 100px;
top: 0;
width: 250px;
}
NOW, if I add rows in the markup, the outer div will not expand with my "tables". Markup is:
<div id="left">
<div id="name">
<div id="namecol1">
<p> Example1</p>
<p> Example1</p>
<p> Example1</p>
<p> Example1</p>
</div>
<div id="namecol2">
<p> Example1</p>
<p> Example1</p>
<p> Example1</p>
<p> Example1</p>
</div>
</div>
</div>
Please let me know if this is enough to go on, or if I need to explain the problem further... Any feedback is appreciated!
thanks.
NOW, if I add rows in the markup, the outer div will not expand with my "tables".
There are two solutions (I know of) for this. Put a clearing element just before the closing div of the outer div:
<div style="clear:both"></div>
</div><!-- end #left -->
But since the outer div is floated, the other solution is to float the elements inside #left, because a floated element will always contain (shrink wrap) it's floated children. Inline styles applied for clarity:
<div id="left">
<div id="name" style="float: left;">
<div id="namecol1" style="float: left;">
<p> Example1</p>
<p> Example1</p>
<p> Example1</p>
<p> Example1</p>
</div>
<div id="namecol2" style="float: left;">
<p> Example1</p>
<p> Example1</p>
<p> Example1</p>
<p> Example1</p>
</div>
</div>
</div>
You probably don't need the floats on namecol1 and 2 because the paragraphs should clear them.
It is still displaying the outer div (#left) at about 15px tall, and that doesn't change with the addition of new <p>'s. The code, exactly as I have it is below...
(also, I realize you were offering two separate solutions... I couldn't get them to work on their own, so I tried them both at the same time)
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<style type="text/css">
#name {
float: left;
position: relative;
left: 0;
top: 0;
width: 350px;
}
#namecol1 {
float: left;
position: absolute;
left: 0;
top: 0;
width: 99px;
}
#namecol2 {
float: left;
position: absolute;
left: 100px;
top: 0;
width: 250px;
}
#left {
float: left;
margin: 50px 0 50px 30px;
width: 850px;
}
</style>
<title>divTest</title>
</head>
<body>
<div id="left">
<div id="name">
<div id="namecol1">
<p>Name:</p>
<p>Joint:</p>
<p>Account:</p>
<p>Email:</p>
</div>
<div id="namecol2">
<p>Name:</p>
<p>Joint:</p>
<p>Account:</p>
<p>Email:</p>
<p>Email:</p>
<p>Email:</p>
<p>Email:</p>
<p>Email:</p>
<p>Email:</p>
</div>
</div>
<div style="clear:both"></div>
</div>
</body>
</html>
#namecol2 {
float: left;
position: absolute;
you cannot have both, float and position: absolute;
position: absolute; removes an element from the flow, which is why the outer div is not wrapping around them, it doesn't know they're there!.
clearing divs only work with floats, so I think what rocknbil was saying was use the floats instead of the absolute positioning? - you then won't need the co-ordinates as the columns should float next to each other and you should margins if you want gaps (cellspacing ;) between them
Very very happy. this did the trick!
Does anyone have an idea for a possible solution?
Again, many thanks.
