Css box spacing and size

HTML & CSS
1

So ill start off with the code i’m using which is this:

<style>

.box {
    float: left;
    width: 284px;
    margin-left: 26px;
    margin-top: 10px;
    padding: 5px;
    border: 2px solid black;
}
</style>
<div class="box"><font color="black">Notes: <br> The Rector Search Committee would like to hear what questions you might have regarding the Rector Search. There are forms in the Narthex to submit and drop in the box. We will be replying with answers in the Messenger and on the Web page</div></font>

<div class="box"><font color="black">Dates:  <br> May 21, 2018 at 6:30 PM. Next meeting  <br> <br> <br><br><br> <br> <br></div></font>

My problem is that to get both boxes the same size i have to put a bunch of br> tags in the second box but
I don’t want to add more text then figure out how many br> tags I have to take out. Is there some other code I can use for this i’m open to any ideas.

2

@cahengst02 welcome to the forums.

<off-topic>
When you post code in the forum, you need to format it. To do so you can either select all the code and click the </> button, or type 3 backticks ``` on a separate line both before and after the code block.
</off-topic>

3

Thank you I couldn’t figure it out.

1 Like
4

Hi,
Use display:table or display:flex for equal height siblings

You also have some invalid html there, you closed your div before the closing font tag.
Do away with the font tag and use css to style your text. The font tag is obsolete.

5

I’m not entirely sure what you want, I guess you wan the two boxes equal height.
A few points to mention first though, use valid html. You have nesting errors, watch where you put opening and closing tags for your elements.
Use current html. The <font> element is obsolete and should not be used, use css instead to set fonts.
The third point is to use css to force layout, not html, namely the <br> tag should not be abused like this.

To get the equal heights, there are a few options. Instead of floats I would probably go with display: table or flex. Both can give you side by side elements of equal size.

Example with flex:-

6

Ok so im kinda new to html and css is this what you meant:

.box {
    display:table
    float: left;
    width: 284px;
    margin-left: 26px;
    margin-top: 10px;
    padding: 5px;
    border: 2px solid black;
}
7

See Sam’s example in post #5

8

No, using display: table would be more like this version. Though it needs altering to get the gap between the boxes.

9

Ok so that’s what I want but with Notes and Dates at the top left of the box instead of below it. some thing like what I gave in my example. I don’t want so much spacing between each different line. this is replying to your first comment.

10

Please allow me to recommend that you invest some time in yourself and take a basic up-to-date course in HTML and CSS. Work all of the exercises from start to finish. You’ll be glad that you did!

EDIT: oops. month-old and long abandoned thread.

11

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.