Make an element move below a div without setting height on div

Question

Here is the markup:

<div class="test">
  // These links are added with JavaScript
  <a href="fijf">Text 1</a>
  <a href="dfugru">Text 2</a>   
</div>
<h1>

Here is my CSS:

a {
  display: inline-block;
  float: left;
  // Other properties
}

.test {
  display: block;
}

My problem is that the div and heading appear side by side. However, I want the heading to appear below the div.

I assumed that using display:block will solve the issue but it doesn't. I tried adding a <br> tag after the div but that does not work either. One thing that works is setting a height on .test. The problem with this is that some other users might set a higher font-size, hence,(rendering the height I set on container useless) for links somewhere else and this will mess up the layout.

EDIT:

I have just control over the div and the elements inside it. There can be anything above or below the div. The heading is just for reference.

JSFiddle

This is a simple float clearing issue. [One common method is to clear the floats with a pseudo-element](https://jsfiddle.net/4xh066bd/). — misterManSam, Mar 26 '16 at 05:17
Have you tried putting display:block on the h1 element? The element with block applied to it is usually the one that will fall to the next line — AVDW, Mar 26 '16 at 05:19

score 0 · Answer 1 · answered Mar 26 '16 at 05:04

0

You can use float:left; clear:left

answered Mar 26 '16 at 05:04

Munawir

3,346
9
33
51

That doesn't help. Now, all the links are displayed vertically. – SanJeet Singh Mar 26 '16 at 05:05

brk · Answer 2 · 2016-03-26T05:23:16.000

0

HTML

<div class="test">
  <a href="fijf">Text 1</a>
  <a href="dfugru">Text 2</a>   
</div>
<h1>
UI am header
</h1>

CSS

.test {
      width:100%;
    }

jsfiddle

Edited JSFiddle

edited Mar 26 '16 at 05:23

answered Mar 26 '16 at 05:06

brk

48,835
10
56
78

Thanks :). However, this doesn't help. See my fiddle. – SanJeet Singh Mar 26 '16 at 05:09
@SanJeetSingh you didnt applied rules on test class. See this new fiddle. – brk Mar 26 '16 at 05:22

score 0 · Accepted Answer · answered Mar 26 '16 at 05:17

0

Basically, you have two options:

Make .test establish a new block formatting context, e.g. with overflow: hidden.

This will make it grow vertically to include the floats, and then the floats won't affect the header because it will be below them.

.test {
  overflow: hidden;
}

.test {
  overflow: hidden;
}
a {
  text-decoration: none;
  font-size: 1.3em;
  padding: 10px 10px 5px 10px;
  margin: 10px 3px;
  display:inline-block;
  float: left;
  width: 60px;
  text-align: center;
}

<div class="test">
  <a href="fijf">Text 1</a>
  <a href="dfugru">Text 2</a>   
</div>
<h1>UI am header</h1>

Clear the header. This will force it to be placed below the floats.

h1 {
  clear: left;
}

h1 {
  clear: left;
}
a {
  text-decoration: none;
  font-size: 1.3em;
  padding: 10px 10px 5px 10px;
  margin: 10px 3px;
  display:inline-block;
  float: left;
  width: 60px;
  text-align: center;
}

<div class="test">
  <a href="fijf">Text 1</a>
  <a href="dfugru">Text 2</a>   
</div>
<h1>UI am header</h1>

answered Mar 26 '16 at 05:17

Oriol

274,082
63
437
513

1

There are so many questions that this can be listed as a duplicate of. It's a simple float clearing issue, why add yet another duplicate answer? – misterManSam Mar 26 '16 at 05:19
Thanks.I will have to go with the first one because the styling on next element is not in my control. Moreover, it may or may not be a headline. – SanJeet Singh Mar 26 '16 at 05:20
@misterManSam I was considering voting as a dupe of [floating stuff within a div, floats outside of div. Why?](http://stackoverflow.com/q/2062258/1529630), but the objective is not exactly the same (the techniques are). I searched "prevent element from being next to float" questions but didn't find proper results. – Oriol Mar 26 '16 at 05:21
@misterManSam I have updated the question with more detail. I don't think it is a duplicate. – SanJeet Singh Mar 26 '16 at 05:22
@Oriol Can you please provide me a link to read more about establishing a new block formatting context? Thanks. – SanJeet Singh Mar 26 '16 at 05:22
@SanJeetSingh See [this answer of mine](http://stackoverflow.com/a/32301823/1529630) – Oriol Mar 26 '16 at 05:23

score 0 · Answer 4 · answered Mar 26 '16 at 05:20

0

You need to clear your floats.

.test::after { content: ''; display: table; clear: both; }

https://jsfiddle.net/L5qz7y2p/3/

answered Mar 26 '16 at 05:20

Garconis

773
11
31

Make an element move below a div without setting height on div

4 Answers4