Hello, I had a problem last week with columns extending all the way down.
Thanks to the help of Ingo Chao and Gunlaug Sortun, I fixed it with the help
of strategically placed background images. Now my next problem is a doozy.
I'm having a problem with the floats. Their flying high from the rest of
the page (as they are supposed to do) and I can't figure out how to pin them
down so that they fit a liquid 2-column layout. Gunlaug directed me to a
page that addressed liquid columns and what to do with their floats:
http://www.communitymx.com/content/article.cfm?page=1&cid=AFC58 . But, the
only problem is that he talks about floats with multiple columns. I just
have 2 columns. And, being the CSS noob that I am - I have a hard time
following what he's talking about. My page, that I'm working on and
discovering all of these "lovely" CSS adventures, is:
http://www.steeloaklimited.com/houseplantrends/bgTest.html . It looks great
on my computer screen. On other screens, though, it looks like garbage!
The float on the right starts covering the left side. How do I fix this? I
think I have absolute postioning in there - I'll take it out after I write
this. But, I need someone to explain to me, if they can, what I have to do
or even alter the CSS and html and show me. I don't care - as long as it
works.
My html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
<html xmlns="http://www.w3.org/1999/xhtml";>
<head>
<title>House Plan Trends - Background Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="bgTest.css" media="all" />
</head>
<body>
<div id="content">
<p class="leftwords">
<span class="firstLetter">C</span>lassic clapboard siding sets
off a
metal roof and latticework fret detail
on this island cottage. True to its tropical
roots, this design features a raised living
area announced by a symmetrical staircase
and a balustered porch. An unrestrained
floor plan offers both open, spacious living
areas and well-defined sleeping rooms with
outdoor views.<br>
Double French doors lead to the rear
deck from the grand room, which has a
cozy fireplace. Both sides of the formal
dining room open to decks, positioned to
capture prevailing gentle breezes. The well-
appointed kitchen overlooks the living
area, splashed with the beauty and warmth
of natural light.<br>
Upstairs, a hall with a balcony overlook
leads to French doors, which anounce the
homeowner's retreat. A morning kitchen
conveniently prepares juice and coffee
while a private observation deck invites
sunning and stargazing. The master bath
boasts a windowed, whirlpool tub, an
oversized shower, two lavatories and a
U-shaped walk-in closet.
</p>
<div class="plannumber">
Plan 6654
</div>
<div class="specbox">
Main Level: 1,342 sq. ft.<br>
Upper Level: 511 sq. ft.<br>
Total Living Area: 1,853 sq. ft.<br>
Price Schedule: D<br>
Width: 44'-0"<br>
Depth: 40'-0"<br>
</div>
</div>
<div id="content2">
Queisser <br>
<img src="jpgs/queisser-rendering.jpg" alt="Queisser Elevation
Rendering">
<img src="jpgs/queisser-fl1.jpg" alt="Queisser First Floor
Plan">
</div>
</body>
My CSS:
/* CSS Document */
body {
background: url(gifs/background.gif) 26% 0;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}
#content {
position: absolute;
top: 0px;
left: 0px;
padding: 10px 1% 10px 2%;
margin: 0px;
border: 0px;
background: #cbdea8;
width: 30%; /* ie5win fudge begins */
voice-family: "\"}\"";
voice-family:inherit;
width: 23%;
}
html>body #content {
width: 23%; /* ie5win fudge ends */
}
#content2 {
position: absolute;
top: 0px;
right: 0px;
padding: 10px 2% 10px 2%;
margin: 0px;
border: 0px;
font-size: 24px;
font-family: Storybook, "Cooper Black", Harrington, "Matura MT Script
Capitals", "Monotype Corsiva", cursive;
/*background: #FFF;*/
width: 70%; /* ie5win fudge begins */
voice-family: "\"}\"";
voice-family:inherit;
width: 69%;
}
html>body #content2 {
width: 69%; /* ie5win fudge ends */
}
.clearfix:after {
content: ".";
clear: both;
height: 0;
visibility: hidden;
display: block;
}
.clearfix {
display: inline-block; /* Fixes IE/Mac */
}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
.leftwords {
font-size: 12px;
line-height: 22px;
margin-top: 20px;
margin-bottom: 10px;
font-family: "Times New Roman", Times, serif;
}
.firstLetter {
font-size: 36px;
color: #006633;
font-weight: bold;
line-height: 40px;
}
.plannumber {
font-weight: bold;
color: #cbdea8;
background-color: #006633;
width: 35%;
padding-left: 1em;
padding-top: 0.2em;
padding-bottom: 0.2em;
}
.specbox {
margin: 15px;
border-width: 2px;
border-color: #006633;
border-style: solid;
}
</html>
_________________________________________________________________
FREE pop-up blocking with the new MSN Toolbar – get it now!
http://toolbar.msn.click-url.com/go/onm00200415ave/direct/01/
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
