-1

I am trying to shift the red border underneath of the black box. How shall I shift the red border?

This is for a css project. In the past I tried to shift the div in html, but the result is unchanged.

#box{
width:150px;
padding:5px;
height:30px;
background-color:#323232;
float:right;
color:white;
text-align:center;
text-transform:uppercase;
}

#border{
border-bottom:2px solid red;
position: relative;
}
<div id="box">Text Goes Inside</div>


<div id="border"></div>

Here how it should look like

enter image description here

zaman
  • 104
  • 1
  • 6
  • 1
    if you float your button, then you have to clear your border. Give #border a `clear:both` – d-h-e Jan 21 '19 at 18:10

3 Answers3

1

Simple: instead of using float to get your box to the right, use margin-left: auto;

So you can change your CSS to:

#box {
    width:150px;
    padding:5px;
    height:30px;
    background-color:#323232;
    margin-left: auto;
    color:white;
    text-align:center;
    text-transform:uppercase;
}

#border {
    border-bottom:2px solid red;
    position: relative;
}

Here's the JSFiddle.

jbyrd
  • 5,287
  • 7
  • 52
  • 86
0

Float: right; is what is making the border go above your box. If you add clear: both; to your border it should display how you'd like.

#box{
width:150px;
padding:5px;
height:30px;
background-color:#323232;
float:right;
color:white;
text-align:center;
text-transform:uppercase;
}

#border{
border-bottom:2px solid red;
position: relative;
clear: both;
}
<div id="box">Text Goes Inside</div>


<div id="border"></div>
coops
  • 1,678
  • 1
  • 13
  • 26
-1

html:

<div class="outer">
<div class="inner" id="box">Text Goes Inside</div>
<div class="inner" id="border"></div>
</div>

CSS:

#box{
width:150px;
padding:5px;
height:30px;
background-color:#323232;
color:white;
text-align:center;
text-transform:uppercase;
position: relative;
}

#border{
border-bottom:2px solid red;
position: relative;
}

.outer {
  width: 100%;
}
user10946344
  • 3
  • 3
  • Instead of just pasting code to fix the OP's problem, please add a description to your answer explaining what was wrong with OP's problem, and how to solve it. Pasting a code solution is unhelpful without context. – Tiffany Jan 22 '19 at 03:53