Basic Problem with Grid

Cronet

unread,

Nov 24, 2008, 5:09:37 PM11/24/08

to Blueprint CSS

Hi there,

I'm very new to Blueprint CSS and i got a basic question about the
grid thing.

As I understand, you divide your layout with a grid and could easily
adjust the width with the classes span-1 to span-X, depends on the
layout.

I have some Basic Layout

<body>
<div class="container">
<div id="header" class="span-24">
HEADER GOES HERE
</div>

<div id="nav" class="span-4 border">
NAVIGATION
</div>

<div id="main" class="span-20 last">

<p class="breadcrumb">kostenlos Registrieren</p>

<h1>kostenlos Registrieren</h1>

<form>
<fieldset id="register" class="" style="border:0">
<legend>Account Informationen</legend>
<label for="UserUsername">Benutzername *</label><br />
<input name="data[User][username]" type="text" class="text" /
><br />

<br />
<hr class="span-8">

<div class="span-2 append-1">
<label for="UserZip">PLZ *</label><br />
<input name="data[User][zip]" type="text" class="text span-2"
maxlength="6" />
</div>
<div class="span-8 last">
<label for="UserCity">Ort *</label><br />
<input name="data[User][city]" type="text" class="text span-6" /
><br />

</div>

<label for="UserCountry">Land *</label><br />
<select name="data[User][country]" class="text span-6">
<option value="1">Deutschland</option>
<option value="2">Österrreich</option>
<option value="3">Schweiz</option>
</select>
<br /><br />

<div class="submit"><input type="submit" value="Benutzer
erstellen" /></div>
</fieldset>
</form>
<p class="notice">
Die mit * gekennzeichneten Felder müssen ausgefüllt werden.
</p>
</div>
<div id="footer" class="span-24">
FOOTER
</div>
</div>
</body>
</html>

And it looks like this:

http://dl.getdropbox.com/u/267383/Bild%201.png

As you notice, the text-input for the Country ("Land") is right beside
the City ("Stadt") text-input but I thought with the class .last
should be the break for next elements to slide down in the next
line...

Can anybody explain me, why there isn't a break?

Regards,
Cronet

Lorin Tackett

unread,

Nov 24, 2008, 5:28:44 PM11/24/08

to bluepr...@googlegroups.com

For what you're trying to do here, you should be using the class "clear" instead of "last" for the Ort container div.

This is because Blueprint's .last class only adjusts the right margin, it doesn't clear the float as you've suspected. Whereas the .clear class specifically does just that.

-Lorin

Cronet

unread,

Nov 24, 2008, 5:39:34 PM11/24/08

to Blueprint CSS

Thank you for the fast reply!!

Adding .clear to the "Ort" container cleares Ort in the next line and
country is beside Zip ("PLZ").

I need the order ZIP, CITY - next line - COUNTRY ...

There is a solution, adding a div to the country container and adding
there .clear class.

Perhaps theres a smarter solution than that... But I don't see it at
the moment...

Regards,
Cronet

Lorin Tackett

unread,

Nov 24, 2008, 5:50:53 PM11/24/08

to bluepr...@googlegroups.com

Ha! Sorry, momentary loss of sanity. Yes, that functions just as I
described that it would, I just pointed you to the wrong div. My
mistake. Using structural markup is one way of doing it, though as web
standards go it's not exactly the most efficient way to do it. Try
using the .clearfix class on Ort, or using .clear on Land.

-Lorin

Cronet

unread,

Nov 24, 2008, 6:21:28 PM11/24/08

to Blueprint CSS

Thanks for your reply again!

The .clearfix isn't working for me, neither in Firefox 3 nor Safari 3.
I ended up with the second version (.clear on Land).

Regards,
Cronet

twhit...@gmail.com

unread,

Nov 25, 2008, 10:42:23 AM11/25/08

to Blueprint CSS

Cronet,

In your section for the select country that needs to be in its own
div. I did some testing and this is what I came up with.

<label for="UserCountry">Land *</label><br />
<select name="data[User][country]" class="text span-6">
<option value="1">Deutschland</option>
<option value="2">Österrreich</option>
<option value="3">Schweiz</option>
</select>
<br /><br />

</div>

This is just the section that you were talking about. This displays
correctly in all 3 major browsers, IE, Firefox, and Safari. This needs
to be in its own class and you need to use the clear command to move
that selection down to the next line. Hope this helps.

Timothy White
Wilcox Development Solutions

Reply all

Reply to author

Forward