Replacing a button - html

I tried to search my problem's solution but i couldnt't find it because of my bad english so i apologize if my question have an answer already.
I want place my button to there that i showed you in image. If possibly i want to do this with 'flex'. But doesn't matter.
Here is the code (i wrote just this section)
*{
padding:0;
margin:0;
box-sizing: border-box;
}
body{
background-image: url('img/bg.png');
font-family: 'Roboto', 'sans-serif';
}
a{
text-decoration: none;
}
ul{
list-style: none;
}
.container{
padding-left:2rem;
padding-right:2rem;
}
.container-deep{
padding-left:8rem;
padding-right:8rem;
}
/*about-me start*/
.about-me .card{
background:white;
box-shadow:2px 2px 15px rgba(0,0,0,0.4);
padding:4rem;
display:flex;
border-radius:10px;
}
.about-me .card-info{
margin-left:5rem;
display:flex;
flex-direction: column;
}
.about-me .card .card-info h3{
margin-top:.3rem;
margin-bottom:1rem;
font-size:.8rem;
font-weight: bold;
}
.about-me .card .card-info p{
opacity:.8;
margin-bottom:1rem;
}
.about-me .card .card-info a{
background:black;
border: 1px solid black;
color:white;
padding: .7rem 1.5rem .7rem 1.5rem;
align-self: flex-end;
justify-self: center;
}
.about-me .card .card-info a:hover{
background:white;
color:black;
border: 1px solid black;
}
.about-me .card .card-image img{
width:125vh;
}
/*about-me end*/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author" content="Emir">
<meta name="keywords" content="full, stack, web, development">
<meta name="description" content="Full Stack Web Development">
<title>Full-Stack Web Site</title>
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
</head>
<body>
<section>
<div class="about-me container">
<div class="card">
<div class="card-image">
<img src="https://images.pexels.com/photos/2941570/pexels-photo-2941570.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260">
</div>
<div class="card-info">
<h1>About Me</h1>
<h3>Full-Stack Web Developer</h3>
<p>
Merhaba, ben Emir.
Kendimi web alanında geliştirebilmek adına sürekli araştırmalar yaparak full-stack developer olmayı hedefliyorum.
Yaptığım çalışmaları ve sahip olduğum referansları sunabilmek adına bu siteyi yazdım.
</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Natus illo deleniti nostrum praesentium dignissimos pariatur magnam ipsum perferendis aut ab. Voluptatum, ut sapiente. Fuga dolor corporis quis temporibus quos qui.</p>
Visit My Blog
</div>
</div>
</div>
</section>
</body>
</html>

Using propriety position:relative|absolute to reslove your problem.
Add this in your code :
//Your button "Visit My Blog"
a{
position: absolute;
bottom: 0;
right: 0;
}
//Your content
div.card-info{
position: relative;
}

Using flex, you have to go for a column logic and space-between the child containers like so:
#container {
display: flex;
flex-direction: column;
height: 45vh;
width: 40vw;
justify-content: space-between;
border-style: solid;
border-width: 2px;
border-color: blue;
}
#button {
border-style: solid;
border-width: 2px;
border-color: red;
width: 10vw;
}
<html>
<body>
<div id="container">
<div id="text">This is the about me text</div>
<div id="button">this is the button</div>
</div>
</body>
</html>

Related

How can i make my web layout less wide while keeping it responsive at the same time?

