Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Make element scale down to min-width before next elements wrap

I am making a fairly simple responsive website. I have a logo div that keeps the logo centered on small screens, and to the left on big screens. Everything is working how I want it to, (try resizing the jsfiddle) except that I want the logo div to scale down to it's min-width before the links wrap to the next line. I'm not sure how to word this, but I want the logo div to resize based on if the links are pushing it (if they have enough room). When it reaches it's min-width, then the links should wrap. Not sure if this is possible, but I figured I'd ask anyway.

Here is the jsfiddle.

The html:

<div class="header">
  <div class="logo">logo</div>
  <div class="link">link one</div>
  <div class="link">link two</div>
  <div class="link">link three</div>
</div>

The css:

.header {
    text-align: center; /* Centers the logo text, and centers the links between the logo div and the other side of the page.*/
}
.logo {
    max-width: 300px;
    min-width: 100px;
    width: 100%; /* It is always the min-width without this*/
    background-color: red;
    display: inline-block;
    float: left;
}
.link {
    display: inline-block;
    background-color: green;
}

I hope I was clear, I'm still learning. Let me know if I need to add any more details.

like image 668
Caleb Avatar asked Oct 21 '22 06:10

Caleb


1 Answers

I went looking some more and found flexboxes. Got them to do exactly what I wanted.

http://jsfiddle.net/3525C/10/

My new HTML:

<div class="header">
    <div class="logo">logo</div>
    <div class="nav">
        <div class="link">link one</div>
        <div class="link">link two</div>
        <div class="link">link three</div>
    </div>
</div>

and CSS:

.header {
    text-align: center;
    display: flex;
    flex-flow: row wrap;
}
.logo {
    flex: 1 0 auto;
    min-width: 100px;
    background-color: red;
}
.nav {
    flex: 1 1 auto;
    background-color: lightgray;
    text-align: center;
}
.link {
    display: inline-block;
    background-color: green;
}

Thanks hexalys for helping me get it working.

like image 146
Caleb Avatar answered Oct 27 '22 17:10

Caleb