How to gain control over <div> container?

HTML-CSS
1

Hello

I’ve made a webside. The website has a div container (class=“mainbox”), which contains some text inside a

container. Everything is normal, aligned beside the left column, as i want it to be.

1
1845×497 27.3 KB

However, when i put the

content into an extra div(class = “devLog”), shit gets out of control. I tried to style it in the css, display, align content and all that stuff i found through googling, but it doesn’t help.

imgur com/a/5E6FgXD

Also a further container added inside the div (class=“mainbox”) would be shown below the left column (gray). How do i make it that the dev-log is displayed as in picture 1, despite having it inside an extra div?

Here is my code:

<!DOCTYPE html>
<html lang="de">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>First Website</title>
	<link rel="stylesheet" href="teststyles.css">
	<script src="scrips.js"></script>
</head>

<body>
	<div class="header">
		<h1>My first Website</h1>
	</div>
	<div class="belly">
		<div class="leftbox">
			<p>This is the left column</p>
			<button type="button" onclick="colorChanger()">
				Change Header Color
			</button>
			<button id="discoPogo" type="button" onclick="disco.pogo()">
				Disco Pogo
			</button>
			<button id="pogoSwitch" type="button" onclick="disco.switch()">
				Stop Pogo
			</button>
		</div>
		<div class="mainbox">
			</div class="devLog">
				<p>
					18.10.2022<br />
					Erste Website erstellt.<br />
					<br />
					19.10.2022<br />
					Knöpfe und Farbwechselheader erstellt.<br />
					<br />
					22.10.2022<br />
					Disco Pogo Funktion erfolgreich eingebaut.<br />
					<br />
					25.10.2022<br />
					Verbesserter Colorchanger Algorithmus.<br />
					Knopfanimation.
					<br />
				</p>
			</div>
			<!--<object data="Taschenrechner/calc.html" class="rechnerbox"></object>-->
		</div>
	</div>
</body>

</html>

CSS:

html{
	height: 100%;
	width: 100%;
	font-family: Arial, Helvetica, sans-serif;
}
body{
	height: 100%;
	width: 100%;
	background-color: bisque;
	margin: 0px;
}

.belly{
	display: flex;
	min-height: 100%;
}

.header{
	background-color: rgb(89, 89, 89);
	height: 100px;
	border-width: 0px;
	border-bottom-width: 1px;
	border-style: solid;
	white-space: nowrap;
}

h1{
	height: auto;
	width: auto;
	font-size: 25pt;
	border: 0px;
	margin: 0px;
	position: relative;
	top: 50%;
	transform: translateY(-50%);
	padding: 10px;
}

.leftbox{
	background-color: gray;
	width: fit-content;
	display: block;
	min-height: 100%;
	padding: 0px;
	float: left;
	white-space: nowrap;
}

p{
	margin-top: 5px;
	margin-bottom: 5px;
	margin-left: 0px;
	margin-right: 0px;
	padding: 5px;
}

.mainbox{
	background-color: rebeccapurple;
	display: block;
	min-width: 75%;
	min-height: 100%;
}

button{
	display: block;
	margin: auto;
	width: 100%;
	margin-left: 0px;
	margin-right: 0px;
	border-width: 1px;
	background-color: rgb(111, 111, 111);
}

button:hover{
	background-color: rgb(89, 89, 89);
	cursor: pointer;
}

button:active {
  background-color: #00000079;
	transition: 0.1s;
}

#pogoSwitch{
	display: none;
}

.devLog{
	display: block;
}

.rechnerbox{
	display: block;
}

Also if this is going to be solved, i plan to add another container inside div (mainbox). First they are supposed to show below (vertical) each other, then i want to make them individually hidable with js.

Are there any surprises awaiting me when i do this?

2

I solved it, you can delete this.

3

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