CODEWITHSUNDEEP
htmlcss
dancemc15
dancemc15

Reputation: 628

How can I have both a div and heading on the same line?

I'm trying to get both a div and header on the same line. How can I accomplish this? Currently, the red div is on the line after the text.

Thanks.

.underlined {
border-bottom: 1px dotted #000;
text-decoration:none;
}

.block {
height:15px;
background-color: #ff5050;
}

https://jsfiddle.net/zp9wa7hf/

Upvotes: 0

Views: 63

Answers (5)

Visveswaran
Visveswaran

Reputation: 41

If you required the red line to be overwrite the text data use the below code HTML

<div class="block">
<h3><u class="underlined">ABOUT ME</u>
</div></h3>

CSS no changes

If you required the red line to be next to text then use the following CSS and HTML

HTML

<h3><u class="underlined">ABOUT ME</u><div class="block">
</div></h3>

CSS 

.underlined {
    border-bottom: 1px dotted #000;
    text-decoration:none;
}

.block {
height:15px;
flex : 1;
background-color: #ff5050;
  }
  h3{
    display : flex;
    align-items: center;
  }

Upvotes: 0

Gaurav P
Gaurav P

Reputation: 1107

Check this fiddle:

https://jsfiddle.net/68v28o3g/

.underlined {
    border-bottom: 1px dotted #000;
    text-decoration:none;
  float:left;
  width:auto;
}

.block {
height:15px;
background-color: #ff5050;
width:80%;
margin-left:20%;

  }

<h3>
<div style="float:left; width:100%">
<u class="underlined">ABOUT ME</u>
<div class="block">
</div>
</div>

</h3>

Note these method are depreciated, use BootStrap for better result (if possible)

Upvotes: 0

Nenad Vracar
Nenad Vracar

Reputation: 122027

You can use Flexbox and you don't need to specify fixed width on any element and also you can get vertical-align with align-items: center

.underlined {
  border-bottom: 1px dotted #000;
  text-decoration: none;
}
.block {
  height: 15px;
  flex: 1;
  background-color: #ff5050;
}
h3 {
  display: flex;
  align-items: center;
}
<h3><u class="underlined">ABOUT ME</u><div class="block"></div></h3>

Upvotes: 1

Naveed Ramzan
Naveed Ramzan

Reputation: 3593

you need to set width and float

because by default div is a block element which placed in full width

Upvotes: 1

shan kulkarni
shan kulkarni

Reputation: 870

use inline property and set width of both the div's like this:

.underlined {
    border-bottom: 1px dotted #000;
    text-decoration:none;
display: inline-block;
width:20%;
}

.block {
height:15px;
background-color: #ff5050;
display: inline-block;  
width:80%;
}

Upvotes: 1

Related Questions