I don't know what I'm doing wrong here but I'm guessing that one of
you smarter people will just see the bug right off the bat. I tried to
convert a simple website to use Blueprint for column layout. I have
quadruple or more checked that my column count adds up to 24 but still
the side bar gets rendered below the center content. If I change one
of my widths from span-8 to span-7 then it stays on the right line but
the changed section is too skinny (as expected). Help! Code below,
thanks for any help.
/* bpcarved.css */
body {
margin : 0;
background: #112b63;
font-family: Georgia, serif;
line-height: 1.2em;
}
h1, p, ul {
margin: 0;
padding 10px;
}
ul {
padding: 10px;
list-style-type: none;
}
ul li {
margin: 0 0 10px 0;
padding: 0;
}
#wrap {
margin:0 auto;
padding: 10px 20px 20px 20px;
background: #0b204c;
}
#header {
height: 134px;
}
#content-left {
margin-top: 20px;
margin-bottom: 20px;
background: #fff;
}
#content-center {
margin-top: 20px;
margin-bottom: 20px;
background: #fff;
}
#sidebar {
margin-top: 20px;
margin-bottom: 20px;
background: #ccc;
}
#footer {
margin-top: 20px;
margin-bottom: 20px;
background: #ead9b8;
}
---------------------------------
<!DOCTYPE html PUBLIC "-//W3C/DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtm11/DTD/xhtm11-strict.dtd";>
<html xmlns="http://www.w3.org/1999/xhtml"; xml:lang="en" lang="en">
<head>
<title>Mark in Japan</title>
<meta http-equiv="Content-Type" content="text/html; charset utf-8" /
>
<link rel="stylesheet" href="css/blueprint/screen.css" type="text/css"
media="screen, projection">
<link rel="stylesheet" href="css/blueprint/print.css" type="text/css"
media="print">
<!--[if lt IE 8]><link rel="stylesheet" href="css/blueprint/ie.css"
type="text/css" media="screen, projection"><![endif]-->
<link rel="stylesheet" href="css/bpcarved.css" type="text/css"
media="screen"/>
</head>
<body>
<div id="wrap" class="container" >
<div class="column span-24" last>
<div class="column span-22 prepend-1 append-1"last>
<img src="images/life-live-grow-banner.jpg" alt="Life, live and
grow" />
</div>
</div>
<div class="column span-8" id="content-left">
<p>Content Left</p><p>Lorem ipsum dolor sit amet,
consectetuer
adipisciing elit. Pellentesque quis nisl eget est viverra
placerat. ...</p>
</div>
<div class="column span-8" id="content-center">
<p>Content Center</p><p>Nulla facilisi. Cras ac tellus
fringilla
tortor iaculis</p>
</div>
<div class="column span-8" id="sidebar" last>
<p>Content Sidebar</p>
<ul>
<li>Fusce diam. Pellentesque bibendum. Nulla
viverra vestibulum
justo.
Pellentesque pulvinar sapien.</li>
<li>Cras vestibulum elit id nibh hendrerit
eleifend. Pellentesque
id ante.
Sed volutpat blandit mi.</li>
<li>Morbi at tellus facilisis augue tempor
pharetra. Vestibulum
porta
condimentum dui.</li>
<li>Class aptent taciti sociosqu ad litora
torquent per conubia
nostra, per
inceptos himenaeos.</li>
</ul>
</div>
<div class="column span-22 prepend-1 append-1" id="footer" last>
<p>Copyright © Mark in Japan, all rights reserved.</p>
</div>
</div>
</body>
</html>
--
You received this message because you are subscribed to the Google Groups
"Blueprint CSS" group.
To post to this group, send email to [email protected].
To unsubscribe from this group, send email to
[email protected].
For more options, visit this group at
http://groups.google.com/group/blueprintcss?hl=en.
