CODEWITHSUNDEEP
htmlcss
frosty
frosty

Reputation: 2649

Lining up the bottom of divs

I have 2 divs that only have the border-bottom, and a div in the middle, but bottom of the div in the middle doesn't line up with the 2 divs for some reason. How do I fix this?

body {
        font-size: 0;
}
#line1 {
	border-bottom: 1px solid black;
	display: inline-block;
	width: 25%;
}
#line2 {
	border-bottom: 1px solid black;
	display: inline-block;
	width: 25%;
}
#box {
	font-size: 18px;
	border: 1px solid red;
	display: inline-block;
}
<div id = 'line1'></div>
<div id = "box"> box </div>
<div id = 'line2'></div>

Upvotes: 1

Views: 50

Answers (3)

milevyo
milevyo

Reputation: 2180

for style use this:

<style>
    body {
        font-size: 0;
    }
    #line1 {
        font-size: 18px;
        border-bottom: 1px solid black;
        display: inline-block;
        width: 25%;
    }
    #line2 {
        font-size: 18px;
        border-bottom: 1px solid black;
        display: inline-block;
        width: 25%;
    }
    #box {
        font-size: 18px;
        border: 1px solid red;
        display: inline-block;
    }
</style>

for html add space in line1 & line2

<body>
<div id = 'line1'>&nbsp;</div>
<div id = "box"> box </div>
<div id = 'line2'>&nbsp;</div>
</body>

Upvotes: 0

Nenad Vracar
Nenad Vracar

Reputation: 122047

Try this 

#line2 {
border-bottom: 1px solid black;
display: inline-block;
vertical-align: bottom;
width: 25%;
}

#line1 {
border-bottom: 1px solid black;
display: inline-block;
vertical-align: bottom;
width: 25%;
}

Upvotes: 3

AtheistP3ace
AtheistP3ace

Reputation: 9691

You can use this css style property:

#line1, #line2, #box {
    vertical-align: bottom;
}

Upvotes: 1

Related Questions