Vertical Line Positioning

I want to put in a vertical between my divs but I want to align on the top but they make everything out of sync. Is there another method to add vertical lines? If so that would be great. SITE

This is the method I am using <div class="verticalLine"></div>

.verticalLine {
    border-right: thin solid black;
    height: 575px;
 
}

You’ll need to clarify what you mean by that. I would suggest just putting a right border line on the first two divs, but perhaps that’s not what you mean.

I did that but then I get the height issue not sure how to control that…I am trying to align them with my
<h3> tags.

Make those 3 columns display:table-cell (I assume they are floats at the moment.)

Table-cells automatically make them equal heights.

1 Like

Something roughly like this:

#wrapper {
    max-width:960px;
    background-color:white;
    margin:auto;
}
#contactcontent {
    display:table;
    width:100%;
    margin:-15px auto;
    border-collapse:collapse;
    table-layout:fixed;
}
#section1contact, #section2contact, #section3contact {
    display:table-cell;
    padding:35px;
    border:1px solid #000;
}
#section1contact, #section2contact {
}
.emailcontact {
    font-family: "open sans", sans-serif;
    color: black;
    font-size: 10pt;
    font-style: italic;
    text-decoration: underline;
}
.addresses {
    font-size: 10pt;
    display: block;
    font-weight: 600;
    font-family: "open sans", sans-serif;
}
.contactitles {
    color:red;
    font-family: "open sans", sans-serif;
}
@media screen and (max-width:800px){
    #section1contact, #section2contact, #section3contact {display:block;width:auto}        
}

I did use table use table-cell :thumbsup:

hmm not exactly what I am looking for let me try to explain it better so for example I want the h3 word “Manufacturing” to align with the line and not go all the way to the top. I have made changes and added things since then. SITE

If you don’t like the borders pushing through the top like that, then why do you have negative margins on this?

#contactcontent {
display: table;
max-width: 100%;
margin: -15px auto;
}

That’s why.

Well I have that negative margin to put the content more to the top. Not only dont I want to push through like that but to not even touch the border but align with the my h3 tags is there such thing? Sorry if im not explaining right :smile:

Table cells (HTML elements) …their text baseline is different than doing display:table-cell.

If you want the text more to the top then remove some of that padding :stuck_out_tongue: . You have 35px top padding set.

I’m afraid I do not understand. Perhaps draw a picture of your ideal look.

Alright Ill mock something up.

ok.

Thank you.

Like this:

Right, so like I said set the top padding from 35px on the cells to 0. Then also remove the default top margins for your headers (the H3 elements IIRC.)

after I did that I get this: I figured I should use padding correct?

Sure - you arent a beginner you know what you want.

1 Like

I would remove the max-width from the cells as that doesn’t make sense because cells must always fill the available space of the table.

If you want even width columns then use the table-layout:fixed algorithm and give the cels a width.

I would do something like this:

#contactcontent {
    display:table;
    max-width:100%;
    margin: auto;
    table-layout:fixed;
}
#section1contact, #section2contact, #section3contact {
    display:table-cell;
    padding:0 20px;
    vertical-align:top;
    width:33%
}
#section1contact, #section2contact {
    border-right: solid 1px;
}

Which is much the same as the code I gave you before :smile:

Note that you cannot have margins on on display:table-row elements just as you can’t put margins on a ‘tr’ element.

Don’t forget to add vertical-align:top to table-cells because browsers render them on the baseline which means content won’t be at the top.

1 Like

May I use?: because table-cells are inline elements and behave like text right? but doesnt Margin:auto only work on block elements with a width (but also table level elements with/without a width)?

#contact{
  display:table-row;
  text-align:center;
  }

So max width is used to limit content’s width?

ok.

Yes, normally.

So The layout is fixed based on the first row? Setting a width of those, and the rest of the table follows.