CODEWITHSUNDEEP
htmlcss
Atmocreations
Atmocreations

Reputation: 10061

Div height not adapting to parent

Still developing my html5/css3 mobile site, I have trouble adjusting the height of a div to its parent.

http://jsfiddle.net/1eg2cwLs/

Actual screenshot

The fiddle doesn't exactly look like this because I'm using webfonts (saved offline though as I'm not going to have internet connection on the target system). But the problem remains the same.

You might be seeing what the problem is right from the spot, if not: I would like the green and red bar (.itemclass) always have the same size as the content of its parent (.item).

Depending on font, its size (still playing around with it) and the overall height of each item, I have to precisely adjust the negative margin. Otherwise it looks like in the screenshot. The negative margin I just mentioned is in the CSS-class .itemclass: (marked with an arrow also in the fiddle)...

.itemclass {
  height: 100px;
  width: 50px;
  background-color: #27ae60;
  vertical-align: middle;
  text-align: center;
  color: white;
  font-size: 2em;
  margin-top: -27px; /* <=== */
  display: inline-block;
}

This cannot be the solution. I tried a lot of stuff and I only got it "working" the way I mentioned.

Any better idea how to make it look clean without a hack?

As well, tips for other improvements regarding my html/css are well appreciated.

Sorry for appending the entire code into the fiddle. I don't know whether it was representative if I was going to remove stuff.

Best regards

Upvotes: 0

Views: 80

Answers (3)

Taruc
Taruc

Reputation: 301

You can set .item's margin-top to 0, and instead adjust the margin-top of .vcenter:before. This way you're just adjusting the text and not the div.

Or you could drop the static height and width of .itemclass altogether. Now the .itemclass will scale. http://jsfiddle.net/1eg2cwLs/5/

.item {
    width: 100%;
    height: auto;
    background-color: #eeeeee;
    border-bottom: 1px solid #cccccc;
    overflow: hidden;
}
.itemclass {
    height: 100%;
    width: auto;
    background-color: #27ae60;
    vertical-align: middle;
    text-align: center;
    color: white;
    font-size: 2em;
    margin-top: 0;
    display: inline-block;
}

As a fallback, you can set .item to not show overflow, and then adjust the line-height of :

 .item {overflow:hidden}

Upvotes: 1

isherwood
isherwood

Reputation: 61063

I'd probably go this route:

.item {
    position: relative;
    ...
}
.itemclass {
    position: absolute;
    top: 0;
    bottom: 0;
    ...
}
.itemcontent {
    margin-left: 50px;
    ...
}

Demo

Really big font demo

Consider a reasonable min-width for the body to prevent .tagline from overlapping, etc.

Upvotes: 2

Patrick Moore
Patrick Moore

Reputation: 13344

overflow: hidden; is your best friend in this case! It hides any overflow content from view outside of .item

Add it into .item {} declaration.

http://jsfiddle.net/1eg2cwLs/1/

Upvotes: 0

Related Questions