CODEWITHSUNDEEP
html
Makie Michaux
Makie Michaux

Reputation: 21

how to make a horizontal line and vertical line cross

i cant seem to create a vertical and horizontal line that will cross in the page. they just seem to scoot each other over. any suggestions? newbie here, thanks for y'all's time!

#colorstrip {
	height: 0px;
    border-bottom:solid 30px #FF8533;
    margin-left: 100px;
}
#verticalLine {
    border-left: solid 12px #FF4719;
    margin-left: 480px;
    height: 100%;
}
<div id="verticalLine"> </div>
        <div id="colorstrip">

Upvotes: 2

Views: 2178

Answers (3)

Nitish Bhagat
Nitish Bhagat

Reputation: 98

I have created a bin , basically have a parent div and put a css for two childs that is vertical and horizontal line below parent div

https://jsbin.com/maxiqetama/edit?html,css,output

Upvotes: 0

Defy_runner
Defy_runner

Reputation: 13

If I understand you correctly, you want to intersecting lines to meet in the page. One way to set it up would be like this.





   #verticalLine{
	position:absolute;
	top:0;
	left:50%;
	width:10px;
	height:100%;
	background-color:#FF4719;
	
}

#colorstrip{
	position:absolute;
	top:50%;
	width:0;
	height:10px;
	width:100%;
	background-color:#FF8533;
	
}


    <div id="verticalLine"></div>
    <div id="colorstrip"></div>

Normal elements on a page behave like text, two elements will show up one after the other.

Position: absolute takes the div out of the normal order of the page and lays it above everything else ignoring just about everything else. When you have a position: absolute element you can use top,left,bottom,and right to control its position on the page.

top:0 is 0 pixels from the top, left: 50% starts the div 50% from the left. (note starting at 50% does not mean its centered to the page) The rest is the size of the color bar, and the color.

There are other ways of achieving this as well.

Upvotes: 0

Bill Kindig
Bill Kindig

Reputation: 3622

colorstrip is being pushed over by verticalLine. Just add position:absolute; and it will fix it. Just be careful, absolute positioning can make things very messy very fast. 

#colorstrip {
	height: 0px;
    border-bottom:solid 30px #FF8533;
    margin-left: 100px;
}
#verticalLine {
    position:absolute;
    border-left: solid 12px #FF4719;
    margin-left: 480px;
    height: 100%;
}
<div id="verticalLine"> </div>
        <div id="colorstrip">

Upvotes: 1

Related Questions