I need help with my HTML and CSS code. I need help aligning the big box off to the right. I tried asking this in another post but I ended up asking too many questions in it. I'm new at this. But anyway I need help.
I'm trying to get my HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dojo Sports News Letter</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="alert">
<span class="closebtn" onclick="this.parentElement.style.display='none';">×</span>
The Ninjas have just won!
</div>
<div class="live_scores">
<div class="score_header">
<h1 class="live_scores_head">Live Scores</h1>
<ul>
<ul>SJC Ninjas - 314</ul>
<ul>NS Pirates - 159</ul>
</ul>
<ul>
<ul>CHI Samurai - 0</ul>
<ul>TUL Wizards - 0</ul>
</ul>
<ul>
<ul>BOS Hackers - 13</ul>
<ul>TYO Youkai - 37</ul>
</ul>
<ul>
<ul>BOI Knights - 5</ul>
<ul>SEA Sea Lions- 11</ul>
</ul>
</div>
</div>
<div class="DSNN_section">
<div class="DSNN_Header">
<h1 class="DSNN">  DSNN  </h1>
<p class="sport_list">Football</p>
<p class="sport_list">Basketball</p>
<p class="sport_list">Baseball</p>
<p class="sport_list">Soccer</p>
<p class="sport_list">More...</p>
<img src="assets\search-light.png" class="search_icon">
<img src="assets\hamburger-light.png" class="hamburger">
<img src="assets\user-circle-light.png" class="user_icon">
</div>
</div>
<div class="col1">
<div class = "box_1">
<h1 class="top-stories">Top Stories</h1>
<ul class="box_1_list">
<ul class="box_1_text">Ninjas up big in 5th</ul>
<ul class="box_1_text">Best sports cities</ul>
<ul class="box_1_text">Choi joins Hall of Fame</ul>
<ul class="box_1_text">Tournament underway</ul>
<ul class="box_1_text">Samurai at Wizards...</ul>
</ul>
</div>
<div class="box_2">
<h4 class="custom_dsnn">Customize Your DSNN</h4>
<div class="button_row">
<button class = "button1" type="submit">Sign In</button>
<button class = "signup" type="submit">Sign Up</button>
</div>
</div>
<div id="box_3" onclick="hide(this)">
<h4 class="never">Never miss a play</h4>
<button onclick="hide(Element)" class = "disappear" type="checkbox">Subscribe</button>
</div>
</div>
<div class="box_4">
<h3 class="box4_headline"><img src="assets\live symbol.jpg" class="live_symbol">      Ninjas leading Pirates</h3>
<ul class="b4_list1">
<ul><img src="assets\sjc-ninjas.png" class="ninja_symbol"></ul>
<ul class="SJ">San Jose</ul>
<ul class="ninja1">Ninjas</ul>
<ul class="tenw">(10 W - 3L)</ul>
<button class="ninjascore">
<span class="ninjascore1">319</span>
</button>
</ul>
<p class="vs">VS</p>
<ul class="b4_list2">
<ul><img src="assets\ns-pirates.png" class="pirate_symbol"></ul>
<ul class="NS">Nova Scotia</ul>
<ul class="pirate1">Pirates</ul>
<ul class="twelvew">(12 W - 2 L)</ul>
<button class="piratecore" onclick="">
<span class="piratescore1">159</span>
</button>
</ul>
<p class="gameinfo">A conservative match between two top-performing sides in the Central League Division with a Number 1 seed at stake...</p><p class="readmore">Get more live updates...</p>
</div>
<script src="script.js"></script>
</body>
</html>and CSS code:
* {
margin: 0px auto;
padding: 0px auto;
font-family: sans-serif;
}
body {
background-color: lightgray;
}
.live_scores {
background-color: white;
height: 55px;
width: auto;
}
.score_header {
display: flex;
justify-content: space-evenly;
}
.live_scores_head {
color: black;
background-color: white;
padding-left: 50px;
}
.DSNN_Header {
background-color: black;
display: flex;
justify-content: space-evenly;
height: 55px;
}
.DSNN {
color: whitesmoke;
font-style: italic;
background-color: red;
font-weight: bolder;
transform: rotateY(23px);
}
.sport_list {
color: whitesmoke;
text-align: center;
padding-top: 5px;
font-size: 25px;
}
.search_icon {
height: 33px;
width: 28px;
padding-top: 5px;
padding-left: 5px;
}
.hamburger {
height: 34px;
width: 29px;
padding-top: 5px;
padding-right: 5px;
}
.user_icon {
height: 34px;
width: 29px;
padding-top: 5px;
padding-left: 5px;
}
.col1 {
display: inline-block;
padding-top: 10px;
padding-left: 35px;
margin-top: 5px;
}
.box_1 {
background-color: white;
border: transparent 2px;
height: 200px;
width: 270px;
display: block;
border-radius: 5px;
padding-top: 5px;
}
.top-stories {
text-decoration: underline;
text-align: center;
padding-right: 50px;
}
.box_1_list {
text-align: left;
padding-left: 15px;
}
.box_1_text {
font-size: 15px;
padding-top: 8px;
}
.box_2 {
background-color: white;
padding-top: 10px;
margin-top: 15px;
border-radius: 5px;
border: transparent 2px;
height: 120px;
}
.custom_dsnn {
text-align: center;
text-decoration: solid;
}
.button_row {
display: flex;
padding-left: 20px;
padding-top: 25px;
}
.button1 {
background-color: blue;
padding: 5px 5px;
width: 110px;
box-shadow: 3px 3px;
border: solid 3px;
}
.signup {
background-color: white;
border: solid 3px;
box-shadow: 3px 3px;
width: 110px;
}
#box_3{
padding-top: 10px;
margin-top: 15px;
border: transparent 2px;
height: 120px;
border-radius: 5px;
background-color: white;
}
.disappear {
background-color: bisque;
border: solid 3px;
margin-left: 65px;
margin-top: 50px;
box-shadow: 3px 3px;
}
.never {
text-align: center;
text-decoration: solid;
}
.col2 {
display: inline;
padding-left: 95px;
margin: 20px 20px;
}
.box_4 {
background-color: white;
border-radius: 5px;
border: transparent 5px;
height: 700px;
width: 880px;
margin-left: 600px;
margin-bottom: 1800px;
object-position: 5px;
}
.box4_headline {
margin-right: 15px;
font-size: 33px;
text-align: right;
}
.live_symbol {
align-content: left;
height: 60px;
width: 95px;
margin-left: 5px;
}
.b4_list1 {
position: left;
justify-content: space-between;
object-position: 800px;
}
.b4_list2 {
position: right;
justify-content: space-between;
object-position: 500px;
}
.ninja1 {
color: lightseagreen;
font-size: 35px;
}
.ninja_symbol {
height: 155px;
width: 170px;
padding-top: 10px;
padding-left: 5px;
}
.tenw {
color: lightgray;
font-size: 15px;
}
.ninjascore {
font-size: 50px;
}
.ninascore1 {
background: transparent;
font-size: 50px;
}
.pirate_symbol {
height: 155px;
width: 170px;
}
.pirate1 {
color: red;
font-size: 35px;
}
.twelvew {
color: lightgray;
font-size: 15px;
}
.vs {
text-align: center;
}
.alert {
padding: 20px;
background-color: #f44336;
color: white;
margin-bottom: 15px;
}
.closebtn {
margin-left: 15px;
color: white;
font-weight: bold;
float: right;
font-size: 22px;
line-height: 20px;
cursor: pointer;
transition: 0.3s;
}
.gameinfo {
border-top: black solid;
text-align: center;
}
.readmore {
color: lightskyblue;
}to look like this but it always turns out like this.
How can I move the big box towards the top and get the things inside of it aligned properly? I want to know what I'm doing wrong.
CodePudding user response：
Take a look at this example https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_images_side_by_side
Basically you need to make a row, and each image should be a column of that row.
CodePudding user response：
You need to have a container with two columns inside it. Then inside every column you can place other stuff. Set container to display: flex;. Here is a sample.
* {
box-sizing: border-box;
}
.container {
display: flex;
}
.left-column {
flex-grow: 1;
}
.right-column {
flex-grow: 3;
}
.cell {
border: 1px solid black;
padding: 1rem;
margin: 1rem;
}<div class="container">
<div class="left-column">
<div class="cell">Box 1</div>
<div class="cell">Box 2</div>
<div class="cell">Box 3</div>
</div>
<div class="right-column">
<div class="cell">
<h3>Heading</h3>
<p>Paragraph</p>
</div>
</div>
</div>