CODEWITHSUNDEEP
cssvertical-alignment
dlsso
dlsso

Reputation: 8111

Align currently floated div to bottom without changing HTML

Problem

I have a header with the basic HTML structure

<div id="header">
  <div id="logo"></div>
  <div id="navigation"></div>
  <div id="userInfo"></div>
  <div class="headRight"></div>
  <div id="callCenter" class="headRight"></div>
</div>

I cannot change the HTML. Currently it is laid out with floats, and navigation was aligned to the bottom of the header using padding-top. However, it only works when userInfo is 2 lines, and it can be 3 or 4.

What I need to do

Using only CSS, align navigation to the bottom for all nav heights while maintaining the original layout.

What I've tried

Half a dozen stack overflow solutions including the classics position:absolute and vertical-align:bottom on parent. (The former breaks the document flow, and the latter seems not to work because other elements get in the way.)

The fiddle

Cleaned fiddle best I could, but inspect will probably still be easiest. https://jsfiddle.net/ohrhe4u5/1/

Notes:
  1. The tabs should just touch the bottom of the header.
  2. callCenter is misaligned in this example as well, but you can ignore. It's much lower priority.

New fiddle

I changed header, logo, and navigation to display:inline-block, allowed userInfo to float right, gave the nave extra height to make sure there's always room, and absolute positioned the headRight items.

That leaves me with this. A little janky due to the absolute positioning and forcing the nav height larger. Any better ideas? https://jsfiddle.net/ohrhe4u5/2/

Upvotes: 0

Views: 189

Answers (1)

haxxxton
haxxxton

Reputation: 6442

I generally dislike float for positioning where i can help it (this is a personal preference because i find it sometimes painfully unpredictable), as such, using a combination of position:absolute, min-height and margin i believe i have recreated what you're after.

Basically this solution works by position:absolute'ing the elements that we have some idea of consistent sizes of (the logo and the navigation), then have the header element take its height from the user data and links on the right. We add a min-height to the header element though so that should the user data be reduced to 2 lines, the height is still enough to accommodate the absolutely positioned elements (given they no longer affect the height of the header element by being absolute).

JSFIDDLE

CSS

/* new parts of the css */
#header {
    min-height:112px; /* in case user data is made smaller */
    padding:10px 10px 0 20px;
    position:relative;
}
#logo {
    width: 210px;
    position:absolute;
    top:50%;
    width:210px;
    height:62px;
    left:20px;
    margin-top:-32px;
    z-index:1; /* bring logo above the user data */
}
#navigation {
    position:absolute;
    bottom:0;
    left:210px;
    font-size: 20px;
    height: 40px;
    z-index: 1; /* bring navigation above the user data*/
}
#userInfo table{
    margin:0 0 0 auto;
}
.headRight{
    text-align: right;
    padding-bottom: 0.2em;
}

Upvotes: 1

Related Questions