I am making a web layout for my website and i ran into an issue. The overall width of the layout is too much, i'd like to have some margins on the sides of the screen. The layout is responsive but when i add margins to the sides and the responsivity is no longer there and the page looks horrible on a small screen.
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">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<link rel = "stylesheet" href = "style.css">
<title>Document</title>
</head>
<body>
<div class="wrapper">
<header class="header">
<h1>Bootstrap</h1>
</header>
<article class="main">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. At, corporis quibusdam officia magnam asperiores exercitationem laboriosam dolorum hic minima pariatur?
</p>
</article>
<footer class="footer">
<h1>Footer</h1>
</footer>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<script src = "web.js"></script>
</body>
</html>
css:
body{
background-color: gray;
}
.wrapper{
display:flex;
flex-flow: row wrap;
text-align: center;
color: black;
}
.wrapper > * {
padding: 10px;
flex: 1 100%;
border-radius: 5px;
margin: 10px;
}
.header{
background: white;
height: 250px;
}
.footer{
background: white;
height: 80px;
}
.main{
text-align: left;
background: white;
height: 300px;
font-size: 24px;
height: 1200px;
}
I tried adding margins to the sides but it didn't work.
.wrapper > * {
padding: 10px;
flex: 1 100%;
border-radius: 5px;
margin: 10px 300px 10px 300px;
}
You may want to use #media in CSS
#media only screen and (max-width: 600px) {
.wrapper > * {
margin: 0px;
}
}
Easiest way would be to give the .wrapper a max-width and set the margins to center it
.wrapper{
max-width: 80vw; // layout will be this same width on every screen
margin: 0 auto; // wrapper will be centered
display:flex;
flex-flow: row wrap;
text-align: center;
color: black;
}

Putting a vertical line after flex element

I've started again with web design and am currently building my portfolio. Anyway, I wanted to know how you would implement that. I have the problem that I want to put a vertical line under an element.
/* main-style.css */
#import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght#300&display=swap');
:root {
--default-font: 'Century Gothic';
--default-jp-font: 'Noto Sans JP';
}
* {
margin: 0;
padding: 0;
font-family: var(--default-font);
text-transform: uppercase;
}
html {
overflow: scroll;
overflow-x: hidden;
}
::-webkit-scrollbar {
width: 1px;
background: transparent;
}
::-webkit-scrollbar-thumb {
background: rgb(138, 33, 199);
}
body {
background-color: #252525;
}
.body-wrapper {
width: 100%;
scroll-behavior: smooth;
}
section {
height: 100vh;
}
#welcome {
background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('../img/background-welcome.jpg');
background-size: cover;
background-repeat: no-repeat;
display: flex;
justify-content: center;
align-items: center;
}
#welcome>.content-container {
margin-top: 25%;
margin-left: auto;
background-color: rgba(255, 255, 255, 0.2);
width: 20%;
text-align: center;
padding: 1.4% 0.4%;
backdrop-filter: blur(2px);
border: 2px solid white;
flex-wrap: wrap;
}
#welcome>.content-container>p {
color: wheat;
font-size: 24px;
letter-spacing: 3px;
}
#welcome>.content-container>p>b {
color: #f5deb3;
}
#welcome>.side-content-container {
margin-left: auto;
height: 100%;
justify-self: flex-end;
padding-right: 2%;
display: flex;
align-items: center;
}
#welcome>.side-content-container>p {
/*color: rgb(185, 157, 30);*/
font-size: 26px;
writing-mode: vertical-rl;
letter-spacing: 1.5rem;
color: transparent;
background-image: url('../img/background-welcome.jpg');
background-size: cover;
background-repeat: no-repeat;
background-clip: text;
-webkit-background-clip: text;
filter: brightness(500%);
}
.section-seperator {
width: 100%;
height: 0.2rem;
background-color: white;
}
<!-- index.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>This is me. - Jxson</title>
<link rel='stylesheet' type='text/css' media='screen' href='assets/css/main-style.css'>
</head>
<body>
<div class="body-wrapper">
<section id="welcome">
<div class="content-container">
<p>Hey! this is me:<br><b>{Jason}</b></p>
</div>
<div class="side-content-container">
<p>私はアンを愛しています</p>
</div>
<div class="line">
</div>
</section>
<div class="section-seperator">
</div>
<section>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Id odio error quos dolores blanditiis reiciendis illum sit veniam temporibus, sapiente earum iure, reprehenderit sequi, quae assumenda est alias incidunt iusto!</p>
</section>
</div>
</body>
</html>
I'm specifically referring to the #welcome section which renders the content as a flex grid. I'm already trying to work with responsive positioning, but I don't want to use any shitfixes like "position: absolute" because I want to ensure as much dynamism as possible. Does anyone have an idea or a suggestion on how to implement this? Suggestions for improvement are welcome ^^
I already tried to play around with position absolute but i dont want to use that, due the dynamic size. I also tried to play around with flex-wrap and indexes but nothing worked out for me!
.container{
display:flex;
justify-content:center;
align-items:center;
height:95vh;
flex-direction:column;
}
.line{
height:15vh;
border:solid 1px red;
}
<div class='container'>
<div id='text'>
Hi my name is <br>
</div>
<div class='line'></div>
</div>

