Forum Moderators: not2easy
This first set of code is what the second set of code is intended to look like...
<div style="background: #ccc; float: right; margin: 1px 1px 0px 0px; width: 200px; z-index: 1;">
<p>aaa</p>
</div><div style="background: #aaa; border: #000 solid 1px;">
<p>ccc</p>
</div>
Now my goal is to have the 200px div appear in the code AFTER the other div and display exactly as how it does above. However when I try to float both DIVs the width becomes negated. I want to add a border to the wider div so having a border and a 100% width will cause some issues.
Ideas?
John
Good luck.
Is absolute positioning for the div you want to the right an option?
<div style="background: #aaa; border: #000 solid 1px; margin-right: 200px;">
<p>ccc</p>
</div>
<div style="background: #ccc; position:absolute; top:0; right: 0; margin: 1px 1px 0px 0px; width: 200px; z-index: 1;">
<p>aaa</p>
</div>
<div style="background: #aaa; border: #000 solid; border-width: 1px 0px 1px 1px; margin-right: 200px;">
<p>absolute positioned works</p>
</div><div style="background: #ccc; border: #000 solid; border-width: 1px 1px 1px 0px; position:absolute; top: 7px; right: 10px; margin: 1px 1px 0px 0px; width: 200px; z-index: 1;">
<p>aaa</p>
</div>
That looks fine in Firefox 1.5. I believe I am alreay following the basic concept of the linked page however he keeps defining the width which negates my goal entirely.
John
The added benefit is that my inset (side column) automatically stretches with 100% height without any actual effort after I get my initial goal achieved. I still feel a little cheap using this method but to some I think it's a welcome compromise. It has issues in IE 4 though no one uses that anymore. IE 5 kinda works but you can use IECC anyway from that point on. Plus it even works with Netscape 4.8 and Opera 3.62 (but not Opera 2.12, though I don't have heavy Opera 2 traffic ;))!
Anyway here is the code, curious as to how others feel about this...
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<title></title>
<style type="text/css">
body {
margin: 8px;
padding: 0px;
}
div.content {
border: #000 solid;
border-width: 0px 1px 0px 0px;
height: auto;
margin-right: 159px;
min-height: 600px;
padding: 4px;
}
div.inset {
border: #000 solid;
border-width: 0px 0px 0px 1px;
float: right;
padding: 4px;
margin: 1px 1px 0px 0px;
width: 150px;
}
div.page {
border: #000 solid 1px;
float: left;
margin: 0px -161px 0px -1px;
padding: 0px;
width: 100%;
}
</style>
</head>
<body><div class="page">
<div class="content">
<p>Content</p>
</div>
</div><div class="inset">
<p>Inset</p>
</div></body>
</html>
To me that means I'm using one div in the sense of manipulating layout (the same concept as using tables for non-tabular data)
I would disagree with you there. With tables, the element has some semantic meaning, which is lost when used for layout purposes. Asside from muddling up the HTML, it also makes it less user friendly for people who use non-visual browsers.
An extra div, on the other hand, is really just additional grouping, which is what a div is semantically for. From the HTML spec [w3.org]:
The DIV and SPAN elements, in conjunction with the id and class attributes, offer a generic mechanism for adding structure to documents. These elements define content to be inline (SPAN) or block-level (DIV) but impose no other presentational idioms on the content. Thus, authors may use these elements in conjunction with style sheets, the lang attribute, etc., to tailor HTML to their own needs and tastes.
Thus, comparing it to using tables for layout is like comparing apples and oranges.
