Я пытаюсь создать элемент div, похожий на встраивание, для веб-сайта , над которым я сейчас работаю для школьного проекта .Это для отображения событий для основного календаря событий, который я проектирую.Проблема в том, что они так, как я отформатировал сайт, не могу использовать position: absolute или position: fixed.Я связал свой код так далеко ниже, и мне было интересно, есть ли у кого-нибудь какие-либо предложения о том, как я могу сделать что-то подобное.У меня есть текст, отображаемый в том же элементе div, однако, поскольку боковая панель также является элементом div, она автоматически создает новую строку для текста.Так что мой вопрос действительно
Как я могу получить текст для отображения внутри div?
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<script src="script.js"></script>
<div class="event" id="event1">
<div data-Color="lime" id="colorStrip"></div>
<h1 class="eventTitle">Test Event</h1>
<h1 class="eventSub">Event scheduled for 00/00/00 at 00:00:00</h1>
<h1></h1>
</div>
</body>
</html>
CSS:
#colorStrip{
width: 15px;
background-color: lime;
margin: 0;
height: 100%;
border-radius: 8px 0px 0px 8px;
}
.event{
width: 85%;
height: 400px;
margin-top: 50px;
border-radius: 8px 5px 5px 8px;
background-color: rgb(100,100,100);
border: 2px rgb(50, 50, 50) solid;
}
.eventSub{
position: static;
top: 0;
left: 0;
margin-left: 45px;
font-family: sans-serif
}
.eventTitle{
position: static;
top: 0;
left: 0;
font-family: sans-serif;
font-size: 45px;
}
код для сайта можно найти здесь