Wrap floated text at smaller screen widths?

Question

Im floating a heading to the left and a div containing a few links to the right. At wide screen widths everything is fine.

At smaller widths the links appear under the heading. Instead I need the heading to wrap.

My content is dynamic, the heading text will vary in length and the number of links with vary also. Therefore I dont believe I can use % widths.

I can alter the HTML however I need to keep the heading above the links in the HTML. This is because for the smallest media query the heading will be above the links.

enter image description here

http://codepen.io/anon/pen/OPxbxG

<div class="container">
  <h1>Title goes here</h1>
  <div class="links">
    <a href="#">Link one</a>
    <a href="#">Link two</a>
  </div>
</div>

.container {
  background: grey;
  width: 60%;
  margin: auto;
  overflow: auto;
}
h1 {
  float: left;
  margin: 0;
}
.links {
  float: right;
}

score 1 · Answer 1 · edited May 23 '17 at 12:20

1

1) Place the links first in the markup

2) Set overflow:hidden (or auto) on the heading instead of float:left

Updated Codepen (Resize page to see this work)

The reason why this works is that setting overflow:hidden (or auto) establishes a new block formatting context. For more info see this post.

.container {
  background: grey;
  width: 60%;
  margin: auto;
  overflow: auto;
}
h1 {
  overflow: hidden;
  margin: 0;
}
.links {
  float: right;
}

<div class="container">
  <div class="links">
    <a href="#">Link one</a>
    <a href="#">Link two</a>
  </div>
  <h1>Title goes here</h1>

</div>

edited May 23 '17 at 12:20

Community

1
1

answered Feb 02 '15 at 14:20

Danield

121,619
37
226
255

Thank you for your answer. Is it possible to achieve the same thing while keeping the heading above the links in the HTML's source order? For my smallest media query view id like to keep the heading above the links. – Evanss Feb 02 '15 at 14:28

score 1 · Answer 2 · answered Feb 02 '15 at 14:22

1

Did you mean something like that : http://codepen.io/anon/pen/ZYXBoB ?

I just remove the float:left; on the title and put it after the menu in DOM.

answered Feb 02 '15 at 14:22

tomtomtom

829
1
8
20

Thank you for your answer. Is it possible to achieve the same thing while keeping the heading above the links in the HTML's source order? For my smallest media query view id like to keep the heading above the links. – Evanss Feb 02 '15 at 14:28
In a différent way, I use `display:table-cell;` for displaying : http://codepen.io/anon/pen/JorbmL, but i'm not sure if it what you searched – tomtomtom Feb 02 '15 at 14:41

Danield · Answer 3 · 2015-02-02T14:54:12.330

If CSS3 is an option, then you can use flexbox to acheive this, without having to change the order of the markup.

Just set display:flex on the container and flex:1 on the heading to fill remaining viewport width (not taken by the links)

Updated Codepen

.container {
  background: grey;
  width: 60%;
  margin: auto;
  overflow: auto;
  display: flex;
}
h1 {
  flex: 1;
  margin: 0;
}
.links {
  float: right;
}

<div class="container">
  <h1>Title goes here</h1>
  <div class="links">
    <a href="#">Link one</a>
    <a href="#">Link two</a>
  </div>
</div>

Wrap floated text at smaller screen widths?

3 Answers3