Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Trent Stenoien
Full Stack JavaScript Techdegree Graduate 21,632 PointsHaving trouble with spacing on my page
I'm new to programming and decided to challenge myself to create a program that runs Yahtzee. All of the JavaScript is done, but I haven't studied much CSS so I'm having trouble arranging the page how I would like it to look.
Essentially I have a header, and two divs below it that I want side by side. leftDiv contains 7 buttons in total (5 dice, one for rolling, another to end the round); this is the div that's giving my trouble. rightDiv is the scorecard (i.e. a single table) that is easy to manipulate.
So here are my questions: A) what's the best way to get leftDiv to stay left of rightDiv? B) What's the best way to structure the buttons within leftDiv? I've tried using both float and inline-block, but I might have been doing it wrong. Thanks in advance for the help!
EDIT now with more HTML and CSS! It's probably super messy! I only included half of the HTML table.
/**********************************************************
LEFT DIV
**********************************************************/
.lrDiv {
display: inline-block;
width: 40%;
margin: 2.5%;
} /*This class is on both divs*/
button {
display: inline-block;
vertical-align: top;
margin: auto;
padding: 1%;
margin: 1%;
}
button:focus {
outline: 0;
}
.dice {
font-size: 130%;
padding: .75em 1em;
}
.levelTwo {
width: 90%;
margin: auto;
}
.levelTwo button {
width: 45%;
}
[title~="Rerolling"] {
background-color: yellow;
color: black;
border-style: outset;
}
[title~="Keeping"] {
background-color: #CCCC00;
color: white;
border-style: inset;
}
/*************************************************
SCORECARD
*************************************************/
table {
display: inline-block;
vertical-align: top;
border: 2px solid black;
width: 100%;
}
thead {
width: 100%;
}
th {
text-align: center;
}
.scorecard {
background-color: #ffea54;
text-align: center;
}
.scorecard td {
border: 1px solid black;
}
.scorecard th {
border: 2px solid black;
background-color: #ffe100;
}
.scorecard:nth-child(even) {
background-color: #fff08c;
}
.radiotext {
margin: 2% 1%;
}
And here's the HTML
<div class="lrDiv">
<div class="dice">
<button id="d1" class="dice" title="Rerolling">d1</button>
<button id="d2" class="dice" title="Rerolling">d2</button>
<button id="d3" class="dice" title="Rerolling">d3</button>
<button id="d4" class="dice" title="Rerolling">d4</button>
<button id="d5" class="dice" title="Rerolling">d5</button>
</div>
<div class="levelTwo">
<button type="button" id="rollButton">Roll Button</button>
<button type="button" id="scoreButton">Score Now</button>
</div>
</div>
<table class="lrDiv">
<thead>
<tr class="scorecard" class="header1">
<th>Scorecard</th>
</tr>
</thead>
<tbody>
<form>
<tr class="scorecard" class="header2" id="upper">
<td>
<div class="radiotext">
<label>Upper</label>
</div>
</td>
<td>
<div class="radiotext">
<label>Rule</label>
</div>
</td>
<td>
<div class="radiotext">
<label>Scoring</label>
</div>
</td>
<td>
<div class="radiotext">
<label>Points</label>
</div>
</td>
</tr>
<tr class="scorecard" id="one">
<td>
<div class="radio">
<input type="radio" name="optradio" id="one">
</div>
</td>
<td>
<div class="radiotext">
<label>Aces</label>
</div>
</td>
<td>
<div class="radiotext">
<label>Sum of ones</label>
</div>
</td>
<td></td>
</tr>
<tr class="scorecard" id="two">
<td>
<div class="radio">
<input type="radio" name="optradio" id="two">
</div>
</td>
<td>
<div class="radiotext">
<label>Twos</label>
</div>
</td>
<td>
<div class="radiotext">
<label>Sum of twos</label>
</div>
</td>
<td></td>
</tr>
<tr class="scorecard" id="three">
<td>
<div class="radio">
<input type="radio" name="optradio" id="three">
</div>
</td>
<td>
<div class="radiotext">
<label>Threes</label>
</div>
</td>
<td>
<div class="radiotext">
<label>Sum of threes</label>
</div>
</td>
<td></td>
</tr>
<tr class="scorecard" id="four">
<td>
<div class="radio">
<input type="radio" name="optradio" id="four">
</div>
</td>
<td>
<div class="radiotext">
<label>Fours</label>
</div>
</td>
<td>
<div class="radiotext">
<label>Sum of fours</label>
</div>
</td>
<td></td>
</tr>
<tr class="scorecard" id="five">
<td>
<div class="radio">
<input type="radio" name="optradio" id="five">
</div>
</td>
<td>
<div class="radiotext">
<label>Fives</label>
</div>
</td>
<td>
<div class="radiotext">
<label>Sum of fives</label>
</div>
</td>
<td></td>
</tr>
<tr class="scorecard" id="six">
<td>
<div class="radio">
<input type="radio" name="optradio" id="six">
</div>
</td>
<td>
<div class="radiotext">
<label>Sixes</label>
</div>
</td>
<td>
<div class="radiotext">
<label>Sum of sixes</label>
</div>
</td>
<td></td>
</tr>
<tr class="scorecard" class="score" id="upperScore">
<td>
<div class="radiotext">
<label> </label>
</div>
</td>
<td>
<div class="radiotext">
<label>If 63+ scored</label>
</div>
</td>
<td>
<div class="radiotext">
<label>35 bonus points</label>
</div>
</td>
<td>
<div class="radiotext">
<label> </label>
</div>
</td>
</tr>
<tr class="scorecard" class="score" id="upperScore">
<td>
<div class="radiotext">
<label>Upper Score</label>
</div>
</td>
<td>
<div class="radiotext">
<label> </label>
</div>
</td>
<td>
<div class="radiotext">
<label> </label>
</div>
</td>
<td>
<div class="radiotext">
<label>0</label>
</div>
</td>
</tr>
</tbody>
1 Answer
valeriabrigatti
20,820 PointsAs Joachim said, it would greatly help if you could post your CSS so we can help you. :-)
Joachim Larsen
12,140 PointsJoachim Larsen
12,140 PointsHi! Can you please share your CSS for the relevant divs? :-)