Simple CSS Float Issue

Question

I am a beginner and I am trying to create something like this

enter image description here

But I am having trouble getting the lines to stack on top of each other to the left of the text.

Can someone help nudge me in the right direction here?

#topbar {
	width: 15%;
	background-color: #000000;
	height: 3px;
	float: left;
}
#bottombar {
	width: 15%;
	background-color: #000000;
	height: 1px;
	float: none;
    clear: both;
}
#LocationText {
	float: left;
    font-size: 50px;
}

<div id="topbar"></div>
<div id="LocationText">Location</div>
<div id="bottombar"></div>

here is my http://jsfiddle.net/y0sv7shs/

Weafs.py · Accepted Answer · 2014-12-12 10:12:28Z

Use ::before and ::after :pseudo-elements.

span {
  position: relative;
  margin-left: 100px;
  font-size: 50px;
}
span::before, span::after {
  position: absolute;
  content: '';
  width: 50%;
  height: 100%;
  border-top: 1px solid black;
  border-bottom: 1px solid black;
  right: -50%;
  top: 0;
}
span::before {
  left: -50%;
}

<span>Location</span>

Or you could do something like this:

span {
  position: relative;
  margin-left: 100px;
  font-size: 50px;
}
span::before, span::after {
  position: absolute;
  content: '';
  width: 50%;
  height: 25%;
  border-top: 2px solid black;
  border-bottom: 1px solid black;
  right: -50%;
  top: 37.5%;
}
span::before {
  left: -50%;
}

<span>Location</span>

The one that you requested.

enter image description here

span {
  position: relative;
  font-family: 'Bree Serif', serif;
  margin-left: 100px;
  font-size: 50px;
  color: #A0001F;
  font-weight: bold;
}
span::before, span::after {
  position: absolute;
  content: '';
  width: 100%;
  height: 15%;
  border-top: 2px solid #A0001F;
  border-bottom: 2px solid #A0001F;
  right: -100%;
  top: 42.5%;
}
span::before {
  left: -45%;
  width: 45%;
}

<link href='http://fonts.googleapis.com/css?family=Bree+Serif' rel='stylesheet' type='text/css'>
<span>CONTACT</span>

Cody Welsh · Accepted Answer · 2014-12-12 02:42:48Z

1

In addition to chipChocolate's answer, you may also contain the elements so as to force them to reside above one another in a particular location relative to the text (However, this would take more elements, and isn't as clean):

<div class="locationcontainer">
    <div id="topbar"></div>
    <div id="bottombar"></div>
</div>
<div id="LocationText">Location</div>

#topbar {
    width: 100%;
    background-color: #000000;
    height: 2px;
}
#bottombar {
    width:90%;
    background-color: #000000;
    height: 2px;
    margin-top: 10px;
    float:right;
}
.locationcontainer
{
    float:left;
    width:15%;
    margin-right:5px;
}
#LocationText {
    float: left;
}

http://jsfiddle.net/fstqdxeu/

answered Dec 12, 2014 at 2:42

Cody Welsh

263 bronze badges

1 Comment

user4340635 Over a year ago

How would I go about making the lines extend further on one side or the other?

Collectives™ on Stack Overflow

Simple CSS Float Issue

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related