CODEWITHSUNDEEP
htmlcss
bill fred
bill fred

Reputation: 159

Specifying heights in responsive layouts

I've been reading online and have come across numerous blogs and 'Professionals' that say you should not set heights and you should allow your content to fill the element instead. First of all.. why?

And also how can i allow my background colour to show on my header if i don't specify a height without using absolute or fixed position with top:0.

Here is my code:

HTML:

<header>
    <div class="row-std">
        <div class="logo">
            <img src="images/logo.png">
        </div>

        <nav>
            <ul id="navbar">
                <a href="#"><li class="nav-item">LINK 1</li></a>
                <a href="#"><li class="nav-item">LINK 2</li></a>    
                <a href="#"><li class="nav-item">LINK 3</li></a>    
                <a href="#"><li class="nav-item">LINK 4</li></a>    
                <a href="#"><li class="nav-item">LINK 5</li></a>                
            </ul>
        </nav>
    </div>
</header>

CSS:

header {
    width: 100%;
    background: #2f3842;
    position: absolute;
    top: 0;
}
header div.logo img {
    float: left;
    width: 20em;
    margin-top: 1.5em;
    margin-left: 1em;
}

header nav {
    float: right;
}
header nav ul#navbar a {
    text-decoration: none;
    list-style-type: none;
    color: #ebebeb;
    border: 0;
    transition-duration: .25s;
    -webkit-transition-duration: .25s;
}
header nav ul#navbar a:visited {
    color: #ebebeb;
}
header nav ul#navbar a:hover, header nav ul#navbar a:active {
    color: #16a085;
}
header nav ul#navbar .nav-item {
    display: inline-block;
    padding: 0.3125em 0.3125em;
    margin: 2.5em 1em;
    font-size: 0.84em;
    font-weight: 600;
}

As you can see the header currently has the absolute position with a top property value of '0'. This works for allowing the header to show the background colour and allow the element to be filled in terms of its height by its content but if i was to display an another element beneath this i cannot really do so as it will be displayed under it unless i use a margin-top of 5.5em perhaps to push the element down into its correct position which works fine, but this feels tacky. Is there a better way of doing this.

Upvotes: 0

Views: 36

Answers (1)

Adam Jenkins
Adam Jenkins

Reputation: 55772

Having unnecessary heights on elements in responsive designs can result in overflowing content on different screen resolutions and it's generally a good idea to not specify heights and let your content dictate the height of an element.

That being said, there are always circumstances where you need to manually specify heights of elements (usually these circumstances are where elements have no intrinsic height, like when specifying background images on elements with no other content, but other cases do exist).

Exceptions prove the rule. Bottom line when developing responsive sites, don't specify heights...unless you have to :).

Upvotes: 2

Related Questions