Hey badnaam,
The border you've added to all divs is probably breaking Blueprint's
default grid calculations. Remove the class div {border: solid 1px}
and the columns should jump to a single line.
Note: class="span-24 last" is redundant due to the fact that span-24
has margin-left:0 in the grid stylesheet. So adding the 'last' class
is not necessary there.
Note2: I would uncomment your wrapper divs around each "row" of span-x
divs and change the class to from 'span-24' to 'clearfix'. This not
only clears the floats from the span-x divs inside, but also gives us
a nice div hook to add an id or more classes to a block of code. Then
we have a way to target specific chunks of code and style them
differently with css. Fun stuff!
Happy CSS'n
--
Sean K. Stewart
On Mar 1, 12:16 pm, badnaam <[email protected]> wrote:
> Shouldnt box1, box2 and box 3 be on the same row with the code below.
> Same for right/keft nav and content. But none of them appear to. I am
> using the latest standard 950px layout on firefox.
>
> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd";>
> <html xmlns="http://www.w3.org/1999/xhtml"; xml:lang="en" lang="en">
> <head>
> <title>
> BP
> </title>
>
> <link rel="stylesheet" href="css/screen.css" type="text/css"
> media="screen, projection"/>
> <link rel="stylesheet" href="css/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]-->
> <style type="text/css">
> div {
> border: solid 1px;
> }
> /* .container {
> border: dashed 1px;
> }
> */
> .main_content_image {
> /* height: 250px;
> width:950px;*/
> }
> </style>
> </head>
>
> <body>
> <div class="container">
> <div class="span-24 last">
> Header
> </div>
>
> <!--<div class="span-24">-->
> <div class="span-8">
> Box1
> </div>
> <div class="span-8">
> Box2
> </div>
> <div class="span-8 last">
> Box3
> </div>
> <!--</div>-->
>
> <!--<div class="span-24">-->
> <div class="span-4">
> Left sidebar
> </div>
>
> <div class="span-16">
> Main content
> </div>
> <div class="span-4 last">
> Right sidebar
> </div>
>
> <!--</div>-->
> <!--</div>-->
>
> <div class="span-24 last">
> Footer
> </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.