How to prevent flex-basis resize item image?

Due to the html markup I had to use flex-basis to improve style, so that p element start from the same column as the title/headline, and problem was fixed using flex-basis.
But as you can see in the screenshot, the image takes too much height and width.
I tried to fix it applying max-height and max-width, but it breaks my style.
And my goal is to remove that space so that i can control the space between the content and button.
Note: I can't use css grid. I know, it would be easier, but there are problems on ios using css grid.
Here is the sandbox link and code snippet below
.container {
display: flex;
flex-wrap: wrap;
background-color: grey;
column-gap: 15px;
padding: 20px;
}
.content {
display: flex;
flex-direction: column;
flex-wrap: wrap;
}
.logo-image {
flex-basis: 100%;
object-fit: contain;
object-position: top;
padding-top: 10px;
order: 1;
align-self: flex-start;
}
.headline {
color: white;
order: 2;
padding-left: 10px;
}
.text {
color: white;
font-size: 16px;
margin-bottom: 20px;
order: 3;
}
.btn {
display: flex;
width: 100%;
}
button {
align-items: center;
background-color: black;
color: white;
flex: 0 0 90%;
justify-content: center;
margin: 0;
}
body {
margin: 0;
padding: 0;
}
<div class="container">
<div class="content">
<h4 class="headline">
Block Title
</h4>
<img src="https://i.stack.imgur.com/Pm2og.png" width="50px" class="logo-image" alt="img" />
<p class="text">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente
aliquid sit, cupiditate
</p>
</div>
<div class="btn">
<button>link</button>
</div>
</div>
]3 and code
First, remove flex-basis on .logo-image.
Then put h4.headline and your img in its own .wrapper and add display: flex; to it. Then just set img { max-width: 100%;) so that your image resizes appropriately in the container.
.container {
display: flex;
flex-wrap: wrap;
background-color: grey;
column-gap: 15px;
padding: 20px;
}
.content {
display: flex;
}
.logo-image {
object-fit: contain;
object-position: top;
padding-top: 10px;
align-self: flex-start;
}
.headline {
color: white;
padding-left: 10px;
}
.text {
color: white;
font-size: 16px;
padding-left: 10px;
}
.btn {
display: flex;
width: 100%;
}
button {
align-items: center;
background-color: black;
color: white;
flex: 0 0 90%;
justify-content: center;
margin: 0;
}
body {
margin: 0;
padding: 0;
}
.wrapper {
display: flex;
flex-direction: column;
}
img {
max-width: 100%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" href="style.css" />
<title>Static Template</title>
</head>
<body>
<div class="container">
<div class="content">
<img src="https://i.stack.imgur.com/Pm2og.png" width="50px" class="logo-image" alt="img" />
<div class="wrapper">
<h4 class="headline">
Block Title
</h4>
<div>
<p class="text">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente aliquid sit, cupiditate
</p>
</div>
</div>
</div>
<div class="btn">
<button>link</button>
</div>
</div>
</body>
</html>
Can't you make the image position:absolute so you wont need flex-box
.container {
display: flex;
flex-wrap: wrap;
background-color: grey;
column-gap: 15px;
padding: 20px;
}
.content {
position: relative;
padding-left: 4rem;
}
.logo-image {
position: absolute;
left: 0;
top: 0;
}
.headline {
color: white;
order: 2;
margin:0 0 0.5rem;
}
.text {
color: white;
font-size: 16px;
margin:0 0 10px;
order: 3;
}
.btn {
display: flex;
width: 100%;
}
button {
align-items: center;
background-color: black;
color: white;
flex: 0 0 90%;
justify-content: center;
margin: 0;
}
body {
margin: 0;
padding: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" href="style.css" />
<title>Static Template</title>
</head>
<body>
<div class="container">
<div class="content">
<h4 class="headline">
Block Title
</h4>
<img src="https://i.stack.imgur.com/Pm2og.png" width="50px" class="logo-image" alt="img" />
<p class="text">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente
aliquid sit, cupiditate
</p>
</div>
<div class="btn">
<button>link</button>
</div>
</div>
</body>
</html>

Same images, same container but different sizes

I have the same images set up within a container. I have set up a width (it´s suppose that this has to apply both of them) but in the end the right one looks bigger BUT this happens when it gets to the #media (min-width:1024px). I believe this is related with responsive. While we have the images under that size and in display: block is OK. When it turns display:flex the problem begins. Please anybody help me with this issue. It doesn´t has any sense. (evidence attached)
HTML code
<!DOCTYPE html>
<html lang="es">
<head>
<title>Balance-Salud Mental</title>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width", user-scalable=no, initial-scale=1, maximun-
scale=1, minimun-scale=1"/>
<meta name="description" content="Tu salud mental es importante, cuidala con los profesiones
adecuados. "/>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<link rel="icon" href="img/favicon.png">
<link rel="stylesheet" href="css/fontello.css">
<link rel="stylesheet" href="css/index.css">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght#300&display=swap"
rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght#500;600&display=swap"
rel="stylesheet"/>
</head>
<body>
<header>
<div class="contenedor">
<a href="index.html">
<img src="img/logo.png" class="brand" alt="Salud Mental Peru">
</a>
<input type="checkbox" id="menu-bar">
<label class="icon-menu-outline" for="menu-bar"></label>
<nav class="menu">
¿Quienes Somos?
Nuestros Profesionales
Consultas y Citas
Artículos
</nav>
</div>
</header>
<main>
<section id=profesionales>
<h2>Conócenos</h2> <br>
<div class="contenedor">
<div class="doctor">
<h3>Manuel Mallqui Babilon</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo corrupti sed distinctio
dolore. Veniam dicta error officiis sed. Aut, mollitia.</p>
<img src="img/foto2.jpg" alt=""/>
</div>
<div class="doctor">
<h3>Manuel Mallqui Ñamot</h3>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Tempora, vero ex accusamus
temporibus maiores esse nihil facilis iusto laudantium aliquid.</p>
<img src="img/foto2.jpg" alt=""/>
</div>
</div>
</section>
</main>
<footer>
<div class="contenedor">
<p>2018-2020 Balance Salud Mental © - Designed by Watermelon</p>
</div>
</footer>
</body>
</html>
CSS CODE
#import url(menu.css);
#import url(slider.css);
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Poppins', sans-serif;
background-color: #9acd32;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='152'
height='152' viewBox='0 0 152 152'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='temple' fill='%23ffffff'
fill-opacity='0.17'%3E%3Cpath d='M152 150v2H0v-2h28v-8H8v-20H0v-2h8V80h42v20h20v42H30v8h90v-8H80v-
42h20V80h42v40h8V30h-8v40h-42V50H80V8h40V0h2v8h20v20h8V0h2v150zm-2 0v-28h-8v20h-20v8h28zM82
30v18h18V30H82zm20 18h20v20h18V30h-20V10H82v18h20v20zm0 2v18h18V50h-18zm20-22h18V10h-18v18zm-54 92v-
18H50v18h18zm-20-18H28V82H10v38h20v20h38v-18H48v-20zm0-2V82H30v18h18zm-20 22H10v18h18v-18zm54
0v18h38v-20h20V82h-18v20h-20v20H82zm18-20H82v18h18v-18zm2-2h18V82h-18v18zm20 40v-18h18v18h-18zM30 0h-
2v8H8v20H0v2h8v40h42V50h20V8H30V0zm20 48h18V30H50v18zm18-20H48v20H28v20H10V30h20V10h38v18zM30
50h18v18H30V50zm-2-40H10v18h18V10z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
header {
width: 100%;
height: 80px;
background: white;
position: fixed;
top: 0;
left: 0;
z-index: 100;
}
.contenedor {
width: 98%;
margin: auto;
}
.brand {
width: 160px;
margin: 3px 10px;
}
section {
width: 100%;
margin-bottom: 25px;
}
/*QUIENES SOMOS*/
#quienes_somos {
text-align: center;
margin-top: 100px;
padding: 20px;
}
/*NUESTROS PROFESIONALES*/
#profesionales {
border: 1px solid red;
text-align: center;
margin-top: 100px;
}
#profesionales .contenedor {
border: 1px solid black;
display: block;
justify-content: center;
}
.doctor {
margin: 20px;
}
.doctor img {
width: 100%;
max-width: 500px;
padding: 10px;
}
/*FOOTER*/
footer .contenedor {
display: flex;
flex-wrap: wrap;
text-align: center;
justify-content: center;
font-size: small;
margin-bottom: 50px;
margin-top: 250px;
}
#media (min-width:1024px) {
.contenedor {
width: 1000px;
}
#profesionales .contenedor {
display: flex;
}
}[enter image description here][1]
The images' width is 100%, but the width of their siblings <p></p> is not set. The content of two <p> has different length. That is why they make the widths of their parents <div class="doctor> different.
The solution could be to add to the .doctor rule a new one: width: 50%.
I hope I have nudged you into understanding the problem.

