Having trouble with css borders with div's

i am just begining to code and so far i am enjoying it, however i ran into a problem, my borders arent going all the way around my div’s, can someone explain/help fixing this problem?

code:

<!DOCTYPE html>
<html lang="nl">
    <head>
        <meta charset="UTF-8">
            <title>Oefening</title>
        <style>
            body{
                border: 1px solid black;
                width: 40%;
                font-size: 80px;
            }
            #A{
                width: 150px;
                height: 150px;
                background-color: green;
                margin-top: 10px;
                margin-left: 10px;
                padding-left: 25px;
            }
            #B{
                width: 150px;
                height: 150px;
                background-color: red;
                margin-top: 20px;
                margin-left: 70px;
                margin-bottom: 20px;
            }
            #C{
                width: 150px;
                height: 150px;
                background-color: blue;
                margin-left: auto;
                margin-right: auto;
                margin-bottom: 30px;
                padding-right: 25px;
            }
        </style>
    </head>
    <body>
        <div id="A">
            <div style="border: 1px solid black;"></div>
            A
        </div>
        <div id="B">
            <div style="border: 2px solid black;"></div>
            B
        </div>
        <div id="C">
            <div style="border: 3px dotted black;"></div>
            C
        </div>
    </body>
</html>

It’s because what you’ve got nothing inside the <div> that has the border set on it, so it’s collapsing. Have a look at this revised version I’ve done on Codepen

Note that I also move the content of the <style> attribute from the HTML and into the CSS.

1 Like

thank you for the fast replay.
is there no way to fix it in body?

I’m not sure I understand the question here. Which bit did you want to fix?

1 Like

Hi, lucvk.

Welcome to the forums and welcome to the ranks of enthusiastic coders

Based on your code example, I would like to advise you to take a formal course in HTML and CSS. There are plenty of good courses available on the 'net, some charge a fee, some are free… just be sure the course is teaching modern code and not residue from the turn of the century. If you benefit from human guidance, your community college probably offers at least a couple of courses at reasonable prices. The class should give you a good foundation in the basics of HTML and CSS and in the process you should begin accumulating authoritative references to answer questions or provide useful examples that you will inevitably use as long as you write code.

Two of the greatest assets a newbie can have is an ability to stack boxes and a hunger to learn the facts about how code (esp. CSS) behaves, not how they “think” or “wish” it would behave. A willingness to take those side journeys to a good reference source when you have a nagging question will take you far!!!

Sticking closely to the code that you posted, as @chrisofarabia said, the boxes with borders have no content… in other words they aren’t around anything. If you applied the border rule to the divs with the IDs instead of an empty child within those boxes, I believe you would see what you expect (just guessing, of course).

Next, I would strongly advise you to NOT apply a border or a width to the “body” tag. I usually apply {margin:0} and {padding:0} but never a border or a width. Widths and borders are best applied to a child of the body tag (to which I commonly assign a classname of “outer” ). Leave the body tag pretty much alone until you earn your black belt in HTML and CSS. Hopefully, by then you should have developed sensible coding practices and learned how to avoid misusing it. It’s not that applying a border and width to the body tag shouldn’t be done, it just opens a pandora’s box of worms for a newbie which are best avoided until your grasp of the basics is much better.

Another outdated practice is the use of pixels for font sizes. In today’s world, expressing font-size using em or rem is preferred. Yes, you’ll have to learn how they behave.

Another note about the <body> tag in your code. You are probably (I’m guessing again) bothered because at narrow widths the inner boxes overflow the border assigned to the <body> tag. Well, two things… the width of the body element in your code depends on the width of the browser window but the width of the enclosed divs with the IDs is fixed. It is normal for them to overflow their containing box if they become wider than their parent. So, you need to use some different CSS properties which you may not have learned just yet.

Remember that there are often several ways of doing something with HTML and CSS and the best choice usually depends on the context, the surrounding code.

Personal practice: I do not use, nor do I recommend using, IDs except as needed for forms, fragment identifiers and JavaScript targets. CSS styles are assigned via tags or classnames, IDs rarely. ID’s are “heavy” and invite specifictiy problems; something newbies can and should avoid.

Copy this code to a file and open it in your browser. See how it behaves. Then modify it and see how it changes.

<!DOCTYPE html>
<html lang="nl">
<head>
    <meta charset="UTF-8">
    <title>Oefening</title>
    <style>
/* enable box-sizing if desired. It causes the border and padding values to be included in the width declaration. */
/*
html {
    box-sizing:border-box;
}
*,*:before,*:after {
    box-sizing:inherit;
}
*/
body {
    background-color:#ddd;
    font-size:5em;
/*    padding:0;  /* delete left-most comment mark to enable if desired */
/*    margin:0;  /* enable if desired */
}
.outer {
    width:40%;
    min-width:260px;  /* prevents fixed width child boxes from overflowing parent */
    background-color: white;
    border: 1px solid black;
}
.A,.B,.C {
    width: 150px;
    height: 150px;
}
.outer,.C {
    margin-left:auto;
    margin-right:auto;
}
.A {
    border: 2px dashed black;
    background-color: lightgreen;
    margin-top: 10px;
    margin-left: 10px;
    padding-left: 25px;
}
.B {
    border: 4px dashed black;
    background-color: pink;
    margin-top: 20px;
    margin-left: 70px;
    margin-bottom: 20px;
}
.C {
    border: 6px dashed black;
    background-color: skyblue;
    margin-bottom: 30px;
    padding-right: 25px;
}
    </style>
</head>
<body>

<div class="outer">
    <div class="A">A</div>
    <div class="B">B</div>
    <div class="C">C</div>
</div>

</body>
</html>

Remember to sign up for a formal class in HTML and CSS!!!

5 Likes

thank you all for the replies, i meant with fixing it in body using the inline style of coding.
i figured it out how to do it inline now.
thanks all for the replies and helping me learn some more about coding.
i have signed up for for a 3 year study that involves coding and hardware and was trying to learn some things before the next year starts.

Why do you want to do that?
This is exactly the type of out-dated coding practices you have been warned against.
Keep your styling out of the body and in your css. Otherwise it can become difficult to maintain and create ugly and bloated html.

4 Likes

i was following a book about coding, there are some assignments you can do and one of the was code some borders with these specifications through inline style (if that makes sense to you because english is not my native language)

Whilst inline styling was once common, it is now generally considered bad practice, as it doesn’t offer good ‘separation of concerns’. Given that it appears you already have a separate CSS file, you should put all your styling rules in that and remove any inline styling.

3 Likes

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