CODEWITHSUNDEEP
htmlcsscss-float
zazvorniki
zazvorniki

Reputation: 3602

responsive float without media queries

I'm building a header for a website that has a float:right; in it to position the users info to the right of the screen. This works fine, except for when the user makes the browser smaller. The user information then jumps down the the next line, witch is fine, but the header does not expand with it.

I'm trying to figure out a solution to make the header expand down without using media queries. It's fine using media queries, but having it expand naturally would be a lot better.

I've put together a jsFiddel for an example and in case I'm doing an awful job at explaining my issue.

I've tried a few things to fix this.

I have tried placing a float:left; on the logo in the left corner, but that makes the background on the header disappears. And then when putting a overflow:auto; on the header makes a scroll bar appear.

I have also tried using media queriers to expand the header manually, but there has to be a better, cleaner way then that.

Any help would be much appreciated.

header{
    background-color: #23234c;
    padding: .3em 0;        
}

header li{
    display: inline-block;
    margin:0 .5em;
    font: bold 1.2em/1.5em "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
}

.topLinks{
    float: right;
}

Upvotes: 1

Views: 152

Answers (1)

Kyle Sletten
Kyle Sletten

Reputation: 5413

Try adding the following header style:

header {
    clear: both;
    overflow: hidden;
}

This will force the header to stay larger than its floating contents.

Upvotes: 2

Related Questions