Hi. So if I have a container that’s 600px wide, and then I have 3 divs inside this container that are 200px each and no border around them, shouldn’t they fit perfectly side by side and fill the width of entire container with no gap between them?
On a different note, if I have 2 divs, 1 on top of the other, and they’re both 150px wide, shouldn’t the bottom one take up the exact same space the one above is taking?
Thank you!
I’m guessing there is a reason you are asking these questions? Perhaps you have examples of these things that aren’t working the way the are supposed to? If so, can you give us a link to them so we can see for ourselves because it seems like maybe you aren’t giving us all the information we need.
Yes. Here are the HTML and the CSS codes:
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="container">
<div id="home">
<h3>HOME</h3>
<div id="home-score">
<p id="home_pts">0</p>
</div>
<div class="btns">
<button onclick="plusOnePtH(); clicks()">+1</button>
<button onclick="plusTwoPtsH(); clicks()">+2</button>
<button onclick="plusThreePtsH(); clicks()">+3</button>
</div>
</div>
<div id="newgame-btn">
<button onclick="newGame()">New Game</button>
</div>
<div id="guest">
<h3>GUEST</h3>
<div id="guest-score">
<p id="guest_pts">0</p>
</div>
<div class="btns">
<button onclick="plusOnePtG(); clicks()">+1</button>
<button onclick="plusTwoPtsG(); clicks()">+2</button>
<button onclick="plusThreePtsG(); clicks()">+3</button>
</div>
</div>
</div>
<script src="index.js"></script>
</body>
</html>
CSS:
/* body {
margin: 0;
} */
h3 {
color: white;
font-size: 40px;
}
p {
width: 100px;
margin-top: 15px;
}
button {
width: 90px;
margin: 3px;
}
.container {
display: flex;
width: 575px;
height: 385px;
margin: 20px auto;
/* justify-content: space-around; */
background-color: blue;
border-radius: 10px;
}
#newgame-btn {
width: 175;
display: flex;
align-items: flex-end;
}
#home {
width: 200px;
height: 140px;
text-align: end;
margin: 5px 50px 5px 0px;
}
#guest {
width: 200px;
height: 140px;
text-align: end;
margin: 5px 50px 5px 50px;
}
.btns {
display: flex;
width: 155px;
height: 45px;
}
/* #home {
display: block;
width: 100px;
margin-right: auto;
margin-left: auto;
} */
#home-score {
background-color: black;
color: red;
font-size: 80px;
margin: auto;
width: 155px;
height: 120px;
padding: 5px;
}
#guest-score {
background-color: black;
color: red;
font-size: 80px;
margin: auto;
width: 155px;
height: 120px;
padding: 5px;
}
It’s a basketball score board assignment. All I’m trying to do now is center everything. The Home side of the board is one div, the New Game button in the middle is the second div, and the Guest side is the third div. I’d like the Home and Guest sides to be equally wide and both at each end of the Container div. I’ve commented out the “justify-content: space-around” as you can see, but I’ve also tried space-between and space-evenly (the latter won’t even appear as an option for some reason) and none worked.
Also, I’d like the New Game button to be in the dead center of the Container div (in the sense that the “e” in “New” would be in the very middle of the entire image since that E is in the middle of the button).
Thank you in advance for all your help.
Something like this?
I was able to do this by just manipulating the CSS. You have three divs in the .container div. My suggestion would be to get them lined up properly first so they each take up a third of the container, from top to bottom. Then, only after you have those divs working properly should you worry about lining up everything else in those divs.
Yes. That’s really similar to where I’m trying to get, but I’m having a hard time centering even the 3 divs inside the .container. I’ve googled it all, but still can’t get them centered.
So first I should get those 3 divs lined up properly, I get that, do I use a block display set to a row flex-direction? Do I use justify-content? For some reason, whether I add justify-content or remove the one I had, nothing at all changes. Now, whether I use those or another CSS command, do I use them in the .container div or in the individual divs?
Again, thank you for your help.
Got it. Thank you for your help sir!
I’m having another problem now:
<!doctype html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="container">
<div class="first">
<h3>HOME</h3>
<div id="home-score">
<p id="home_pts">0</p>
</div>
<div class="btns">
<button onclick="plusOnePtH(); clicks()">+1</button>
<button onclick="plusTwoPtsH(); clicks()">+2</button>
<button onclick="plusThreePtsH(); clicks()">+3</button>
</div>
</div>
<div class="second">
<button onclick="newGame()" id="savebtn">New Game</button>
</div>
<div class="third">
<h3>GUEST</h3>
<div id="guest-score">
<p id="guest_pts">0</p>
</div>
<div class="btns">
<button onclick="plusOnePtG(); clicks()">+1</button>
<button onclick="plusTwoPtsG(); clicks()">+2</button>
<button onclick="plusThreePtsG(); clicks()">+3</button>
</div>
</div>
</div>
<script src="index.js"></script>
</body>
</html>
CSS:
html, body {
padding: 10px;
}
@font-face {
src: url("Digital7Monoitalic-8MDLJ.ttf");
font-family: calculator;
}
h3 {
color: white;
font-size: 20px;
}
p {
color: red;
font-family: calculator;
}
button {
width: 30px;
margin-top: 10px;
font-size: 12px;
}
.container {
margin: 70px;
display: flex;
width: 300px;
height: 170px;
border: 1px solid black;
background-color: blue;
}
.first {
width: 125px;
height: 170px;
text-align: center;
}
.second {
width: 50px;
height: 170px;
display: flex;
align-items: flex-end;
}
.third {
width: 125px;
height: 170px;
text-align: center;
}
#home-score {
position: relative;
left: 15px;
width: 90px;
height: 50px;
border: 1px solid black;
background-color: black;
}
#guest-score {
position: relative;
left: 15px;
width: 90px;
height: 50px;
border: 1px solid black;
background-color: black;
}
#savebtn {
width: 45px;
text-align: center;
font-size: 11px;
margin-bottom: 5px;
margin-left: 2px;
}
Whenever I make the font bigger, the text gets out of the black box and it invades the area where the buttons are. I want to make it 45px. I’ve inserted the font-size in the CSS “p” element and then in the #home-score, but the same thing happens, the 0 gets out of the black box towards the bottom. Please, help. Thank you.
Browser’s automatically add something to p elements that is causing your issue. Use your browser’s dev tools inspector to see what it is.
But you have other options. Just flex your brain muscles a little and I’m sure you’ll figure it out.
Hi egazzolo1984,
I have tested your code in codepen and the problem you have are the default browser styles. As you can check in this page https://www.w3schools.com/cssref/css_default_values.php the
tag has always 1em of margin-top and margin-bottom. It could be fixed with a simple margin:0.
But if you want to layout some elements that are not a paragraph text you should use the
tag, which is the correct tag for that kind of job.
And if you don’t want to have any problems with the browser default styles in the future, I suggest you to include some “css reset” in top of your main.css styles.
And if you don’t want to have any problems with the browser default styles in the future, I suggest you to include some “css reset” in top of your main.css styles.
Here you have a great explanation and example of a css reset: https://ehtmlu.com/blog/a-simple-css-reset/
Hi egazzolo1984,
I have tested your code in codepen and the problem you have are the default browser styles. As you can check in this page https://www.w3schools.com/cssref/css_default_values.php the <p> tag has always 1em of margin-top and margin-bottom. It could be fixed with a simple margin:0.
But if you want to layout some elements that are not a paragraph text you should use the <div> tag, which is the correct tag for that kind of job.
And if you don’t want to have any problems with the browser default styles in the future, I suggest you to include some “css reset” in top of your main.css styles.
Here you have a great explanation and example of a css reset: https://ehtmlu.com/blog/a-simple-css-reset/
Thank you! I finally got it! I had been staying up for a while trying to solve this. Again, thanks!