CODEWITHSUNDEEP
htmlcss
Luke
Luke

Reputation: 3551

Drawing rectangles with CSS

I have a use case whereby I want to draw rectangles in CSS. I need them to look like this:

Desired block layout

I've managed to get the smaller and taller boxes drawn but can't work out how to draw those that drop below the line. Here's a fiddle

Heres' my HTML:

<div class="word">
    <p class="letter taller"></p>
    <p class="letter"></p>
    <p class="letter"></p>
    <p class="letter hanging"></p>
    <p class="letter"></p>
    <p class="letter taller"></p>
    <p class="letter"></p>
</div>

Here's my CSS so far:

p {
    display: inline-block;
}
.letter {
    padding 1.618em;
    border-width: 1px;
    border-style: solid;
    width: 2em;
    height: 2em;

}
.taller {
    height: 4em;
}

.hanging {
 /* not sure what to implement here */
}

Upvotes: 3

Views: 387

Answers (3)

Michelle
Michelle

Reputation: 2712

Using margins may affect other elements, especially if you plan on including other content on your page. (See this) I'd recommend using position: relative combined with top: 2em. What that does is it pushes the element down 2em, relative to the original position of the element.

.hanging {
  height: 4em; 
  position: relative;
  top: 2em;
}

http://jsfiddle.net/WtuyL/6/

(On an unrelated note... here's a little bonus if you want to fully imitate the image and remove whitespace. You'll net to set a manual size to all <p> elements though.)

Upvotes: 5

Vucko
Vucko

Reputation: 20844

The simplest way is to use a negative margin-bottom to achieve this (you don't need to use positioning):

CSS:

.hanging {
    margin-bottom: -16px;
    height:4em;
}

JSFiddle

Note: also comment the whitespace between display:inline-block elements to remove it.

Reference - see this to see more hacks how to remove the whitespace between display:inline-block elements.

Upvotes: 3

Rikka
Rikka

Reputation: 1049

Try this.

.hanging {
    height:4em;
    margin-bottom:-1em;
}

Upvotes: 0

Related Questions