Question 277657 in CSS Question posted in
Some basic documentation can be found here.

CSS: Aligning a word in a div with a line in an adjacent one

I am trying to align a word with a line, each in a separate div.

The code is below. The attached image illustrates the desired result.

enter image description here

  1. I’d like it to work on Chrome, Firefox and IE (including older versions – IE8, etc.).

  2. There should be a space between the left border of the container and the word "Daily".

  3. The dotted line should extend the entire width of the "line div" to the border of the "container".

  4. There should be a space between the word "Daily" and the beginning of the line

I cannot get it to work. In Firefox, for example, the word "Daily" is aligned to the left border of the container. And the line is not aligned, it’s displayed below the intended position.

Please help!

CODE

container {
  position: relative;
  width: 565px;
  float: left;
}

.daily {
  position: relative;
  width: auto;
  float: left;
}

.line {
  position: relative;
  float: left;
  width: 85%;
  top: 0px;
  border-bottom: dotted black 2px;
}

html>body .line {
  top: 15px;
}
<div class="container">
  <div class="daily">Daily</div>
  <div class="line"></div>
</div>
Tags:

4

Answers


  1. 0

    Remove all floats (they do nothing), and instead use absolute positioning to do this.

    Make container have position relative, and make all children have position absolute. Then you can use top and left properties on the children to position them exactly where you want them relative to the container.

    Edit: A better solution would be to use flexbox, and drop support for older browsers.

    Login or Signup to reply.
  2. 0

    Just use display:flex and align-items:center. See below code.

    .item {
  display: flex;
  align-items: center;
  gap: 5px;
}

.line {
  display: inline-block;
  width: 100%;
  height: 2px;
  background: black;
}
    <div class="item">
  <p>Text
  </p>
  <span class="line"></span>
</div>
    Login or Signup to reply.
  3. 0 
    .container {
  display: flex;
  align-items: center;
}

.line {
  border: 1px dashed black;
  flex-grow: 1;
  height: 0px;
}

.text {
  margin-right: 8px;
  margin-left: 8px;
}
    <div class="container">
  <div class="text">Daily</div>
  <div class="line" />
</div>
    Login or Signup to reply.
  4. 0

    Use flexbox and align items to the text baseline:

    .container {
  display: flex;
  align-items: baseline;
  font-size:2em;
  border:1px solid red;
  padding: 10px 0 10px 20px;
}

.daily {
  margin-right: .5ch; /* The space between the text and line. Here set to half a character width. */
}

.line {
  flex-grow: 1; /* fill the remaining space */
  border-bottom: 1px dotted #bbb;
}
    <div class="container">
  <div class="daily">Daily</div>
  <div class="line"></div>
</div>

    I’d like it to work on Chrome, Firefox and IE (including older versions – IE8, etc.).

    At the time of writing Flexbox has 98.3% global support and is very widely used. All major browsers (including Chrome, Firefox and Edge) support it. Even IE10 can do it (with browser prefix) but sadly no support on IE8 (which ended life on January 12, 2016)

    There should be a space between the left border of the container and the word "Daily".

    .container {padding: 10px 0 10px 20px;}

    The dotted line should extend the entire width of the "line div" to the border of the "container".

    .line {flex-grow: 1;}

    There should be a space between the word "Daily" and the beginning of the line

    .daily {margin-right: .5ch;}

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search