Moving a div below another div?

[Lee Olayvar]

I'm new to the idea of CSS Frameworks, so pardon my ignorance. I was hoping to get this design question answered, before i spent a couple hours toying with BP to see if it can even do what i want.

So, what i want is relatively simple. I have branding at the top of my page, followed by primary nav, and then secondary nav. These are all contained within divs. Now semantically,  the XHTML is fine. It has meaning, order, etc, just the way you would want it. However on my actual design, the branding is going to be positioned in a little box below the secondary nav, and towards the right side of the page. With normal CSS this is easy, but is this possible with BP? I'd imagine it would be simple with this grid system i'm seeing, but im not sure how much BP goes by semantics, considering that this blueprint sample page ( http://www.blueprintcss.org/tests/parts/sample.html ) uses a bit of semantic code (hr) for styling (padding mostly).

Would what i want be possible with BP?

--
Lee Olayvar

[Matthew Nuzum]

On Tue, Dec 23, 2008 at 9:12 AM, Lee Olayvar <leeol...@gmail.com> wrote:
> I'm new to the idea of CSS Frameworks, so pardon my ignorance. I was hoping
> to get this design question answered, before i spent a couple hours toying
> with BP to see if it can even do what i want.
>
> So, what i want is relatively simple. I have branding at the top of my page,
> followed by primary nav, and then secondary nav. These are all contained
> within divs. Now semantically, the XHTML is fine. It has meaning, order,
> etc, just the way you would want it. However on my actual design, the
> branding is going to be positioned in a little box below the secondary nav,
> and towards the right side of the page. With normal CSS this is easy, but is
> this possible with BP?

Hi, the beauty of blueprint is that there's really no magic involved. You get:

* A good reset
* Attractive typographical defaults
* Some simple formatting classes
* A grid

So if I were creating a complex layout and the header portion of the
page would be difficult to do with the grid then I'd just not use the
grid for that part of the page. For example, create one 24 column box
for all of the header elements and put your primary and secondary
links and branding into it and style it the way you would on a normal
blueprint site. Then use the grid elements below.

It's not like Ruby on Rails or similar types of frameworks where you
start to lose the benefits of the framework when you break away from
the conventions. This is probably because of CSS's cascading nature.
Just take the parts you want and use them how and where you want.

--
Matthew Nuzum
newz2000 on freenode, skype, linkedin and twitter

[Matthew Nuzum]

Minor mistake in my prev email:

> For example, create one 24 column box
> for all of the header elements and put your primary and secondary
> links and branding into it and style it the way you would on a normal
> blueprint site.

I meant, "style it the way you would a normal non-blueprint site"

[ads]

Hi Lee,

See this site that I have built recently using blueprint for the main
layout:

http://www.physiolive.com

This site uses the default BP grid although some of the default
vertical margins are overridden in a second css style sheet. Not quite
sure what layout or effect you are after but if you post up a mock up
or something then happy to take a look...