Using "overflow:hidden;" on a div inside a div

I have a set of 6 divs nested in another div. i have a border-radius set for the parent and no border radius on the nested divs. their combined width is exactly the width of the inner area of the parent div. they are all floated left. in this setup, the corners of the children spill over the rounded corners of the parent. setting overflow to hidden seems to do nothing.
Does anyone know how to hide those corners that are overflowing from the parent?
I am using a css reset which is not in the attached code. that particular file is available here: reset.css
And a link to this page (so you can see what i mean)
79.170.44.85/rasmussenprojects.com/home.html
EDIT: heres a screenshot of what firefox shows in case its not displaying properly for you:
i.stack.imgur.com/OHkng.png
<!doctype html>
<html>
<head>
<title>Home</title>
<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" type="text/css" href="reset.css">
<!--
<link rel="stylesheet" type="text/css" href="home.css">
-->
<style>
html, body{
background-color:rgb(32,32,32);
width:1366px;
height:637px;
position:relative;
}
#banner_logotext{
color:rgb(16,16,16);
width:1074px;
text-align:center;
font-size:32px;
font-weight:700;
font-family:Arial, Helvetica, sans-serif;
}
#banner_slogantext{
color:rgb(16,16,16);
width:1074px;
text-align:center;
font-size:12px;
line-height:6px;
margin-top:8px;
}
.content-panel{
background-color:rgb(64,64,64);
margin:0 auto;
border: 2px solid rgb(16,16,16);
border-radius:16px;
}
#banner{
width:1074px;
height:90px;
padding-top:8px;
}
#navbar{
width:1074px;
height:45px;
}
.navbar-tab{
width:178.333333333px;
height:41px;
float: left;
background-color:rgb(48,48,48);
border: 2px solid black;
}
</style>
</head>
<body>
<div class="content-panel" id="banner">
<p id="banner_logotext">
Lorem ipsum dolor sit amet
</p>
<p id="banner_slogantext">
"Neque porro quisquam est qui dolorem ipsum
<br></br>quia dolor sit amet, consectetur, adipisci velit..."
</p>
</div>
<div class="content-panel" id="navbar">
<div class="navbar-tab">
</div>
<div class="navbar-tab">
</div>
<div class="navbar-tab">
</div>
<div class="navbar-tab">
</div>
<div class="navbar-tab">
</div>
<div class="navbar-tab">
</div>
</div>
</body>
</html>
When you set overflow:hidden you are telling an element to hide any children that overflow out its bounds. As such, in your scenario, you have to set it for the #navbar instead of for each .navbar-tab.
#navbar{ overflow:hidden; }
As was mentioned by Justin Breiland, you can also round some of the corners of the first and last .navbar-tabs for better presentation.
.navbar-tab:first-child { border-top-left-radius: 13px; border-bottom-left-radius: 13px; }
.navbar-tab:last-child { border-top-right-radius: 13px; border-bottom-right-radius: 13px; }
Full example in snippet. Live example: http://codepen.io/anon/pen/wBeKWq
html, body{
background-color:rgb(32,32,32);
width:1366px;
height:637px;
position:relative;
}
#banner_logotext{
color:rgb(16,16,16);
width:1074px;
text-align:center;
font-size:32px;
font-weight:700;
font-family:Arial, Helvetica, sans-serif;
}
#banner_slogantext{
color:rgb(16,16,16);
width:1074px;
text-align:center;
font-size:12px;
line-height:6px;
margin-top:8px;
}
.content-panel{
background-color:rgb(64,64,64);
margin:0 auto;
border: 2px solid rgb(16,16,16);
border-radius:16px;
}
#banner{
width:1074px;
height:90px;
padding-top:8px;
}
#navbar{
width:1074px;
height:45px;
overflow:hidden;
}
.navbar-tab{
width:175px;
height:41px;
float: left;
background-color:rgb(48,48,48);
border: 2px solid black;
}
.navbar-tab:first-child{
border-top-left-radius: 13px;
border-bottom-left-radius: 13px;
}
.navbar-tab:last-child{
border-top-right-radius: 13px;
border-bottom-right-radius: 13px;
}
<div class="content-panel" id="banner">
<p id="banner_logotext">
Lorem ipsum dolor sit amet
</p>
<p id="banner_slogantext">
"Neque porro quisquam est qui dolorem ipsum
<br></br>quia dolor sit amet, consectetur, adipisci velit..."
</p>
</div>
<div class="content-panel" id="navbar">
<div class="navbar-tab">
</div>
<div class="navbar-tab">
</div>
<div class="navbar-tab">
</div>
<div class="navbar-tab">
</div>
<div class="navbar-tab">
</div>
<div class="navbar-tab">
</div>
</div>
adiing overflow:hidden works on your code
html,
body {
background-color: rgb(32, 32, 32);
width: 1366px;
height: 637px;
position: relative;
}
#banner_logotext {
color: rgb(16, 16, 16);
width: 1074px;
text-align: center;
font-size: 32px;
font-weight: 700;
font-family: Arial, Helvetica, sans-serif;
}
#banner_slogantext {
color: rgb(16, 16, 16);
width: 1074px;
text-align: center;
font-size: 12px;
line-height: 6px;
margin-top: 8px;
}
.content-panel {
background-color: rgb(64, 64, 64);
margin: 0 auto;
border: 2px solid rgb(16, 16, 16);
border-radius: 16px;
}
#banner {
width: 1074px;
height: 90px;
padding-top: 8px;
}
#navbar {
width: 1074px;
height: 45px;
overflow: hidden;
}
.navbar-tab {
width: 178.333333333px;
height: 41px;
float: left;
background-color: rgb(48, 48, 48);
border: 2px solid black;
}
<div class="content-panel" id="banner">
<p id="banner_logotext">Lorem ipsum dolor sit amet</p>
<p id="banner_slogantext">"Neque porro quisquam est qui dolorem ipsum
<br></br>quia dolor sit amet, consectetur, adipisci velit..."</p>
</div>
<div class="content-panel" id="navbar">
<div class="navbar-tab"></div>
<div class="navbar-tab"></div>
<div class="navbar-tab"></div>
<div class="navbar-tab"></div>
<div class="navbar-tab"></div>
<div class="navbar-tab"></div>
</div>